選擇器的型別
在 jQuery 中,你可以使用元素的許多不同屬性選擇頁面中的元素,包括:
- 型別
- 類
- ID
- 擁有屬性
- 屬性值
- 索引選擇器
- 偽狀態
如果你瞭解 CSS 選擇器, 你會注意到 jQuery 中的選擇器是相同的(除了少數例外)。
以下面的 HTML 為例:
<a href="index.html"></a> <!-- 1 -->
<a id="second-link"></a> <!-- 2 -->
<a class="example"></a> <!-- 3 -->
<a class="example" href="about.html"></a> <!-- 4 -->
<span class="example"></span> <!-- 5 -->
按型別選擇:
以下 jQuery 選擇器將選擇所有 <a>
元素,包括 1,2,3 和 4。
$("a")
按類選擇
以下 jQuery 選擇器將選擇類 example
的所有元素(包括非元素),即 3,4 和 5。
$(".example")
按 ID 選擇
以下 jQuery 選擇器將選擇具有給定 ID 的元素,即 2。
$("#second-link")
通過佔有屬性進行選擇
以下 jQuery 選擇器將選擇具有已定義的 href
屬性的所有元素,包括 1 和 4。
$("[href]")
按屬性值選擇
以下 jQuery 選擇器將選擇 href
屬性所在的所有元素,其值為 index.html
,僅為 1。
$("[href='index.html']")
通過索引位置選擇( 索引選擇器 )
以下 jQuery 選擇器將只選擇 1,第二個 <a>
ie。second-link
因為提供的索引是 1
,如 eq(1)
(注意索引從 0
開始,因此第二個在這裡被選中!)。
$("a:eq(1)")
使用索引排除進行選擇
使用索引:not(:eq())
排除元素
以下選擇 <a>
元素,除了類 example
,即 1
$("a").not(":eq(0)")
選擇排除
要從選擇中排除元素,請使用:not()
以下選擇 <a>
元素,但 example
類除外,它們分別為 1 和 2。
$("a:not(.example)")
通過偽狀態選擇
你也可以使用偽狀態在 jQuery 中選擇,包括:first-child
,:last-child
,:first-of-type
,:last-of-type
等。
以下 jQuery 選擇器將僅選擇第一個 <a>
元素:數字 1。
$("a:first-of-type")
結合 jQuery 選擇器
你還可以通過組合多個 jQuery 選擇器來提高你的特異性; 你可以組合任意數量或組合所有這些。你還可以同時選擇多個類,屬性和狀態。
$("a.class1.class2.class3#someID[attr1][attr2='something'][attr3='something']:first-of-type:first-child")
這會選擇一個 <a>
元素:
- 有以下類:
class1, class2, and class3
- 有以下 ID:
someID
- 具有以下屬性:
attr1
- 具有以下屬性和值:
attr2
,其值為something
,attr3
,其值為something
- 有以下狀態:
first-child
和first-of-type
你還可以使用逗號分隔不同的選擇器:
$("a, .class1, #someID")
這會選擇:
- 所有
<a>
元素 - 所有具有
class1
類的元素 - id 為
#someID
的元素
兒童和兄弟姐妹的選擇
jQuery 選擇器通常符合與 CSS 相同的約定,允許你以相同的方式選擇子節點和兄弟節點。
- 要選擇非直接孩子,請使用空格
- 要選擇直接孩子,請使用
>
- 要選擇第一個之後的相鄰兄弟,請使用
+
- 要選擇第一個之後的非相鄰兄弟,請使用
~
萬用字元選擇
可能存在我們想要選擇所有元素但沒有選擇的公共屬性(類,屬性等)的情況。在這種情況下,我們可以使用*
選擇器,它只選擇所有元素:
$('#wrapper *') // Select all elements inside #wrapper element