選擇器

2018-08-12 21:27 更新

jQuery - 選擇器

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

jQuery 選擇器是一個函數(shù),基于給定的標準,利用表達式從 DOM 中找出匹配的元素。簡單來說,選擇器是使用 jQuery 來選擇一個或多個 HTML 元素。當一個元素被選中,然后我們對所選元素可以執(zhí)行各種操作。

$() 工廠函數(shù)

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

序號 選擇器 & 描述
1 標簽名

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

2 標簽 ID

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

3 標簽類

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

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

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

示例

下面是使用標簽選擇器的一個簡單的例子。它會選取帶有標簽名稱 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 的每一步都需要使用選擇器。它們會從 HTML 文檔中獲得你想要的正確的元素。

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

序號 選擇器 & 描述
1 名稱

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

2 #ID

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

3 .Class

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

4 Universal (*)

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

5 多個元素 E, F, G

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

選擇器示例

與上述語法和實例類似,下面的例子會使你對使用其他類型的選擇器有一個大致的了解 ——

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> 的第一個 <li> 元素。

9 $("#container p")

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

10 $("li > ul")

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

11 $("strong + em")

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

12 $("p ~ ul")

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

13 $("code, em, strong")

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

14 $("p strong, .myclass")

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

15 $(":empty")

選擇出所有沒有孩子的元素。

16 $("p:empty")

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

17 $("div[p]")

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

18 $("p[.myclass]")

選擇出與 <p> 匹配并且包含一個帶有 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ī)в幸粋€包含 domain.com 的超鏈接值的元素。

24 $("li:even")

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

25 $("tr:odd")

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

26 $("li:first")

選擇出第一個 <li> 元素。

27 $("li:last")

選擇出最后一個 <li> 元素。

28 $("li:visible")

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

29 $("li:hidden")

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

30 $(":radio")

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

31 $(":checked")

選擇出表單中全部的復選框。

32 $(":input")

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

33 $(":text")

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

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

選擇第三個 <li> 元素。

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

選擇第五個 <li> 元素。

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

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

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

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

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

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

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

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

40 $("div/p")

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

41 $("div//code")

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

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

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

43 $("li:first-child")

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

44 $("li:last-child")

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

45 $(":parent")

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

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

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

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

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

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號