过滤选择器有很多，有些通过CSS定义，有些是jQuery所特有的，它们为一些难题提供了令人惊叹的优雅解决方案。CSS规范将这种类型的选择器称为伪类 （pseudo-classes），但jQuery赋予了它新的名字——过滤器 ，因为这些选择器是用来过滤另外一个基础选择器的。这些过滤器非常容易识别，因为它们都以冒号（: ）开头。记住，如果你省略了基础选择器，它就默认为* 。
| 选择器 | 描述 |
|---|---|
| :first | 匹配上下文中的第一个元素。li a:first 返回列表项后代节点中的第一个链接 |
| :last | 匹配上下文中的最后一个元素。li a:last 返回列表项后代节点中的最后一个链接 |
| :first-child | 匹配上下文中的第一个子节点。li:first-child 返回每个列表中的第一个列表项 |
| :last-child | 匹配上下文中的最后一个子节点。li:last-child 返回每个列表中的最后一个列表项 |
| :only-child | 返回所有没有兄弟节点的元素 |
| :nth-child(n) | 匹配上下文中的第n 个子节点。li:nth-child(2) 返回每个列表中的第二个列表项 |
| :nth-child(even|odd) | 匹配上下文中的偶数或奇数子节点。li:nth-child(even) 返回每个列表中的偶数列表项 |
| :nth-child(Xn+Y) | 匹配上下文中的由提供的公式计算出的子节点。如果Y 是0 ，则可以省略。li:nth-child(3n) 返回每个列表中能被3 整除的列表项，而nth-child(5n+1) 返回每个列表中所有能被5 整除的列表项的下一个列表项 |
| :even | 匹配上下文中的偶数元素。li:even 返回所有偶数的列表项 |
| :odd | 匹配上下文中的奇数元素。li:odd 返回所有奇数的列表项 |
| :eq(n ) | 匹配第 n 个元素 |
| :gt(n ) | 匹配第 n 个元素之后的元素（不包含第n 个元素） |
| :lt(n ) | 匹配第 n 个元素之前的元素（不包含第n 个元素） |
这里有一个快捷技巧。:nth-child 过滤器从1开始计数（为了与CSS兼容），而其他的选择器都是从0开始计数（遵循常用的编程约定）。可能刚开始这会让人有点困惑，不过多加练习后你就会习惯。
- 举例说明
//匹配页面上的第一个<a> 元素
a:first
//匹配所有奇数的段落元素
p:odd
//匹配所有偶数的段落元素
p:even
//匹配的是每一个<ul> 元素的最后一个<li> 子节点。
ul li:last-child
//匹配id为languages的table标签中每一行的第一个单元格
table#languages td:first-child| 选择器 | 描述 | CSS支持 |
|---|---|---|
| :animated | 选择处于动画状态的元素 | |
| :button | 选择按钮元素（包括input[type=submit] 、input[type=reset] 、input[type=button] 和button ） | |
| :checkbox | 选择复选框元素（input[type=checkbox] ） | |
| :checked | 选择处于选中状态的复选框或单选按钮元素 | √ |
| :contains(food) | 选择包含文本food 的元素 | |
| :disabled | 选择处于禁用状态的元素 | √ |
| :enabled | 选择处于启用状态的元素 | √ |
| :file | 选择文件输入元素（input[type=file] ） | |
| :has(selector) | 选择至少包含一个匹配指定选择器的元素的元素 | |
| :header | 选择标题元素。比如<h1> 到<h6> | |
| :hidden | 选择隐藏元素 | |
| :image | 选择图片输入元素（input[type=image] ） | |
| :input | 选择表单元素（input 、select 、textarea 、button ） | |
| :not(selector) | 选择不匹配指定选择器的元素 | √ |
| :parent | 选择有子节点（包含文本）的元素6 ，空元素除外 | |
| :password | 选择口令元素（input[type=password] ） | |
| :radio | 选择单选框元素（input[type=radio] ） | |
| :reset | 选择重置按钮元素（input[type=reset] 或者button[type=reset] ） | |
| :selected | 选择列表中处于选中状态的<option> 元素 | |
| :submit | 选择提交按钮元素（input[type=submit] 或者button[type=submit] ） | |
| :text | 选择文本输入框元素（input[type=text] ） | |
| :visible | 选择可见的元素 |
很多CSS和自定义的jQuery过滤选择器是与表单相关的，允许优雅地指定特定元素类型或状态。我们也可以组合过滤选择器。比如，如果想只选择那些同时处于启用和选中状态的复选框，可以使用：
:checkbox:checked:enabled- 举例说明
//选择非复选框的<input> 元素
input:not(:checkbox)
//选择包含<span> 元素的所有<div> 元素
div:has(span)
| 方法名 | 参数 | 返回值 | 作用 |
|---|---|---|---|
| size() | 无 | 元素的个数 | 返回包装集中元素的个数 |
| get(index) | index （数值）需要返回的单个元素的下标。 | 一个DOM元素或DOM元素数组 | 获取包装集中的一个或全部匹配元素。如果不指定参数，则包装集中的所有元素就以JavaScript数组形式返回。如果提供了index 参数，则会返回index 所对应的元素 |
| eq(index) | index （数值）需要返回的单个元素的下标 | 包含一个或零个元素的包装集 | 获取包装集中与index 参数相对应的元素，并返回只包含此元素的新包装集 |
| first() | 无 | 包含一个或零个元素的包装集 | 获取包装集中的第一个元素，并返回只包含此元素的新包装集。如果原包装集为空，则返回空包装集 |
| last() | 无 | 包含一个或零个元素的包装集 | 获取包装集中的最后一个元素，并返回只包含此元素的新包装集。如果原包装集为空，则返回空包装集 |
| toArray () | 无 | 由包装集中的DOM元素组成的JavaScript数组 | 将包装集里的所有元素作为DOM元素数组返回 |
| index (element) | element （元素|选择器）需要获取下标的元素引用，或者用来识别元素的选择器。如果省略此参数，则找出包装集中的第一个元素在同级节点中的下标 | 传入的元素在包装集或者在其同级节点中的下标，若找不到则返回?1 | 在包装集中查找传入的元素，返回它在包装集中的下标，或者返回包装集中的第一个元素在同级节点中的下标。如果没有找到此元素，则返回?1 |
| add(expression,context) | expression （选择器|元素|数组）指定要添加到包装集的元素。该参数如果是jQuery选择器，则将全部匹配的元素添加到包装集中。如果该参数是HTML片段，则创建相应的元素并添加到包装集中。如果参数是DOM元素或DOM元素数组，则直接将其添加到包装集中 context （选择器|元素|数组| jQuery）指定一个上下文，用来缩小匹配第一个参数的元素的查找范围。这和传递到jQuery() 函数中的上下文参数是一样的。 |
所添加元素的原始包装集副本 | 创建包装集的副本并向其中添加由expression 参数指定的元素。expression 可以是选择器、HTML片段、DOM元素或DOM元素数组 |
| not(expression) | expression （选择器|元素|数组|函数）指定要删除的元素。如果该参数是jQuery选择器，则删除任何匹配expression 的元素。如果传递的是元素或者元素数组，则删除包装集中的这些元素 如果传递的是函数，则会为包装集中的每个元素调用此函数（this 指定当前元素），并从包装集中删除调用的返回值为true 的元素 |
不含已删除元素的原始包装集副本 | 创建包装集的副本，从中删除那些与expression 参数值指定的标准相匹配的元素 |
| filter(expression) | expression （选择器|元素|数组|函数）指定要删除的元素。如果参数是jQuery选择器，则删除所有不匹配expression 的元素 如果传递的是元素或者元素数组，则删除包装集中除了这些元素之外的所有元素 如果传递的是函数，则会对包装集的每个元素分别调用此函数（this 指定当前元素），并从包装集中删除函数调用返回值为false 的元素 |
不包含已过滤元素的原始包装集副本 | 创建包装集的副本，并从中删除与expression 参数值指定的标准不匹配的元素集合 |
| slice(begin,end) | begin （数字）在返回的切片中第一个元素的位置，从0开始计数 end （数字）不包含在切片中的第一个元素的位置2 （可选的），或者说是切片中最后一个元素的下一个元素的位置，从0开始计数。如果省略，则切片会扩展到包装集的最后一个元素 |
新建的包装集 | 创建并返回新包装集，此包装集包含匹配集中一个连续的部分 |
| has(test) | test （选择器|元素）要应用到包装元素所有子节点上的选择器或是要测试的元素。只有特定的元素会包含在返回的包装集中，这些元素至少包含一个匹配选择器的子节点，或者其子节点就是传递的元素参数test | 结果包装集 | 创建并返回新包装集，此包装集只包含原始包装集中子节点匹配test 表达式的元素 |
| map(callback) | callback （函数）回调函数，为包装集中的每个元素调用该函数。此函数接受两个参数：元素在集合中的下标（从0开始计数），以及元素本身。当前元素也被作为函数的上下文（this 关键字） | 由已转换值组成的包装集 | 为包装集中的每一个元素调用回调函数，并将返回值收集到jQuery对象实例中 |
| each(iterator) | iterator （函数）回调函数，为匹配集中的每个元素调用。此函数接受两个参数：元素在集合中的下标（从0开始计数）以及元素本身。当前元素也被作为函数的上下文（this 引用） | 包装集 | 遍历匹配集里所有的元素，为每一个元素调用传入的迭代函数 |
| find(selector) | selector （字符串）一个jQuery选择器，只有匹配此选择器的元素才能成为返回集合的一部分返回值 |
新建的包装集 | 返回新的包装集，它包含原始包装集中与传入的选择器表达式相匹配的元素的所有后代元素 |
| is(selector) | selector （字符串）检验包装集中元素的选择器表达式 | 如果至少有一个元素与传入的选择器相匹配，则返回true ，否则返回false | 确定包装集中是否存在与传入的选择器表达式相匹配的元素 |
| end() | 无 | 前一个包装集 | 在jQuery方法链中用来将当前的包装集回滚到前一个返回的包装集 |
| andSelf () | 无 | 合并后的包装集 | 合并方法链中的前两个包装集 |
- 举例说明
//获取a标签的数量
$('a').size();
//从页面上带有alt 特性的所有<img> 元素的包装集中获取第一个元素
var imgElement = $('img[alt]').get(0);
//从页面上带有alt 特性的所有<img> 元素的包装集中获取第一个元素的包装集
$('img[alt]').eq(0);
//从页面上带有alt 特性的所有<img> 元素的包装集中获取第一个元素的包装集
$('img[alt]').first();
//从页面上带有alt 特性的所有<img> 元素的包装集中获取最后一个元素的包装集
$('img[alt]').last();
/*获取页面上<label> 元素后面同级节点的所有<button> 元素，将它们封装成jQuery包装器，然后创建由这些<button> 元素组成的JavaScript数组，将其赋值给allLabeledButtons 变量。*/
var allLabeledButtons = $('label+button').toArray();
//获取id 为findMe 的图片在整个页面图片集合中的下标号
var n = $('img').index('img#findMe');
//匹配带有alt 或title 特性的所有<img> 元素
$('img[alt]').add('img[title]')
//选择所有<img> 元素，然后删除不包含CSS类keepMe 的元素。
$('img').not(function(){ return !$(this).hasClass('keepMe'); });
/*创建一个由所有<td> 元素组成的包装集，然后对包装集中的每个元素调用传递到filter() 方法中的函数（当前匹配的元素作为调用的this 值）。该函数使用正则表达式来决定元素内容是否匹配指定的模式（一个或多个整数序列），如果不匹配则返回false 。过滤器函数调用返回false 的任何元素都不会包含在返回的包装集中。*/
$('td').filter(function(){return this.innerHTML.match(/^\d+$/)});
//获取第3个元素的包装集
$('*').slice(2,3);
//匹配<div> 元素至少包含一个带有alt 特性的<img> 元素的包装集
$('div').has('img[alt]');
//将页面上所有<div> 元素的id 值收集到一个JavaScript数组中
var allIds = $('div').map(function(){
return (this.id==undefined) ? null : this.id;
}).get();
//页面上的每个图片元素调用传入的函数，使用元素的下标值和id 值修改其alt 属性
$('img').each(function(n){
this.alt='This is image['+n+'] with an id of '+this.id;
});
//获取另一个由段落中的所有引用（<cite> 元素）组成的包装集
wrappedSet.find('p cite');
//如果至少有一个元素匹配选择器，则is() 返回true ，否则返回false
var hasImage = $('*').is('img');
/*
filter() 方法返回拥有title 特性的图片集，但是调用end() 方法后会回滚到前一个包装集（包含所有图片的原始集合），该包装集应用了addClass() 方法。如果没有插入end() 方法，addClass() 方法就会应用到集合的副本上。
*/
$('img').filter('[title]').hide().end().addClass('anImage');
/*
这个语句选择所有的<div> 元素并向其添加CSS类a ，然后创建一个由这些<div> 元素后代中所有的<img> 元素组成的新包装集，并向这些<img> 元素添加CSS类b ，最后创建第三个包装集，它是<div> 元素和其后代中的<img> 元素的并集，并向这些元素添加CSS类c 。
最后，<div> 元素拥有CSS类a 和c ，而这些元素后代中的<img> 元素拥有CSS类b 和c 。
*/
$('div')
.addClass('a')
.find('img')
.addClass('b')
.andSelf()
.addClass('c');
| 方法 | 描述 |
|---|---|
| children([selector]) | 返回由每个包装元素所有的子节点（不包含重复的子节点）组成的包装集 |
| closest([selector]) | 返回由与传入参数匹配的单个邻近祖先元素组成的包装集 |
| contents() | 返回由每个元素的内容组成的包装集，包括文本节点（这个方法常用来获取<iframe> 元素的内容） |
| next([selector]) | 返回由每个包装元素后面下一个同级元素（不包含重复元素）组成的包装集 |
| nextAll([selector]) | 返回由每个包装元素后面所有的同级元素组成的包装集 |
| nextUntil([selector]) | 返回由每个包装元素后面所有的同级元素组成的包装集，直至遇到与选择器相匹配的元素，但不包括此元素。如果选择器没有匹配任何元素，或者省略了选择器参数，则会选择后面所有的同级元素 |
| offsetParent() | 返回由包装集中离第一个元素最近的，使用相对或者绝对定位的祖先元素组成的包装集 |
| parent([selector]) | 返回由每个包装元素的直接父元素（不包含重复元素）组成的包装集 |
| parents([selector]) | 返回由每个包装元素所有的祖先元素（不包含重复元素）组成的包装集。这不仅包括直接父元素，还包含其上的所有祖先元素，但是不包括文档根节点 |
| parentsUntil([selector]) | 返回由每个包装元素所有的祖先元素组成的包装集，直至遇到选择器匹配的元素，但不包括此元素。如果选择器没有匹配到元素，或者是省略了选择器参数，则选择所有的祖先元素 |
| prev([selector]) | 返回由每个包装元素前面紧邻的同级元素（不包含重复元素）组成的包装集 |
| prevAll([selector]) | 返回由每个包装元素前面所有的同级元素组成的包装集 |
| prevUntil([selector]) | 返回由每个包装元素前面所有的同级元素组成的包装集，直至遇到选择器匹配的元素，但不包括此元素。如果选择器没有匹配到元素，或者是省略了选择器参数，则选择后面所有的兄弟元素 |
| siblings([selector]) | 返回由每个包装元素的所有同级元素（不包含重复元素）组成的包装集 |
- 举例说明
/*
考虑一个情景，按钮的事件处理函数触发时，处理器内部的this 关键字指向按钮元素。假设我们想找出此按钮是在哪个<div> 元素块中定义的，用closest() 方法就可以轻松搞定
*/
$(this).closest('div')
/*
但是这只能查找最近的<div> 祖先元素。如果我们要找的<div> 在更高层次的祖先元素中该怎么办呢？没问题。我们可以调整传入closest() 的选择器参数来区分要选择的元素
*/
$(this).closest('div.myButtonContainer')
/*
现在选中的是拥有CSS类myButtonContainer 的祖先<div> 元素。
其余的方法以类似的方式工作。比如需要找到一个拥有特殊title 特性的同级按钮
*/
$(this).siblings('button[title="Close"]')