jQuery选择器的那些事

在页面的实际开发中，我们利用js来操作页面dom，来实现渲染，但js自带的document.getElementById等方法去选取dom对象，但这种原生方法使用起来，代码很长，写起来很麻烦，而且有些复杂的功能实现起来很是复杂，不像同样具有选取作用的CSS选择器，用起来灵活且功能强大， 这种情况下，jQuery定义了一套选择器规则，和CSS选择器目的一样，都是为了选择出符合特定规则的元素，这里对于选择器做一个基本的总结， 仅做学习参考，如有不对还请指出。

• 基本选择器

基本选择器	功能
$('*')	匹配页面所有元素
$('#id')	id选择器
$('.class')	类选择器
$('element')	标签选择器

• 组合层次选择器

组合层次选择器	功能
$('E,F')	多元素选择器，用“，”隔开，同时匹配元素E或元素F
$('E F')	后代选择器，用空格分隔，匹配E元素所有的后代(不只是子元素，子元素向下递归)元素F
$(E>F)	子元素选择器，用“>”分隔，匹配E元素的所有直接子元素
$('E+F')	直接相邻选择器，匹配E元素之后的相邻的同级元素F
$('E~F')	普通相邻选择器(弟弟选择器)，匹配E元素之后的同级元素F(无论相邻与否)
$('.class1.class2')	匹配类名中既包含class1又class2的元素

• 基本过滤选择器

基本过滤选择器	功能
$("E:first")	所有E中的第一个
$("E:last")	所有E中的最后一个
$("E:not(selector)")	按照selector过滤E
$("E:even")	所有E中index是偶数
$("E:odd")	所有E中index是奇数
$("E:eq(n)")	所有E中index为n的元素
$("E:gt(n)")	所有E中index大于n的元素
$("E:lt(n)")	所有E中的index小于n的元素
$(":header")	选择h1-h6元素
$("div:animated")	选择正在执行动画效果的元素

• 内容过滤器

内容过滤器	功能
$('E:contains(value)')	内容中包含value值的元素
$('E:empty')	内容为空的元素
$('E:has(F)')	子元素中有F的元素，比如$('div:has(a)'),就是选取元素含有a标签的div元素
$('E:parent')	父元素是E的元素，比如$('td:parent'),就是选取父元素是td的元素

• 可视化选择器

可视化选择器	功能
$('E:hidden')	所有隐藏的E
$('E:visible')	所有可见的E

• 属性过滤选择器

属性过滤选择器	功能
$('E[attr]')	含有属性attr的E
$('E[attr=value]')	属性attr=value的E
$('E[attr!=value]')	属性attr!=value的E
$('E[attr^=value]')	属性attr以value开头的E
=value]')	属性attr以value结尾的E
$('E[attr*=value]')	属性attr包含value的E
$('E[attr][attr*=value]')	复合型选择器，需同时满足条件

• 子元素过滤器

子元素过滤器	功能
$('E:nth-child(n)')	E的第n个子节点
$('E:nth-child(3n+1)')	E的index符合3n+1表达式的子节点
$('E:nth-child(even)')	E的index为偶数的子节点
$('E:nth-child(odd)')	E的index为奇数的子节点
$('E:first-child')	所有E的第一个子节点
$('E:last-child')	所有E的最后一个子节点
$('E:only-child')	只有唯一子节点的E的子节点

• 表单元素选择器

表单元素选择器	功能
$('E:type')	特定类型的input
$(':checked')	被选中的checkbox或radio
$('option:selected')	被选中的option

jQuery除了选择器还提供了一些方法帮助我们查找当前元素相关元素

• .eq(index), .get()

  • 对于特定结果集，我们可以使用eq方法获取到指定index的jQuery对象
    $('div').eq(3) //获取结果集中的第四个jQuery对象
  • 我们也可以通过类数组下标的方式或者get方法获取指定index的dom对象，即jQuery对象转dom对象
    $('div')[2]
$('div').get(2)

• 兄弟元素获取

  • .next([selector]), .prev([selector])
    next获取匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合，
    而且若是提供了一个选择器，那么只有紧跟着的兄弟元素满足选择器时，才会选择此元素
    prev正好相反，是获取之前的元素
    $('.test').next() //获取.test之后的兄弟元素
    $('test').prev("li) //获取.test之前里面有li标签的兄弟元素
  • .nextAll([selector]), .prevAll([selector])
    nextAll获取每个匹配元素集合中每个元素后面所有的同辈元素，同样若是有条件选择器，则筛选出符合条件的所有元素
    prevAll正好相反，获取元素之前的所有元素
    $('.test').nextAll() //获取.test之后的所有兄弟元素
    $('test').prevAll("li) //获取.test之前里面有li标签的所有兄弟元素
  • .siblings([selector])
    获取匹配元素集合中每个元素的兄弟元素，可以提供一个可选的选择器
    $('li.first-item').sbiling() //获取li.first-item的每个兄弟元素

• 父子元素获取

  • .parent([selector])
    获取匹配元素集合中，每个元素的父元素，可以提供一个可选的选择器作为参数
    $('li.item-a').parent() // 获取 li.item-a的父元素
  • .parents([selector])
    获取集合中每个匹配元素的祖先元素，可以提供一个可选的选择器作为参数
    $('li.item-a').parents() //获取li.item-a的祖先元素
  • .children([selector])
    获取匹配元素集合中每个元素的子元素，选择器选择性筛选
    $('ul.level-2').children() //获取ul.level-2的子元素
  • .find([selector])
    查找符合选择器的后代元素
    $('ul').find('li.current') // 获取ul后代里符合li.current的后代

• 筛选当前结果集

  • .filter(selector), .filter(function(index))
    筛选当前结果集中符合条件的对象，参数可以是一个选择器或者一个函数

$('li').filter(':even') //获取li集合中index是偶数的li
$('li').filter(function(index){
    return index%3 == 2
})  //获取li集合中index值余3结果为2的li

• .not(selector), .not(function(index))
  与filter相反，从匹配的元素集合中移除指定元素
• .is(selector), is(function(index)) , is(dom/jqObj)
  判断当前匹配的元素集合中的元素，是否是一个选择器，dom元素或者是
  jQuery对象，如果这些元素至少一个匹配给定的参数，那么返回true

if($target.is('li')){
   $target.css("background-color" , "red");
}

• .has(selector) , .has(dom)
  筛选匹配元素集合中的那些有相匹配的选择器或dom元素的后代元素
  $('li').has('span') //获取li集合里含有span标签的li