jQuery選擇器允許您選擇和操作HTML元素。
本節(jié)包含屬于最新jQuery JavaScript庫的選擇器的完整列表。
所有選擇器都分為幾類。
| 選擇器 | 例 | 說明 |
|---|---|---|
| * | $("*") | 選擇所有元素（通用選擇器） |
| #id | $("#demo") | 選擇一個具有id="demo"的元素 |
| .class | $(".demo") | 選擇所有具有class="demo"的元素 |
| element | $("p") | 選擇所有<p>元素 |
| selector1, selector2 | $("p, div") | 選擇所有<p>元素和所有<div>元素 |
| 選擇器 | 例 | 說明 |
|---|---|---|
| ancestor descendant | $("div p") | 選擇<div>元素內(nèi)的所有<p>元素 |
| parent > child | $("div > p") | 選擇所有<p>元素，其中父元素是<div>元素 |
| prev + next | $("div + p") | 選擇緊接在<div>元素之后的所有<p>元素 |
| prev ~ siblings | $("div ~ p") | 選擇作為<div>元素同級的所有<p>元素 |
| 選擇器 | 例 | 說明 |
|---|---|---|
| [attribute] | $("[target]") | 選擇具有target屬性的所有元素 |
| [attribute=value] | $("a[href='CSS3']") | 選擇所有href屬性值等于“ CSS3”的<a>元素 |
| [attribute!=value] | $("a[href!='CSS3']") | 選擇所有href屬性值不等于“ CSS3”的<a>元素 |
| [attribute~=value] | $("[alt~=Parrot]") | 選擇所有具有alt屬性且包含單詞“ Parrot”的元素 |
| [attribute|=value] | $("[lang|=en]") | 選擇所有以“ en”開頭的lang屬性值的元素 |
| [attribute^=value] | $("a[href^=https]") | 選擇每個<a>元素其href屬性值以“ https”開頭 |
| [attribute$=value] | $("a[href$='.org']") | 選擇每個<a>元素其href屬性值以“ .org”結(jié)尾 |
| [attribute*=value] | $("a[href*=example]") | 選擇每個<a>元素其href屬性值包含子字符串“ example” |
| 選擇器 | 例 | 說明 |
|---|---|---|
| :first | $("p:first") | 選擇第一個<p>元素 |
| :last | $("p:last") | 選擇最后一個<p>元素 |
| :even | $("tr:even") | 選擇所有偶數(shù)<tr>元素，零索引 |
| :odd | $("tr:odd") | 選擇所有零索引的奇數(shù)<tr>元素 |
| :not() | $("p:not(.demo)") | 選擇除具有class="demo"的元素以外的所有<p>元素 |
| :eq() | $("tr:eq(2)") | 在匹配的集合中從零開始的索引中選擇第三個<tr>元素 |
| :lt() | $("tr:lt(5)") | 選擇所有索引號小于5的<tr>元素，從零開始的索引 |
| :gt() | $("tr:gt(5)") | 選擇所有索引號大于5的<tr>元素，從零開始的索引 |
| :header | $(":header") | 選擇所有標(biāo)頭元素，例如<h1>，<h2>，<h3>等 |
| :lang() | $("div:lang(en)") | 選擇所有具有語言值“ en”的<div>元素，即lang="en"，lang="en-us"等 |
| :root | $(":root") | 選擇文檔的根元素，該元素始終是HTML文檔中的<html>元素 |
| :animated | $(":animated") | 選擇器在運(yùn)行選擇器時選擇所有動畫元素 |
| 選擇器 | 例 | 說明 |
|---|---|---|
| :first-child | $("p:first-child") | 選擇屬于其父級的第一個子級的所有<p>元素 |
| :last-child | $("p:last-child") | 選擇屬于其父級的最后一個子級的所有<p>元素 |
| :only-child | $("p:only-child") | 選擇屬于其父級唯一子級的所有<p>元素 |
| :first-of-type | $("p:first-of-type") | 選擇屬于其父級的第一個<p>元素的所有<p>元素 |
| :last-of-type | $("p:last-of-type") | 選擇屬于其父級的最后一個<p>元素的所有<p>元素 |
| :only-of-type | $("p:only-of-type") | 選擇所有沒有同級且具有相同元素名稱的<p>元素 |
| :nth-child(n) | $("p:nth-child(3)") | 選擇屬于其父級的第三個子級的所有<p>元素 |
| :nth-last-child(n) | $("p:nth-last-child(4)") | 選擇從上一個元素到第一個元素的所有<p>元素，它們是其父元素的第四個子元素 |
| :nth-of-type(n) | $("span:nth-of-type(3)") | 選擇屬于其父級的第三個<span>元素的所有<span>元素 |
| :nth-last-of-type(n) | $("span:nth-last-of-type(4)") | 選擇屬于其父元素的第4個<span>元素的所有<span>元素，從最后一個元素到第一個元素進(jìn)行計數(shù) |
| 選擇器 | 例 | 說明 |
|---|---|---|
| :contains() | $("p:contains('is')") | 選擇所有包含文本“ is”的<p>元素 |
| :empty | $(":empty") | 選擇所有空元素，即沒有子元素（包括文本）的元素 |
| :has() | $("p:has(span)") | 選擇所有包含至少一個<span>元素的<p>元素 |
| :parent | $(":parent") | 選擇具有至少一個子節(jié)點(diǎn)的所有元素（元素或文本） |
| 選擇器 | 例 | 說明 |
|---|---|---|
| :input | $(":input") | 選擇所有輸入，文本區(qū)域，選擇和按鈕元素 |
| :text | $(":text") | 選擇所有類型為type="text"的輸入元素 |
| :password | $(":password") | 選擇所有類型為type="password"的輸入元素 |
| :radio | $(":radio") | 選擇所有類型為“ radio”的輸入元素 |
| :checkbox | $(":checkbox") | 選擇類型為“checkbox”的所有輸入元素 |
| :button | $(":button") | 選擇類型為“ button”的所有輸入和按鈕元素 |
| :submit | $(":submit") | 選擇所有類型為“ submit”的輸入和按鈕元素 |
| :reset | $(":reset") | 選擇所有類型為“ reset”的輸入和按鈕元素 |
| :image | $(":image") | 選擇類型為“ image”的所有輸入元素 |
| :file | $(":file") | 選擇所有類型為type="file"的輸入元素 |
| :enabled | $(":enabled") | 選擇所有啟用的元素 |
| :disabled | $(":disabled") | 選擇所有禁用的元素 |
| :selected | $(":selected") | 選擇所有選定的元素，僅適用于<option>元素 |
| :checked | $(":checked") | 選擇所有選中或選中的元素，適用于復(fù)選框，單選按鈕和選擇元素 |
| :focus | $(":focus") | 選擇當(dāng)前處于焦點(diǎn)狀態(tài)的元素 |
| 選擇器 | 例 | 說明 |
|---|---|---|
| :hidden | $("p:hidden") | 選擇所有隱藏的<p>元素 |
| :visible | $("p:visible") | 選擇所有可見的<p>元素 |