jQuery 选择器(一)

获取元素

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
$('E[attr $=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还提供了一些方法帮助我们查找当前元素相关元素

1 .eq(index), .get([index])

$('div').eq(3); // 获取结果集中的第四个jQuery对象

我们可以通过类数组下标的获取方式或者get方法获取指定index的DOM对象，也就是我们说的jQuery对象转DOM对象

$('div')[2];
$('div').eq(2);

get()不写参数把所有对象转为DOM对象返回

2 .next([selector]), .prev([selector])
next取得匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。如果提供一个选择器，那么只有紧跟着的兄弟元素满足选择器时，才会返回此元素。prev正好相反，获取元素之前的同辈元素

$('.test').next();
$('.test').prev('li');

3 .nextAll([selector]), .prevAll([selector])
nextAll获得每个匹配元素集合中每个元素所有后面的同辈元素，选择性筛选的选择器，prevAll与之相反，获取元素前面的同辈元素

4 .siblings([selectors])
获得匹配元素集合中每个元素的兄弟元素,可以提供一个可选的选择器

$('li.third-item').siblings()

5 .parent([selector])
取得匹配元素集合中，每个元素的父元素，可以提供一个可选的选择器

$('li.item-a').parent()

6 .parents([selector])
获得集合中每个匹配元素的祖先元素，可以提供一个可选的选择器作为参数

$('li.item-a').parents('div')

7 .children([selector])
获得匹配元素集合中每个元素的子元素，选择器选择性筛选

$('ul.level-2').children()

8 .find([selector])
查找符合选择器的后代元素

$('ul').find('li.current');

9 .first()
获取当前结果集中的第一个对象

10 .last()
获取当前结果集的最后一个对象

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

$('li').filter(':even')
$('li').filter(function(index) {
  return index % 3 == 2;
})

12 .not(selector), .not(function(index))
从匹配的元素集合中移除指定的元素，和filter相反

13 .is(selector), is(function(index)), is(dom/jqObj)
判断当前匹配的元素集合中的元素，是否为一个选择器，DOM元素，或者jQuery对象，如果这些元素至少一个匹配给定的参数，那么返回true

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

14 .has(selector), .has(dom)
筛选匹配元素集合中的那些有相匹配的选择器或DOM元素的后代元素

$('li').has('span')