選擇器的型別

在 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,其值為 somethingattr3,其值為 something
  • 有以下狀態:first-childfirst-of-type

你還可以使用逗號分隔不同的選擇器:

$("a, .class1, #someID")  

這會選擇:

  • 所有 <a> 元素
  • 所有具有 class1 類的元素
  • id 為 #someID 的元素

兒童和兄弟姐妹的選擇

jQuery 選擇器通常符合與 CSS 相同的約定,允許你以相同的方式選擇子節點和兄弟節點。

  • 要選擇非直接孩子,請使用空格
  • 要選擇直接孩子,請使用 >
  • 要選擇第一個之後的相鄰兄弟,請使用+
  • 要選擇第一個之後的非相鄰兄弟,請使用~

萬用字元選擇

可能存在我們想要選擇所有元素但沒有選擇的公共屬性(類,屬性等)的情況。在這種情況下,我們可以使用*選擇器,它只選擇所有元素:

$('#wrapper *')    // Select all elements inside #wrapper element