選擇器
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, F 或 G 的所有組合結(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> 匹配的元素的后代，同樣所有的元素都要有 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> 元素工作。
更多建議：