溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
jquery選擇器與css選擇器的風格類似，但是jquery涉及到的功能更為強大，利用jquery選擇器，可以很快的找出特定的DOM元素，并且對其進行操作，無需擔心瀏覽器是否支持這一選擇器。
根據選擇器行為特點劃分，jquery選擇器主要有以下幾種分類：
（1）基本選擇器
（2）層次選擇器
（3）過濾選擇器
（4）表單選擇器
1.基本選擇器
特點：最常用、最簡單。
| 選擇器 | 描述 | 返回 | 示例 |
| ＃id（id選擇器） | 根據給定的id匹配一個元素 | 單個元素 | $("#test")選擇id為test的元素 |
| .class（類選擇器） | 根據給定的class名稱匹配多個元素 | 集合元素 | $(".test")選擇類名為test的所有元素 |
| element（元素選擇器） | 根據給定的元素名匹配多個元素 | 集合元素 | $("div")選擇所有<div>元素 |
| ＊（全部選擇器） | 匹配所有元素 | 集合元素 | $("*")選擇所有元素 |
| sele1,sele2,seleN有效選擇器 | 將每一個選擇器匹配到的元素合并后一起返回 | 集合元素 | $("div,p.test")選擇所有的<div>和擁有class為test的<p>元素合并的集合 |
注：在網頁中，每個id名稱只能使用一次，class名稱可重復使用。
2.層次選擇器
特點：利用DOM元素間的層次關系。
| 選擇器 | 描述 | 返回 | 示例 |
| $("a b") 后代選擇器 | 選擇a元素中所有的b（后代）元素 | 集合元素 | $("div span")選擇<div>后代元素中的所有的<span>元素 |
| $("parent>child") 子選擇器 | 選擇parent元素下的child（子）元素。 | 集合元素 | $("div>span")選擇<div>下的所有<span>子元素 |
| $("prev+next")相鄰同輩元素選擇器 | 選擇緊接在prev元素后的next元素 | 單個元素 | $(".test+p")選擇緊接在class為test的元素后的第一個<p>同輩元素 |
| $("prev~siblings")一般同輩元素選擇器 | 選擇器prev元素后的所有同輩元素 | 集合元素 | $("#test~div")選擇id為test的元素后面的所有<div>同輩元素 |
注：
（1）子選擇器與后代選擇器的區別：后代選擇器包括孫元素。
<body>
<div>
<p>
<span></span>
</p>
<span></span>
<span></span>
</div>
</body>如代碼所示，當我們使用$("div span")后代元素選擇器時，可以匹配到<div>中后代為<span>的元素，所以匹配結果為3個；當我們使用$("div>span")子元素選擇器時，可以匹配到<div>中子元素為<span>的元素，所以匹配結果為2個（因為p標簽中的span元素不是div的子元素）。
（2）可以用next()方法代替$("prev+next")選擇器；用nextAll()方法代替$("prev~siblings")選擇器。同時，有一個方法可選擇所有的同輩節點元素，即siblings()方法。
3.過濾選擇器
特點：通過過濾規則選擇所需的DOM元素。按照不同的過濾規則，過濾選擇器可分為：基本過濾、內容過濾、可見性過濾、屬性過濾、子元素過濾、表單對象屬性過濾。
基本過濾選擇器
| 選擇器 | 描述 | 返回 | 示例 |
| :first | 選擇第一個元素 | 單個元素 | $("div:first")選擇所有<div>元素中第1個<div>元素 |
| :last | 選擇最后一個元素 | 單個元素 | 同上反推 |
| :not(selector) | 去除所有與給定選擇器匹配的元素 | 集合元素 | $("div:not(.test)")選擇class不是test的div元素 |
| :even | 從一個元素集合中選擇索引是偶數的所有元素 | 集合元素 | $("div:even")選擇索引是偶數的div元素 |
| :odd | 從一個元素集合中選擇索引是奇數的所有元素 | 集合元素 | 同上原理 |
| :eq(index) | 從一個元素集合中選擇索引等于index的元素 | 單個元素 | $("div:eq(1)")選擇索引等于1的<div>元素 |
| :gt(index) | 從一個元素集合中選擇索引大于index的元素 | 集合元素 | $("div:gt(1)")選擇索引大于1的<div>元素 |
| :lt(index) | 從一個元素集合中選擇索引小于index的元素 | 集合元素 | 同上反推 |
| :header | 選擇所有的標題元素 | 集合元素 | $(":header")選擇網頁中所有的<h2>,<h3>...元素 |
| :animated | 選擇當前正在執行動畫的所有元素 | 集合元素 | $("div:animated")選擇正在執行動畫的<div>元素 |
| :focus | 選擇當前獲取焦點的元素 | 集合元素 | $("focus")選擇當前獲取焦點的元素 |
內容過濾選擇器
| 選擇器 | 描述 | 返回 | 示例 |
| :contains(text) | 選取含有文本內容為"text"的元素 | 集合元素 | $("div:contains('test')")選擇含有文本test的<div>元素 |
| :empty | 選取不包含子元素或者文本的元素（即空元素） | 集合元素 | $("div:empty")選取不包含子元素的<div>元素 |
| :has(selector) | 選取含有選擇器所匹配的元素的元素 | 集合元素 | $("div:has(p)")選取含有<p>元素的<div>元素 |
| :parent | 選擇擁有子元素（包括文本）的元素 | 集合元素 | $("div:parent")選擇含有子元素的<div>元素 |
內容過濾選擇器的過濾規則主要以標簽所包含的子元素來進行篩選過濾，其中子元素也包括了文本信息。
可見性過濾選擇器
| 選擇器 | 描述 | 返回 | 示例 |
| :hidden | 選擇所有不可見的元素 | 集合元素 | $(":hidden") |
| :visible | 選擇所有可見的元素 | 集合元素 | $("visible") |
隱藏元素包括：<input type="hidden"/>、<div >、<div >，如果需要確定元素類型，在前方加上元素名即可。例如，$("input:hidden")。
屬性過濾選擇器
| 選擇器 | 描述 | 返回 | 示例 |
| [attribute] | 選擇擁有此屬性的元素 | 集合元素 | $("div[id]")選擇擁有屬性id的元素 |
| [attribute=value] | 選擇屬性的值為value的元素 | 集合元素 | $("div[class=test]")選擇屬性class為“test”的<div>元素 |
| [attribute!=value] | 選擇屬性的值不等于value的元素 | 集合元素 | 同上反推 |
| [attribute^=value] | 選擇屬性的值以value開始的元素 | 集合元素 | $("div[class=te]")將選擇到例如class為"test"的<div>元素 |
| [attribute$=value] | 選擇屬性的值以value結束的元素 | 集合元素 | 同上反推 |
| [attribute*=value] | 選擇屬性的值含有value的元素 | 集合元素 | $("div[class=es]")將選擇到例如class為"test"的<div>元素 |
| [attribute|=value] | 選擇屬性等于給定字符串或以該字符串為前綴 | 集合元素 | $("div[class|='te']")選擇屬性title等于te或者以te為前綴的元素 |
| [attribute~=value] | 選擇屬性用空格分隔的值中包含一個給定值的元素 | 集合元素 | $("div[class~='te']")將選擇到例如class為"te abc"的<div>元素 |
| [attribute1]...[attributeN] | 多個屬性選擇器合并成一個復合屬性選擇器 | 集合元素 | $("div[id][title$='test']")選擇同時擁有id，并且title以test結束的<div>元素 |
屬性過濾選擇器主要是通過元素的屬性來獲取相應的元素。
子元素過濾選擇器
| 選擇器 | 描述 | 返回 | 示例 |
| :nth-child(index/odd/even/equation) | 選擇每個父元素下的第index個子元素或者奇偶元素(index)從1開始計算 | 集合元素 | $("div.test :nth-child(2)")選擇class為"test"的<div>父元素下的第二個子元素 |
| :first-child | 選擇每個父元素的第一個子元素 | 集合元素 | $("ul:first-child")將選擇每個<ul>元素中第一個<li>元素 |
| :last-child | 選擇每個父元素的最后一個子元素 | 集合元素 | 同上反推 |
| :only-child | 如果某個元素是它父元素中唯一的子元素，那將會被匹配 | 集合元素 | $("ul li:only-child")在<ul>中選擇唯一子元素<li> |
需要注意的是，“每個父元素”與“父元素”的區別，前者是多個元素的集合，后者是單個元素。:nth-child(3n)可以選擇到每個父元素下索引值是3的倍數的元素。
表單對象屬性過濾選擇器
| 選擇器 | 描述 | 返回 | 示例 |
| :enabled | 選擇所有可用元素 | 集合元素 | $("#form :enabled")選擇id為form的表單內的所有可用元素 |
| :disabled | 選擇所有不可用元素 | 集合元素 | 同上反推 |
| :checked | 選擇所有被選中的元素 | 集合元素 | $("input:checked")選擇所有被選中的<input>元素 |
| :selected | 選擇所有被選中的選項元素 | 集合元素 | $("select option:selected") |
表單對象屬性過濾選擇器主要是針對表單元素進行過濾。
4.表單選擇器
| 選擇器 | 描述 | 返回 | 示例 |
| :input | 選擇所有的<input>、<textarea>、<select>、<button>元素 | 集合元素 | $(":input") |
| :text | 選擇所有的單行文本框 | 集合元素 | $(":text") |
| :password | 選擇所有的密碼框 | 集合元素 | $(":password") |
| :radio | 選擇所有的單選框 | 集合元素 | $(":radio") |
| :checkbox | 選擇所有的復選框 | 集合元素 | $(":checkbox") |
| :submit | 選擇所有的提交按鈕 | 集合元素 | $(":submit") |
| :p_w_picpath | 選擇所有的圖像按鈕 | 集合元素 | $(":p_w_picpath") |
| :reset | 選擇所有的重置按鈕 | 集合元素 | $("reset") |
| :button | 選擇所有按鈕 | 集合元素 | $("button") |
| :file | 選擇所有的上傳域 | 集合元素 | $("file") |
表單選擇器能使我們能夠方便的獲取到表單的某個或某類型的元素。
本文參考：
《鋒利的jQuery（第2版）》，人民郵電出版社，單東林 張曉菲 魏然
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
