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") |