选择器
| 基本选择器 | |
|---|---|
| $('*') | 匹配页面所有元素 |
| $('#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 |
|
|
属性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 |
简直就是复习CSS选择器有木有，正是得益于此，开发者在众多js库中迅速青睐于jQuery，看个图方便记忆
除了使用选择器jQuery还提供了一些方法帮助我们查找当前元素相关元素
.eq(index), .get([index])
对于一个特定结果集，我们想获取到指定index的jQuery对象，可以使用eq方法
$('div').eq(3); // 获取结果集中的第四个jQuery对象
我们可以通过类数组下标的获取方式或者get方法获取指定index的DOM对象，也就是我们说的jQuery对象转DOM对象
$('div')[2];
$('div').eq(2);
get()不写参数把所有对象转为DOM对象返回
兄弟元素获取
.next([selector]), .prev([selector])
next取得匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。如果提供一个选择器，那么只有紧跟着的兄弟元素满足选择器时，才会返回此元素。prev正好相反，获取元素之前的同辈元素
$('.test').next();
$('.test').prev('li');
.nextAll([selector]), .prevAll([selector])
nextAll获得每个匹配元素集合中每个元素所有后面的同辈元素，选择性筛选的选择器，prevAll与之相反，获取元素前面的同辈元素
.siblings([selectors])
获得匹配元素集合中每个元素的兄弟元素,可以提供一个可选的选择器
$('li.third-item').siblings()
父子元素获取
.parent([selector])
取得匹配元素集合中，每个元素的父元素，可以提供一个可选的选择器
$('li.item-a').parent()
.parents([selector])
获得集合中每个匹配元素的祖先元素，可以提供一个可选的选择器作为参数
$('li.item-a').parents('div')
.children([selector])
获得匹配元素集合中每个元素的子元素，选择器选择性筛选
$('ul.level-2').children()
.find([selector])
查找符合选择器的后代元素
$('ul').find('li.current');
筛选当前结果集
.first()
获取当前结果集中的第一个对象
.last()
获取当前结果集的最后一个对象
.filter(selector), .filter(function(index))
筛选当前结果集中符合条件的对象，参数可以是一个选择器或者一个函数
$('li').filter(':even')
$('li').filter(function(index) {
return index % 3 == 2;
})
.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')
