jQuery选择器

Posted 2020-10-17 niusan

  id选择器          $(‘#id‘)
  类选择器          $(‘.class‘)
  元素选择器          $(‘element‘)
  全选选择器          $(‘*‘)
  子选择器          $(‘div > p‘)       直接子元素
  后代选择器          $(‘div  p‘)    
  相邻兄弟选择器     $(‘div + p‘)   所有紧接在div后的p元素，相同的父元素
  一般兄弟选择器     $(‘div ~ p‘)   匹配div之后的所有兄弟元素，具有相同的父元素，并过滤p元素
 // 筛选选择器
  匹配第一个元素     $(‘:first‘)
  匹配最后一个元素    $(‘:last‘)
  选择所有元素去除不匹配给定的元素 $(‘:not(selector)‘)
  匹配集中索引值为index的元素  $(‘:eq(index)‘)
  匹配集合中所有大于给定index的元素     $(‘:gt(index)‘)
  匹配集合中所有小于给定index的元素     $(‘:lt(index)‘)
  索引值为偶数的元素          $(‘:even‘)
  索引值为奇数的元素          $(‘:odd‘)
  选择所有标题元素h1-h6             $(‘:header‘)
  选择指定语言的所有元素     $(‘:lang(language)‘)
  选择该文档的根元素          $(‘:root‘)
  选择正在执行动画效果的元素    $(‘:animated‘)
  选择包含指定文本的元素     $(‘:contains(text)‘)
  选择元素中至少包含指定选择器的元素    $(‘has(selector)‘)
  选择所有含有子元素或文本的元素  $(‘:parent‘)
  选择所有没有子元素的元素    $(‘:empty‘)
  选择所有显示元素          $(‘:visible‘)
  选择所有隐藏元素          $(‘:hidden‘)  包括：display:none;type=hidden的表单；width/height为0；
  属性筛选选择器
  选择指定属性值等于给定字符串或该字符串为前缀   $(‘[arrt|="value"]‘)
  选择指定属性具有包含一个给定的子字符串的元素(选择给定的属性是以包含某些值的元素)  $(‘[arrt*="value"]‘)
  选择指定属性用空格分割的值中包含一个给定值的元素   $(‘[arrt~="value"]‘)
  选择指定属性是给定值的元素          $(‘[arrt="value"]‘)
  选择不存在指定属性或不等于给定值             $(‘[arrt!="value"]‘)
  选择指定属性是以给定字符串开始的元素      $(‘[arrt^="value"]‘)
  选择给定属性是以定值结尾的元素，区分大大小写   $(‘[arrt$="value"]‘)
  选择所有具有指定属性的元素          $(‘[attr]‘)
  选择匹配所有指定的属性筛选器的元素    $(‘[attr1][attr2]‘)
  选择所有父元素下的第一个子元素     $(‘:first-child‘)
   选择所有父元素下的最后一个子元素       $(‘:last-child‘)
   如果某个元素是其父元素的唯一子元素那么他就中了  $(‘:only-child‘)
   选择他们所有父元素的第n个子元素   $(‘:nth-child(n)‘)
   选择所有他们父元素的第n个子元素，计数从最后一个元素开始到第一个   $(‘:nth-last-child(n)‘)
   // 表单元素选择器
   选择所有input,textarea,select,button          $(‘:input‘)
   匹配所有文本框                      $(‘:text‘)
   匹配所有密码框                      $(‘:password‘)
   匹配所有的单选按钮                     $(‘:radio‘)
   匹配所有的复选框                         $(‘:checkbox‘)
   匹配所有提交按钮                         $(‘submit‘)
   匹配所有图像域                      $(‘:imgae‘)
   匹配所有重置按钮                         $(‘:reset‘)
   匹配所有按钮                           $(‘:button‘)
   匹配所有文件域                      $(‘:file‘)
   选取可用的表单元素                     $(‘:enabled‘)
   选取不可用的表单元素                    $(‘:disabled‘)
   选取被选中的input元素                  $(‘:checked‘)
   选取被选中的option元素                 $(‘:selected‘)
   
   // 属性和样式  .attr()与 .removeAttr() 
          1， attr(传递属性名)  :获取属性值
          2， attr(属性名，属性值) :设置属性值
          3， attr(属性名，函数值)   设置属性的函数值
          4， attr(attributes)    :  给指定元素设置多个属性值{name1:"name1",attr2:"attr2"}
          .removeAttr();    为匹配的元素集合中的每一个元素，移除一个属性
       获取Attribute需要用attr,获取Property就需要用prop

       .html()和.text() .val()
       添加样式.addClass();
       删除样式.removeClass()
       切换样式：.toggleClass()
       样式：.css()
       元素的数据存储：.data()