極客書

jQuery 選擇器

jQuery庫利用層疊樣式表（CSS）選擇器的強大功能，讓我們能夠快速輕鬆地訪問文檔對象模型（DOM）中的元素或元素組。

jQuery選擇器是一個函數，它使用表達式根據給定的條件從DOM中查找匹配的元素。簡單地說，選擇器用於使用jQuery選擇一個或多個HTML元素。一旦選擇了一個元素，我們就可以對該元素執行各種操作。

The $() factory function

jQuery選擇器以美元符號和圓括號開頭。factory函數在選擇給定文檔中的元素時使用了以下三個構造塊−

Sr.No. Selector & Description
1

標記名

表示DOM中可用的標記名。例如，$（'p'）選擇文檔中的所有段落<p>。
2

標籤ID

表示在DOM中具有給定ID的可用標記。例如，$（'#some id'）選擇文檔中id爲some-id的單個元素。
3

標記類

表示DOM中給定類可用的標記。例如，$（'.some class'）選擇文檔中具有某個類的類的所有元素。

所有上述項目可以單獨使用，也可以與其他選擇器結合使用。除了一些調整之外，所有jQuery選擇器都基於相同的原則。

注意：factory函數是jQuery（）函數的同義詞。因此，如果您正在使用任何其他JavaScript庫，其中$符號與其他內容衝突，那麼您可以用jQuery名稱替換$符號，並且可以使用函數jQuery（）而不是$（）。

Example

下面是一個使用標記選擇器的簡單示例。這將選擇標記名爲p的所有元素。

Live Demo 
<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/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>

這將產生以下結果&負;

How to Use Selectors?

選擇器非常有用，在使用jQuery的每一步都需要它。它們從HTML文檔中獲取所需的元素。

下表列出了幾個基本的選擇器，並舉例說明。

Sr.No. Selector & Description
1 Name

選擇與給定元素名匹配的所有元素。
2 #ID

選擇與給定的ID匹配的單個元素。
3 .Class

選擇與給定類匹配的所有元素。
4 Universal (*)

選擇DOM中可用的所有元素。
5 Multiple Elements E, F, G

選擇所有指定選擇器E、F或G的組合結果。

Selectors Examples

與上面的語法和示例類似，下面的示例將幫助您理解如何使用不同類型的其他有用選擇器−

Sr.No. Selector & Description
1

$（「*」）

此選擇器選擇文檔中的所有元素。
2

$（「p>*」）

此選擇器選擇段落元素的所有子元素。
3

$（「'35;特價」）

此選擇器函數獲取id=「specialID」的元素。
4

$（「.specialClass」）

此選擇器獲取類爲specialClass的所有元素。
5

$（「li:not（.myclass）」）

選擇與不具有class=「myclass」的<li>匹配的所有元素。
6

$（「特殊類」

此選擇器匹配id爲specialID和一類specialClass的連結。
7

$（「p a.特殊類別」）

此選擇器與在<p>元素中聲明的特殊類的類相匹配。
8

$（「ul li:first」）

此選擇器僅獲取<ul>元素的第一個<li>元素;。
9

$（「容器p」）

選擇與<p>匹配的所有元素，這些元素是id爲container的元素的後代。
10

$（「li>ul」）

選擇與<ul>匹配的所有元素，這些元素是與<li>匹配的元素的子元素;
11

$（「強+em」）

選擇與<em>匹配的所有元素，這些元素緊跟與<strong>匹配的同級元素;。
12

$（「p~ul」）

選擇與<ul>匹配的所有元素，這些元素跟隨與<p>匹配的同級元素;。
13

$（「代碼，em，強」）

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

$（「p強，.myclass」）

選擇與<strong>匹配的所有元素，這些元素是與<p>匹配的元素的後代，以及具有myclass類的所有元素。
15

$（「：空」）

選擇所有沒有子元素的元素。
16

$（「p:空」）

選擇與沒有子級的<p>匹配的所有元素。
17

$（「div[p]」）

選擇與<div>匹配的所有元素，這些元素包含與<p>匹配的元素;。
18

$（「p[.myclass]）

選擇與<p>匹配的所有元素，這些元素包含類爲myclass的元素。
19

$（「[@rel]」）

選擇與具有rel屬性的<a>匹配的所有元素。
20

$（「輸入[@name=myname]」）

選擇與「輸入」匹配的所有元素，這些元素的名稱值正好等於「我的名稱」。
21

$（「輸入[@name^=myname]」）

選擇與輸入匹配的所有元素，這些元素的名稱值以myname開頭。
22

$（[@rel$=self]）

選擇與<a>匹配的具有以self結尾的rel屬性值的所有元素。
23

$（「a[@ref*=domain.com]）」

選擇與具有包含domain.com的ref值的<a>匹配的所有元素。
24

$（「li:even」）

選擇與具有偶數索引值的<li>匹配的所有元素。
25

$（「tr:odd」）

選擇與具有奇數索引值的<tr>匹配的所有元素。
26

$（「li:first」）

選擇第一個元素。
27

$（「li:最後一個」）

選擇最後一個元素。
28

$（「li：可見」）

選擇與可見的<li>匹配的所有元素。
29

$（「li：隱藏的」）

選擇與隱藏的<li>匹配的所有元素。
30

$（「：收音機」）

選擇窗體中的所有單選按鈕。
31

$（「：選中」）

選中表單中的所有複選框。
32

$（「：輸入」）

僅選擇表單元素（輸入、選擇、文本區域、按鈕）。
33

$（「：文本」）

僅選擇文本元素（輸入[類型=文本]）。
34

$（「li:eq（2）」）

選擇第三個元素。
35

$（「li:eq（4）」）

選擇第五個元素。
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

$（「//p//a」）

選擇與<a>匹配的所有元素，這些元素是與<p>匹配的元素的後代;
43

$（「li:第一個孩子」）

選擇與父元素的第一個子元素<li>匹配的所有元素。
44

$（「li：最後一個孩子」）

選擇與父元素最後一個子元素<li>匹配的所有元素。
45

$（「：父項」）

選擇其他元素（包括文本）的父元素。
46

$（「li:contains（second）」）

選擇與第二個文本匹配的所有元素<li>。

You can use all the above selectors with any HTML/XML element in generic way. For example if selector $（「li:first」） works for <li> element then $("p:first") would also work for <p> element.