選擇器

2018-08-12 21:27 更新

jQuery - 選擇器

jQuery 庫(kù)利用級(jí)聯(lián)樣式表(CSS)選擇器讓我們快速而方便地訪問(wèn)文檔對(duì)象模型(DOM)中的元素或元素組。

jQuery 選擇器是一個(gè)函數(shù),基于給定的標(biāo)準(zhǔn),利用表達(dá)式從 DOM 中找出匹配的元素。簡(jiǎn)單來(lái)說(shuō),選擇器是使用 jQuery 來(lái)選擇一個(gè)或多個(gè) HTML 元素。當(dāng)一個(gè)元素被選中,然后我們對(duì)所選元素可以執(zhí)行各種操作。

$() 工廠函數(shù)

jQuery 選擇器以 dollar 符號(hào)和括號(hào)開始 —— $()。工廠函數(shù) $() 使用了以下三個(gè)部分來(lái)從給定的文檔中選取元素 ——

序號(hào) 選擇器 & 描述
1 標(biāo)簽名

代表在 DOM 中可用的標(biāo)簽名。例如 $('p') 選擇文檔中所有的段落 <p>。

2 標(biāo)簽 ID

代表在 DOM 中帶有給定 ID 的一個(gè)可用的標(biāo)簽。例如 $('#some-id') 選擇文檔中帶有 ID 為 some-id 的單個(gè)元素。

3 標(biāo)簽類

代表在 DOM 中帶有指定類的可用的標(biāo)簽。例如 $('.some-class') 選擇文檔中帶有 some-class 類的所有元素。

上述所有項(xiàng)目可以單個(gè)使用或結(jié)合其他的選擇器使用。所有 jQuery 選擇器除了一些調(diào)整外,都是基于同樣的原則。

注意 —— 工廠函數(shù) $()jQuery() 函數(shù)的同義詞。所以如果你使用的是任何其他 JavaScript 庫(kù),其中 $ 符號(hào)和一些其他的事情有沖突的話,你可以用 jQuery 名稱來(lái)取代 $ 符號(hào),并且你也可以使用 jQuery() 函數(shù)來(lái)替代 $() 函數(shù)。

示例

下面是使用標(biāo)簽選擇器的一個(gè)簡(jiǎn)單的例子。它會(huì)選取帶有標(biāo)簽名稱 p 的全部的元素,并把它們的背景色設(shè)置為 “黃色”。

<html>
   <head>
      <title>The jQuery Example</title>
      <script type="text/javascript" src="https://atts.w3cschool.cn/attachments/image/wk/jquery/jquery.min.js">
      </script>

      <script type="text/javascript" language="javascript">
         $(document).ready(function() {
            $("p").css("background-color", "yellow");
         });
      </script>
   </head>

   <body>
      <div>
         <p class="myclass">This is a paragraph.</p>
         <p id="myid">This is second paragraph.</p>
         <p>This is third paragraph.</p>
      </div>
   </body>

</html>

這將產(chǎn)生如下所示結(jié)果 ——

如何使用選擇器?

選擇器非常有用,在使用 jQuery 的每一步都需要使用選擇器。它們會(huì)從 HTML 文檔中獲得你想要的正確的元素。

下表列出了一些基本的選擇器并用示例進(jìn)行了解釋。

序號(hào) 選擇器 & 描述
1 名稱

選擇出與給定的元素 Name 匹配的所有元素。

2 #ID

選擇出與給定的 ID 相匹配的單個(gè)元素。

3 .Class

選擇出與給定的 Class 匹配的全部元素。

4 Universal (*)

選擇出在 DOM 中全部可用的元素。

5 多個(gè)元素 E, F, G

選擇出所有指定的選擇器 E, FG 的所有組合結(jié)果。

選擇器示例

與上述語(yǔ)法和實(shí)例類似,下面的例子會(huì)使你對(duì)使用其他類型的選擇器有一個(gè)大致的了解 ——

S.N. Selector & Description
1 $('*')

該選擇器選出文檔中所有的元素。

2 $("p > *")

該選擇器選擇出段落元素的所有子元素。

3 $("#specialID")

該選擇器函數(shù)獲取 id="specialID" 的元素。

4 $(".specialClass")

該選擇器獲取帶有 specialClass 類的所有元素。

5 $("li:not(.myclass)")

選擇出與 <li> 匹配并且不帶有 class="myclass" 類的所有元素。

6 $("a#specialID.specialClass")

該選擇器與 id 為 specialID 的鏈接匹配并且?guī)в?specialClass 類。

7 $("p a.specialClass")

該選擇器與帶有 specialClass 類的鏈接匹配并且該類在 <p> 元素內(nèi)聲明。

8 $("ul li:first")

該選擇器獲取 <ul> 的第一個(gè) <li> 元素。

9 $("#container p")

選擇與 <p> 匹配并且是帶有 container id 元素的后代的全部元素。

10 $("li > ul")

選擇與 <ul> 匹配并且是與 <li> 匹配的元素的孩子的全部元素。

11 $("strong + em")

選擇與 <em> 匹配并且緊跟一個(gè)與 <strong> 匹配的兄弟元素的全部元素。

12 $("p ~ ul")

選擇與 <ul> 匹配并且后面有一個(gè)與 <p> 匹配的兄弟元素的全部元素。

13 $("code, em, strong")

選擇所有與 <code> 或 <em> 或 <strong> 匹配的元素。

14 $("p strong, .myclass")

選擇與 <strong> 匹配并且是與 <p&gt 匹配的元素的后代,同樣所有的元素都要有 myclass 類的全部元素。

15 $(":empty")

選擇出所有沒(méi)有孩子的元素。

16 $("p:empty")

選擇出所有與 <p> 匹配并且沒(méi)有孩子的元素。

17 $("div[p]")

選擇出與 <div> 匹配并且包含一個(gè)與 <p> 匹配的元素的所有元素。

18 $("p[.myclass]")

選擇出與 <p> 匹配并且包含一個(gè)帶有 myclass 類的元素的所有元素。

19 $("a[@rel]")

選擇出與 <a> 匹配并且?guī)в?rel 屬性的全部元素。

20 $("input[@name=myname]")

選擇出所有與 <input> 匹配并且 name 值恰好等于 myname 的元素。

21 $("input[@name^=myname]")

選擇出所有與 <input> 匹配并且 name 值以 myname 開始的元素。

22 $("a[@rel$=self]")

選擇出所有與 <a> 匹配并且?guī)в幸?self 結(jié)尾的 rel 屬性值的元素。

23 $("a[@href*=domain.com]")

選擇出所有與 <a> 并且?guī)в幸粋€(gè)包含 domain.com 的超鏈接值的元素。

24 $("li:even")

選擇出與 <li> 匹配并且?guī)в幸粋€(gè) even 索引值的全部元素。

25 $("tr:odd")

選擇出與 <tr> 匹配并且有 odd 索引值的全部元素。

26 $("li:first")

選擇出第一個(gè) <li> 元素。

27 $("li:last")

選擇出最后一個(gè) <li> 元素。

28 $("li:visible")

選擇出與 <li> 匹配并且可見的全部元素。

29 $("li:hidden")

選擇出與 <li> 匹配并且不可見的全部元素。

30 $(":radio")

選擇出表單中全部的單選按鈕。

31 $(":checked")

選擇出表單中全部的復(fù)選框。

32 $(":input")

只選擇表單元素 (輸入,選擇,文本區(qū),按鈕)。

33 $(":text")

只選擇文本元素 (input[type=text])。

34 $("li:eq(2)")

選擇第三個(gè) <li> 元素。

35 $("li:eq(4)")

選擇第五個(gè) <li> 元素。

36 $("li:lt(2)")

選擇第三個(gè)之前的與 <li> 元素匹配的所有元素;換句話說(shuō),也就說(shuō)前兩個(gè) <li> 元素。

37 $("p:lt(3)")

選擇第四個(gè)之前的與 <p> 元素匹配的全部元素;換句話說(shuō),也就是前三個(gè) <p> 元素。

38 $("li:gt(1)")

選擇第二個(gè)之后的與 <li> 匹配的全部元素。

39 $("p:gt(2)")

選擇第三個(gè)之后與 <p> 匹配的全部元素。

40 $("div/p")

選擇與 <p> 匹配并且是與 <div> 匹配的元素的孩子的全部元素。

41 $("div//code")

選擇與 <code> 匹配并且是與 <div> 匹配的元素的后代的全部元素。

42 $("http://p//a")

選擇與 <a> 匹配并且是與 <p> 匹配的元素后代的全部元素。

43 $("li:first-child")

選擇與 <li> 匹配并且是它們父親的第一個(gè)孩子的全部元素。

44 $("li:last-child")

選擇與 <li> 匹配并且是它們父親的最后一個(gè)孩子的全部元素。

45 $(":parent")

選擇出是另一個(gè)元素的父親的全部元素,包括文本。

46 $("li:contains(second)")

選擇與 <li> 匹配并且包含文本 second 的全部元素。

你可以用任何 HTML/XML 元素以通用的方式使用上述所有選擇器。例如,如果選擇器 $("li:first")< li> 元素工作,那么 $("p:first") 也會(huì)為 < p> 元素工作。

以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)