W3Cschool
恭喜您成為首批注冊用戶
獲得88經(jīng)驗值獎勵
jQuery 庫利用級聯(lián)樣式表(CSS)選擇器讓我們快速而方便地訪問文檔對象模型(DOM)中的元素或元素組。
jQuery 選擇器是一個函數(shù),基于給定的標準,利用表達式從 DOM 中找出匹配的元素。簡單來說,選擇器是使用 jQuery 來選擇一個或多個 HTML 元素。當一個元素被選中,然后我們對所選元素可以執(zhí)行各種操作。
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, F 或 G 的所有組合結(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> 匹配的元素的后代,同樣所有的元素都要有 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>
元素工作。
Copyright©2021 w3cschool編程獅|閩ICP備15016281號-3|閩公網(wǎng)安備35020302033924號
違法和不良信息舉報電話:173-0602-2364|舉報郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號
聯(lián)系方式:
更多建議: