jQuery選擇器通過标簽名、屬性名或内容對DOM元素進行選擇，而不用擔心浏覽器的相容性。
1. 基本選擇器
基本選擇器是jQuery中使用最頻繁的選擇器，由元素ID、class、元素名、多個選擇符組成，通過基本選擇器可以實作大多數頁面元素的查找。
| 選擇器 | 功能 | 傳回值 | 示例 |
|---|---|---|---|
| * | 比對所有元素 | 元素集合 | $("*") |
| #id | 根據指定的ID比對一個元素，示例選取id="loading"的元素 | 單個元素 | $("#loading") |
| .class | 根據指定的類名稱比對元素，示例選取class="readonly"的元素 | 元素集合 | $(".readonly") |
| .class.class | 根據指定的類名稱比對元素，示例選取class="item selected"的元素 | 元素集合 | $(".item.selected") |
| element | 根據指定的元素名比對所有元素 | 元素集合 | $("div") |
| selector1,selector2,...selectorN | 将每一個選擇比對到的元素合并後一起傳回 | 元素集合 | $("div,span") |
示例：
<ul class="container">
<li>選項1</li>
<li class="item selected">選項2</li>
<li>選項3</li>
<li>選項4</li>
<li>選項5</li>
</ul> <script type="text/javascript">
$(function () {
$(".item.selected").css("background-color", "#F5F5F5");
});
</script> 2. 層次選擇器
層次選擇器通過DOM元素間的層次關系擷取元素，主要的層次關系包括後代、父子、相鄰、兄弟關系等，通過其中關系定位元素。
| 選擇器 | 功能 | 傳回值 | 示例 |
|---|---|---|---|
| ancestor descendant | 根據祖先元素比對所有的後代元素 | 元素集合 Array<element(s)> | $("form input") |
| parent > child | 在給定的父元素下比對所有的子元素 | 元素集合 | $("form > input") |
| prev + next | 比對所有緊接在 prev 元素後的 next 元素 | 元素集合 | $("label + input") |
| prev ~ siblings | 比對 prev 元素之後的所有兄弟元素 | 元素集合 | $("form ~ input") |
| next([expr]) | 選取一個包含比對的元素集合中每一個元素緊鄰的後面同輩元素的元素集合。 | 元素集合 | $("#first-item").next() $("#first-item").next(".selected") |
| nextAll([expr]) | 查找目前元素之後所有的同輩元素。 | 元素集合 | $("#first-item").nextAll() $("#first-item").nextAll(".selected") |
| nextUntil([expr | elelment][,filter]) | 查找目前元素之後所有的同輩元素，直到遇到比對的那個元素為止。 | 元素集合 | $("#first-item").nextUntil(".selected") |
| prev([expr]) | 選取一個包含比對的元素集合中每一個元素緊鄰的前一個同輩元素的元素集合。 | 元素集合 | $("#last-item").prev() $("#last-item").prev(".selected") |
| prevAll([expr]) | 查找目前元素之前所有的同輩元素 | 元素集合 | $("#last-item").prevAll() $("#last-item").prevAll(".selected") |
| prevUntil([expr | elelment][,filter]) | 查找目前元素之前所有的同輩元素，直到遇到比對的那個元素為止。 | 元素集合 | $("#last-item").prevUntil(".selected") |
| siblings([expr]) | 選取一個包含比對的元素集合中每一個元素的所有唯一同輩元素的元素集合。 | 元素集合 | $("#third-item").siblings() $("#third-item").siblings(".selected") |
示例：ancestor descendant
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form> $("form input") 結果：
[ <input name="name" />, <input name="newsletter" /> ] 示例：parent > child
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form> $("form > input") 結果：
[ <input name="name" /> ] 示例：next([expr])
<ul>
<li id="first-item">選項1</li>
<li>選項2</li>
<li>選項3</li>
<li>選項4</li>
<li>選項5</li>
</ul> <script type="text/javascript">
$(function () {
$("#first-item").next().css("background-color", "#F5F5F5");
});
</script> 
<ul>
<li id="first-item">選項1</li>
<li class="selected">選項2</li>
<li>選項3</li>
<li>選項4</li>
<li>選項5</li>
</ul> <script type="text/javascript">
$(function () {
$("#first-item").next(".selected").css("background-color", "#F5F5F5");
});
</script> <ul>
<li id="first-item">選項1</li>
<li>選項2</li>
<li class="selected">選項3</li>
<li>選項4</li>
<li>選項5</li>
</ul> <script type="text/javascript">
$(function () {
$("#first-item").next(".selected").css("background-color", "#F5F5F5");
});
</script> 
由于next(".selected")方法隻選取下一個元素，而下一個元素不滿足class="selected"，$("#first-item").next(".selected")為null。
示例：nextAll([expr])
<ul>
<li id="first-item">選項1</li>
<li>選項2</li>
<li class="selected">選項3</li>
<li class="selected">選項4</li>
<li>選項5</li>
</ul> $("#first-item").nextAll(".selected").css("background-color", "#F5F5F5"); 示例：nextUntil([expr | elelment][,filter])
<ul>
<li id="first-item">選項1</li>
<li>選項2</li>
<li>選項3</li>
<li class="selected">選項4</li>
<li>選項5</li>
</ul> $("#first-item").nextUntil(".selected").css("background-color", "#F5F5F5"); 示例：siblings([expr])
<ul>
<li>選項1</li>
<li>選項2</li>
<li id="third-item">選項3</li>
<li>選項4</li>
<li>選項5</li>
</ul> $("#third-item").siblings().css("background-color", "#F5F5F5"); <ul>
<li class="selected">選項1</li>
<li>選項2</li>
<li id="third-item">選項3</li>
<li class="selected">選項4</li>
<li>選項5</li>
</ul> $("#third-item").siblings(".selected").css("background-color", "#F5F5F5"); 3. 索引過濾選擇器
過濾選擇器某類過濾規則進行元素的比對，書寫時都以冒号（:）開頭。
| 選擇器 | 功能 | 傳回值 | 示例 |
|---|---|---|---|
| first()或:first | 選取第一個元素 | 單個元素 | $("li").first() $("li:first") |
| last()或:last | 選取最後一個元素 | 單個元素 | $("li").last() $("li:last") |
| :not(selector) | 去除所有與給定選擇器比對的元素 | 元素集合 | $("li:not(.selected)") $("input:not(:checked)") |
| :even | 選取所有索引值為偶數的元素，索引号從0開始。 | 元素集合 | $("li:even") |
| :odd | 選取所有索引值為奇數的元素，索引号從0開始。 | 元素集合 | $("li:odd") |
| :eq(index) | 選取指定索引值的元素，索引号從0開始。 | 單個元素 | $("li:eq(1)") |
| :gt(index) | 選取所有大于指定索引值的元素，索引号從0開始。 | 元素集合 | $("li:gt(3)") |
| :lt(index) | 選取所有小于指定索引值的元素，索引号從0開始。 | 元素集合 | $("li:lt(3)") |
| :header | 選取所有标題類型的元素，如：h1,h2,... | 元素集合 | $(":header") |
| :animated | 選取所有正在執行動畫效果的元素 | 元素集合 | $(":animated") |
示例：:not(selector)
<ul>
<li class="selected">選項1</li>
<li>選項2</li>
<li>選項3</li>
<li class="selected">選項4</li>
<li>選項5</li>
</ul> $("li:not(.selected)").css("background-color", "#F5F5F5"); 4. 内容過濾選擇器
内容過濾選擇器根據元素的文字内容或所包含的子元素特征擷取元素，其文字内容可以模糊或絕對比對進行元素定位。
| 選擇器 | 功能 | 傳回值 | 示例 |
|---|---|---|---|
| :contains(text) | 擷取包含指定文本的元素 | 元素集合 | $("div:contains(\'A\')") |
| :empty | 擷取所有不包含子元素或者文本的空元素 | 元素集合 | $("td:empty") |
| :has(selector) | 擷取包含有選擇器所比對的元素 | 元素集合 | $("div:has(span)") |
| :parent | 比對含有子元素或者文本的元素 | 元素集合 | $("td:parent") |
5. 可見性過濾選擇器
| 選擇器 | 功能 | 傳回值 | 示例 |
|---|---|---|---|
| :hidden | 擷取所有不可見的元素，或type="hidden"的元素 | 元素集合 | $("tr:hidden") |
| :visible | 擷取所有可見元素 | 元素集合 | $("tr:visible") |
6. 屬性過濾選擇器
屬性過濾選擇器是根據元素的某個屬性擷取元素。
| 選擇器 | 功能 | 傳回值 | 示例 |
|---|---|---|---|
| [attribute] | 選取包含指定屬性的元素 | 元素集合 | $("div[id]") |
| [attribute=value] | 選取指定的屬性等于某個特定值的元素 | 元素集合 | $("input[type=\'text\']") |
| [attribute!=value] | 選取指定的屬性不等于某個特定值的元素 | 元素集合 | $("input[type!=\'text\']") |
| [attribute^=value] | 選取指定的屬性以某個特定值開始的元素 | 元素集合 | $("div[title^=\'A\']") |
| [attribute$=value] | 選取指定的屬性以某個特定值結尾的元素 | 元素集合 | $("div[title$=\'A\']") $("a[href$=\'.jpg\']") |
| [attribute*=value] | 選取指定的屬性包含某個特定值的元素 | 元素集合 | $("div[title*=\'A\']") |
| [selector1][selector2][selectorN] | 選取滿足多個條件的複合屬性的元素 | 元素集合 | $("input[id][type=\'input\']") |
7. 子元素過濾選擇器
| 選擇器 | 功能 | 傳回值 | 示例 |
|---|---|---|---|
| :nth-child(eq|even|odd|index) | 擷取每個元素下的特定位置元素，索引号從1開始。 | 元素集合 | $("#container li:nth-child(2)") $("li:nth-child(even)") $("li:nth-child(odd)") $("li:nth-child(3n)") $("li:nth-child(3n+1)") $("li:nth-child(3n+2)") |
| :nth-last-child(eq|even|odd|index) | 擷取每個元素下的特定位置元素，計數從最後一個元素開始到第一個。 | 元素集合 | $("#container li:nth-last-child(2)") $("li:nth-last-child(even)") $("li:nth-last-child(odd)") $("li:nth-last-child(3n)") $("li:nth-last-child(3n+1)") $("li:nth-last-child(3n+2)") |
| :first-child | 擷取每個父元素下的第一個子元素 | 元素集合 | $("li:first-child") |
| :last-child | 擷取每個父元素下的最後一個子元素 | 元素集合 | $("li:last-child") |
| :only-child | 擷取每個父元素下的僅有一個子元素 | 元素集合 | $("li:only-child") |
8. 表單對象屬性過濾選擇器
表單對象屬性選擇器通過表單對象屬性特征選取該類元素。
| 選擇器 | 功能 | 傳回值 | 示例 |
|---|---|---|---|
| :enabled | 選取表單中所有屬性為可用的元素 | 元素集合 | $("input:enabled") |
| :disabled | 選取表單中所有屬性為不可用的元素 | 元素集合 | $("input:disabled") |
| :checked | 選取表單中所有被選中的元素 | 元素集合 | $("input:checked") |
| :selected | 選取表單中所有被選中option的元素 | 元素集合 | $("select option:selected") |
示例：:selected
$("select option:selected").text(); 9. 表單選擇器
| 選擇器 | 功能 | 傳回值 | 示例 |
|---|---|---|---|
| :input | 選取所有input、textarea、select | 元素集合 | $(":input") |
| :text | 選取所有 type="text" 的input元素 | 元素集合 | $(":text") |
| :password | 選取所有 type="password" 的 input 元素 | 元素集合 | $(":password") |
| :radio | 選取所有type="radio" 的 input 元素 | 元素集合 | $(":radio") |
| :checkbox | 選取所有 type="checkbox" 的 input 元素 | 元素集合 | $(":checkbox") |
| :submit | 選取所有 type="submit" 的 input 元素 | 元素集合 | $(":submit") |
| :image | 選取所有 type="image" 的 input 元素 | 元素集合 | $(":image") |
| :reset | 選取所有 type="reset" 的 input 元素 | 元素集合 | $(":reset") |
| :button | 選取所有 type="button" 的 input 元素 | 元素集合 | $(":button") |
| :file | 選取所有 type="file" 的 input 元素 | 元素集合 | $(":file") |