過濾選擇器有很多，有些通過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"]')