免費(fèi)AI編程助手
選擇器
jQuery - 選擇器
jQuery 庫利用級聯(lián)樣式表(CSS)選擇器讓我們快速而方便地訪問文檔對象模型(DOM)中的元素或元素組。
jQuery 選擇器是一個函數(shù)，基于給定的標(biāo)準(zhǔn)，利用表達(dá)式從 DOM 中找出匹配的元素。簡單來說，選擇器是使用 jQuery 來選擇一個或多個 HTML 元素。當(dāng)一個元素被選中，然后我們對所選元素可以執(zhí)行各種操作。
$() 工廠函數(shù)
jQuery 選擇器以 dollar 符號和括號開始 —— $()。工廠函數(shù) $() 使用了以下三個部分來從給定的文檔中選取元素 ——
| 序號 | 選擇器 & 描述 |
|---|---|
| 1 |
標(biāo)簽名
代表在 DOM 中可用的標(biāo)簽名。例如 $('p') 選擇文檔中所有的段落 <p>。 |
| 2 |
標(biāo)簽 ID
代表在 DOM 中帶有給定 ID 的一個可用的標(biāo)簽。例如 $('#some-id') 選擇文檔中帶有 ID 為 some-id 的單個元素。 |
| 3 |
標(biāo)簽類
代表在 DOM 中帶有指定類的可用的標(biāo)簽。例如 $('.some-class') 選擇文檔中帶有 some-class 類的所有元素。 |
上述所有項(xiàng)目可以單個使用或結(jié)合其他的選擇器使用。所有 jQuery 選擇器除了一些調(diào)整外，都是基于同樣的原則。
注意 —— 工廠函數(shù) $() 是 jQuery() 函數(shù)的同義詞。所以如果你使用的是任何其他 JavaScript 庫，其中 $ 符號和一些其他的事情有沖突的話，你可以用 jQuery 名稱來取代 $ 符號，并且你也可以使用 jQuery() 函數(shù)來替代 $() 函數(shù)。
示例
下面是使用標(biāo)簽選擇器的一個簡單的例子。它會選取帶有標(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 的每一步都需要使用選擇器。它們會從 HTML 文檔中獲得你想要的正確的元素。
下表列出了一些基本的選擇器并用示例進(jìn)行了解釋。
| 序號 | 選擇器 & 描述 |
|---|---|
| 1 |
名稱
選擇出與給定的元素 Name 匹配的所有元素。 |
| 2 |
#ID
選擇出與給定的 ID 相匹配的單個元素。 |
| 3 |
.Class
選擇出與給定的 Class 匹配的全部元素。 |
| 4 |
Universal (*)
選擇出在 DOM 中全部可用的元素。 |
| 5 |
多個元素 E, F, G
選擇出所有指定的選擇器 E, F 或 G 的所有組合結(jié)果。 |
選擇器示例
與上述語法和實(shí)例類似，下面的例子會使你對使用其他類型的選擇器有一個大致的了解 ——
| 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")
選擇出表單中全部的復(fù)選框。 |
| 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> 元素工作。
更多建議：