jquery選擇器與css選擇器的風格類似，但是jquery涉及到的功能更爲強大，利用jquery選擇器，可以很快的找出特定的DOM元素，並且對其進行操作，無需擔心瀏覽器是否支持這一選擇器。
根據選擇器行爲特點劃分，jquery選擇器主要有以下幾種分類：
（1）基本選擇器
（2）層次選擇器
（3）過濾選擇器
（4）表單選擇器
1.基本選擇器
特點：最常用、最簡單。
| 選擇器 | 描述 | 返回 | 示例 |
| ＃id（id選擇器） | 根據給定的id匹配一個元素 | 單個元素 | $("#test")選擇id爲test的元素 |
| .class（類選擇器） | 根據給定的class名稱匹配多個元素 | 集合元素 | $(".test")選擇類名爲test的所有元素 |
| element（元素選擇器） | 根據給定的元素名匹配多個元素 | 集合元素 | $("div")選擇所有<div>元素 |
| ＊（全部選擇器） | 匹配所有元素 | 集合元素 | $("*")選擇所有元素 |
| sele1,sele2,seleN有效選擇器 | 將每一個選擇器匹配到的元素合併後一起返回 | 集合元素 | $("div,p.test")選擇所有的<div>和擁有class爲test的<p>元素合併的集合 |
注：在網頁中，每個id名稱只能使用一次，class名稱可重複使用。
2.層次選擇器
特點：利用DOM元素間的層次關係。
| 選擇器 | 描述 | 返回 | 示例 |
| $("a b") 後代選擇器 | 選擇a元素中所有的b（後代）元素 | 集合元素 | $("div span")選擇<div>後代元素中的所有的<span>元素 |
| $("parent>child") 子選擇器 | 選擇parent元素下的child（子）元素。 | 集合元素 | $("div>span")選擇<div>下的所有<span>子元素 |
| $("prev+next")相鄰同輩元素選擇器 | 選擇緊接在prev元素後的next元素 | 單個元素 | $(".test+p")選擇緊接在class爲test的元素後的第一個<p>同輩元素 |
| $("prev~siblings")一般同輩元素選擇器 | 選擇器prev元素後的所有同輩元素 | 集合元素 | $("#test~div")選擇id爲test的元素後面的所有<div>同輩元素 |
注：
（1）子選擇器與後代選擇器的區別：後代選擇器包括孫元素。
<body>
<div>
<p>
<span></span>
</p>
<span></span>
<span></span>
</div>
</body>如代碼所示，當我們使用$("div span")後代元素選擇器時，可以匹配到<div>中後代爲<span>的元素，所以匹配結果爲3個；當我們使用$("div>span")子元素選擇器時，可以匹配到<div>中子元素爲<span>的元素，所以匹配結果爲2個（因爲p標籤中的span元素不是div的子元素）。
（2）可以用next()方法代替$("prev+next")選擇器；用nextAll()方法代替$("prev~siblings")選擇器。同時，有一個方法可選擇所有的同輩節點元素，即siblings()方法。
3.過濾選擇器
特點：通過過濾規則選擇所需的DOM元素。按照不同的過濾規則，過濾選擇器可分爲：基本過濾、內容過濾、可見性過濾、屬性過濾、子元素過濾、表單對象屬性過濾。
基本過濾選擇器
| 選擇器 | 描述 | 返回 | 示例 |
| :first | 選擇第一個元素 | 單個元素 | $("div:first")選擇所有<div>元素中第1個<div>元素 |
| :last | 選擇最後一個元素 | 單個元素 | 同上反推 |
| :not(selector) | 去除所有與給定選擇器匹配的元素 | 集合元素 | $("div:not(.test)")選擇class不是test的div元素 |
| :even | 從一個元素集合中選擇索引是偶數的所有元素 | 集合元素 | $("div:even")選擇索引是偶數的div元素 |
| :odd | 從一個元素集合中選擇索引是奇數的所有元素 | 集合元素 | 同上原理 |
| :eq(index) | 從一個元素集合中選擇索引等於index的元素 | 單個元素 | $("div:eq(1)")選擇索引等於1的<div>元素 |
| :gt(index) | 從一個元素集合中選擇索引大於index的元素 | 集合元素 | $("div:gt(1)")選擇索引大於1的<div>元素 |
| :lt(index) | 從一個元素集合中選擇索引小於index的元素 | 集合元素 | 同上反推 |
| :header | 選擇所有的標題元素 | 集合元素 | $(":header")選擇網頁中所有的<h1>,<h2>...元素 |
| :animated | 選擇當前正在執行動畫的所有元素 | 集合元素 | $("div:animated")選擇正在執行動畫的<div>元素 |
| :focus | 選擇當前獲取焦點的元素 | 集合元素 | $("focus")選擇當前獲取焦點的元素 |
內容過濾選擇器
| 選擇器 | 描述 | 返回 | 示例 |
| :contains(text) | 選取含有文本內容爲"text"的元素 | 集合元素 | $("div:contains('test')")選擇含有文本test的<div>元素 |
| :empty | 選取不包含子元素或者文本的元素（即空元素） | 集合元素 | $("div:empty")選取不包含子元素的<div>元素 |
| :has(selector) | 選取含有選擇器所匹配的元素的元素 | 集合元素 | $("div:has(p)")選取含有<p>元素的<div>元素 |
| :parent | 選擇擁有子元素（包括文本）的元素 | 集合元素 | $("div:parent")選擇含有子元素的<div>元素 |
內容過濾選擇器的過濾規則主要以標籤所包含的子元素來進行篩選過濾，其中子元素也包括了文本信息。
可見性過濾選擇器
| 選擇器 | 描述 | 返回 | 示例 |
| :hidden | 選擇所有不可見的元素 | 集合元素 | $(":hidden") |
| :visible | 選擇所有可見的元素 | 集合元素 | $("visible") |
隱藏元素包括：<input type="hidden"/>、<div style="display:none">、<div style="visibility:hidden">，如果需要確定元素類型，在前方加上元素名即可。例如，$("input:hidden")。
屬性過濾選擇器
| 選擇器 | 描述 | 返回 | 示例 |
| [attribute] | 選擇擁有此屬性的元素 | 集合元素 | $("div[id]")選擇擁有屬性id的元素 |
| [attribute=value] | 選擇屬性的值爲value的元素 | 集合元素 | $("div[class=test]")選擇屬性class爲“test”的<div>元素 |
| [attribute!=value] | 選擇屬性的值不等於value的元素 | 集合元素 | 同上反推 |
| [attribute^=value] | 選擇屬性的值以value開始的元素 | 集合元素 | $("div[class=te]")將選擇到例如class爲"test"的<div>元素 |
| [attribute$=value] | 選擇屬性的值以value結束的元素 | 集合元素 | 同上反推 |
| [attribute*=value] | 選擇屬性的值含有value的元素 | 集合元素 | $("div[class=es]")將選擇到例如class爲"test"的<div>元素 |
| [attribute|=value] | 選擇屬性等於給定字符串或以該字符串爲前綴 | 集合元素 | $("div[class|='te']")選擇屬性title等於te或者以te爲前綴的元素 |
| [attribute~=value] | 選擇屬性用空格分隔的值中包含一個給定值的元素 | 集合元素 | $("div[class~='te']")將選擇到例如class爲"te abc"的<div>元素 |
| [attribute1]...[attributeN] | 多個屬性選擇器合併成一個複合屬性選擇器 | 集合元素 | $("div[id][title$='test']")選擇同時擁有id，並且title以test結束的<div>元素 |
屬性過濾選擇器主要是通過元素的屬性來獲取相應的元素。
子元素過濾選擇器
| 選擇器 | 描述 | 返回 | 示例 |
| :nth-child(index/odd/even/equation) | 選擇每個父元素下的第index個子元素或者奇偶元素(index)從1開始計算 | 集合元素 | $("div.test :nth-child(2)")選擇class爲"test"的<div>父元素下的第二個子元素 |
| :first-child | 選擇每個父元素的第一個子元素 | 集合元素 | $("ul:first-child")將選擇每個<ul>元素中第一個<li>元素 |
| :last-child | 選擇每個父元素的最後一個子元素 | 集合元素 | 同上反推 |
| :only-child | 如果某個元素是它父元素中唯一的子元素，那將會被匹配 | 集合元素 | $("ul li:only-child")在<ul>中選擇唯一子元素<li> |
需要注意的是，“每個父元素”與“父元素”的區別，前者是多個元素的集合，後者是單個元素。:nth-child(3n)可以選擇到每個父元素下索引值是3的倍數的元素。
表單對象屬性過濾選擇器
| 選擇器 | 描述 | 返回 | 示例 |
| :enabled | 選擇所有可用元素 | 集合元素 | $("#form :enabled")選擇id爲form的表單內的所有可用元素 |
| :disabled | 選擇所有不可用元素 | 集合元素 | 同上反推 |
| :checked | 選擇所有被選中的元素 | 集合元素 | $("input:checked")選擇所有被選中的<input>元素 |
| :selected | 選擇所有被選中的選項元素 | 集合元素 | $("select option:selected") |
表單對象屬性過濾選擇器主要是針對表單元素進行過濾。
4.表單選擇器
| 選擇器 | 描述 | 返回 | 示例 |
| :input | 選擇所有的<input>、<textarea>、<select>、<button>元素 | 集合元素 | $(":input") |
| :text | 選擇所有的單行文本框 | 集合元素 | $(":text") |
| :password | 選擇所有的密碼框 | 集合元素 | $(":password") |
| :radio | 選擇所有的單選框 | 集合元素 | $(":radio") |
| :checkbox | 選擇所有的複選框 | 集合元素 | $(":checkbox") |
| :submit | 選擇所有的提交按鈕 | 集合元素 | $(":submit") |
| :image | 選擇所有的圖像按鈕 | 集合元素 | $(":image") |
| :reset | 選擇所有的重置按鈕 | 集合元素 | $("reset") |
| :button | 選擇所有按鈕 | 集合元素 | $("button") |
| :file | 選擇所有的上傳域 | 集合元素 | $("file") |
表單選擇器能使我們能夠方便的獲取到表單的某個或某類型的元素。
本文參考：
《鋒利的jQuery（第2版）》，人民郵電出版社，單東林 張曉菲 魏然