選擇器是 jQuery 的根基，在 jQuery 中誉裆，對(duì)事件處理、遍歷 DOM 和 Ajax 操作都依賴于選擇器恍涂。如果能熟練地使用選擇器宝惰，不僅能簡化代碼，而且可以達(dá)到事半功倍的效果再沧。
jQuery選擇器是什么
CSS選擇器
| 選擇器 | 語法 | 描述 | 示例 |
|---|---|---|---|
| 標(biāo)簽選擇器 | E{ CSS 規(guī)則 } | 以文檔元素作為選擇器 | div{ color: #FFF } |
| ID選擇器 | #ID{ CSS規(guī)則 } | 以文檔元素的唯一標(biāo)識(shí)符 ID 作為選擇器 | #box{color: #FFF} |
| 類選擇器 | E.name{ CSS規(guī)則 } | 元素的 class 作為選擇器 | div.name{ color: #FFF } .name{ color: #FFF } |
| 群組選擇器 | E1,E2,E3 { CSS規(guī)則 } | 多個(gè)選擇符應(yīng)用同樣的樣式規(guī)則 | a,p,div{ color: #FFF } |
| 后代選擇器 | E F { CSS規(guī)則 } | 元素 E 的任意后代元素 F | #box a{ color: #FFF } |
| 通配選擇符 | *{ CSS規(guī)則 } | 該文檔的所有元素作為選擇符 | *{ font-size：12px } |
jQuery選擇器
jQuery中的選擇器完全繼承了 CSS 的風(fēng)格尼夺。利用 jQuery 選擇器，可以非常便捷和快速地找出特定的 DOM 元素炒瘸，然后為它們添加相應(yīng)的行為淤堵，而無需擔(dān)心瀏覽器是否支持這一選擇器
jQuery選擇器的優(yōu)勢
- 簡潔的寫法：$("#id")
- 支持CSS 1到CSS 3選擇器 :XPath 選擇器需要查件
-
完善的處理機(jī)制:
- 獲取網(wǎng)頁中不存在的元素也不會(huì)報(bào)錯(cuò)
- 獲取的永遠(yuǎn)是對(duì)象
//判斷元素有無
//根據(jù)長度判斷
if（$("#id").length>0）{
//
}
//轉(zhuǎn)換成 DOM 對(duì)象來判斷
if($("#id")[0]){
//
}
jQuery 選擇器
基本選擇器
| 選擇器 | 描述 | 返回 | 實(shí)例 |
|---|---|---|---|
| #id | 根據(jù)給定 id 匹配一個(gè)元素 | 單個(gè)元素 | $("#test")選取 id 為 test 的元素 |
| .class | 根據(jù)給定類名匹配元素 | 集合元素 | $(".test")選取所有 class 為 test 的元素 |
| element | 根據(jù)給定元素名匹配元素 | 集合元素 | $("p")選取所有 <p> 元素 |
| * | 匹配所有元素 | 集合元素 | $("*")選取所有的元素 |
| selector1,selector2,... selectorN | 將每個(gè)選擇器匹配到的元素合并后一起返回 | 集合元素 | $("div,span,p.myCalss")選取所有的<div>,<span>和擁有 class 為 myClass 的<p>標(biāo)簽的一組元素 |
層次選擇器
| 選擇器 | 描述 | 返回 | 實(shí)例 |
|---|---|---|---|
$("ancestor descendant") |
選取 ancestor 元素里的所有 descendant（后代）元素 | 集合元素 | $("div span")選取 div 里所有 span 的元素 |
$("parent>clild") |
選取 parent 元素下的 child（子）元素 | 集合元素 | $("div>span")選取 div 元素下元素名是 span 的子元素 |
$("prev+next") |
選取緊挨在 prev 元素后的 next 元素 | 集合元素 | $(".one+div")選取 class 為 one 的下一個(gè) div 同輩元素 |
$("prev~sibling") |
選取 prev 元素之后的所有 sibling元素 | 集合元素 | $("#two~div")選取 id 為 tow 的元素后面的所有 div 同輩元素 |
等價(jià)關(guān)系
$("#prev?div")選擇器只能選擇“prev”元素后面的同輩
<div>元素。而 siblings()方法與前后位置無關(guān)顷扩，只要是同輩節(jié)點(diǎn)就都能匹配
| 選擇器 | 方法 | |
|---|---|---|
| 等價(jià) | $(".one +div") |
$(".one").next("div") |
| 等價(jià) | $("#prev～div") |
$("#prev").nextAll("div") |
過濾選擇器
基本過濾選擇器
| 選擇器 | 描 述 | 返回 | 實(shí)例 |
|---|---|---|---|
| :first | 選取第一個(gè)元素 | 單個(gè)元素 | $("div:first")選取 div 元素里第一個(gè) div 元素 |
| :last | 選取最后一個(gè)元素 | 單個(gè)元素 | $("div:last")選取 div 元素里最后一個(gè) div 元素 |
| :not(selector) | 去除所有與給定選擇器匹配的元素 | 集合元素 | $("input:not(.myClass)")選取 class 不是 myClass 的 input 元素 |
| :even | 選取索引是偶數(shù)的所有元素拐邪，索引從 0 開始 | 集合元素 | $("input:even")選取索引是偶數(shù)的 input 元素 |
| :odd | 選取索引是奇數(shù)的所有元素，索引從 0 開始 | 集合元素 | $("input:odd")選取索引是奇數(shù)的 input 元素 |
| :eq(index) | 選取索引等于 index 的元素（index從0開始） | 單個(gè)元素 | $("input:eq(3)")選取索引等于 3 的 input 元素 |
| :gt(index) | 選取索引大于 index 的元素（index從0開始） | 集合元素 | $("input:gt(3)")選取索引大于 3 的 input 元素（大于而不包括） |
| :lt(index) | 選取索引小于 index 的元素（index從0開始） | 集合元素 | $("input:lt(3)")選取索引小于 3 的 input 元素（小于而不包括） |
| :header | 選取所有的標(biāo)題元素h1~h6 | 集合元素 | $(":header")選取網(wǎng)頁中所有的標(biāo)題元素 |
| :animated | 選取當(dāng)前正在執(zhí)行動(dòng)畫的所有元素 | 集合元素 | $("div:animated")選取正在執(zhí)行動(dòng)畫的 div |
| :focus | 選取當(dāng)前獲取焦點(diǎn)的元素 | 集合元素 | $(":focus")選取當(dāng)前獲取焦點(diǎn)的元素 |
內(nèi)容過濾選擇器
過濾規(guī)則主要體現(xiàn)在它所包含的子元素或文本內(nèi)容上
| 選擇器 | 描 述 | 返回 | 實(shí)例 |
|---|---|---|---|
| :contains(text) | 選取含有文本內(nèi)容為“text”的元素 | 集合元素 | $("div:contains("我")")選取含有文本“我”的 div 元素 |
| :empty | 選取不包含子元素或文本內(nèi)容的空元素 | 集合元素 | $("div:empty")選取不包含子元素（包括文本）的 div 元素 |
| :has(selector) | 選取含有選擇器所匹配的元素的元素 | 集合元素 | $("div:has(p)")選取含有 p 標(biāo)簽的 div 元素 |
| :parent | 選取含有子元素或者文本的元素 | 集合元素 | $("div:parent")選取擁有子元素（包括文本）的 div 元素 |
可見性過濾選擇器
根據(jù)元素的可見和不可見狀態(tài)來選擇相應(yīng)的元素
| 選擇器 | 描 述 | 返回 | 實(shí)例 |
|---|---|---|---|
| :hidden | 選取所有不可見的元素 | 集合元素 | $(":hidden")選取所有不可見的元素（包括 display:none;visibility:hidden） |
| :visible | 選取所有可見的元素 | 集合元素 | $("div:visible")選取所有可見的 div |
屬性過濾選擇器
過濾規(guī)則是通過元素的屬性來獲取相應(yīng)的元素
| 選擇器 | 描 述 | 返回 | 實(shí)例 |
|---|---|---|---|
| [attribute] | 選取擁有此屬性的元素 | 集合元素 | $("div[id]")選取擁有屬性 id 的元素 |
| [attribute=value] | 選取屬性值為 value 的元素 | 集合元素 | $("div[title=test]")選取屬性 title 為 test 的 div 元素 |
| [attribute!=value] | 選取屬性值不等于 value 的元素 | 集合元素 | $("div[title!=test]")選取屬性 title 不等于 test 的 div 元素（沒有屬性 title 的 div 也選劝亍） |
| [attribute^=value] | 選取屬性值以 value 開始的元素 | 集合元素 | $("div[title^=test]")選取屬性 title 以 test 開始的 div 元素 |
[attribute$=value] |
選取屬性值以 value 結(jié)束的元素 | 集合元素 |
$("div[title$=test]")選取屬性title 以 test 結(jié)束的 div 元素 |
[attribute*=value] |
選取屬性值包含 value 的元素 | 集合元素 |
$("div[title*=test]")選取屬性 title 含有 test 的 div 元素 |
[attribute l=value] |
選取屬性等于給定字符串或者以該字符串為前綴的元素 | 集合元素 | $("div[title l='en']")選取屬性 title 等于或以 en 為前綴的 div 元素（等于或?yàn)榍熬Y('-')） |
[attribute-=value] |
選取屬性用空格分隔的值中包含一個(gè)給定值得元素 | 集合元素 |
$("div[title-="uk"]")選取屬性 title 用空格分隔的值中包含字符 uk 的元素 |
[attribute1][attribute2][attributeN] |
用屬性選擇器合并成一個(gè)復(fù)合屬性選擇器,滿足多個(gè)條件 | 集合元素 |
$("div[id][title$='test']")選取擁有屬性 id扎阶，并且屬性title以 test 結(jié)束的 div 元素 |
子元素過濾選擇器
過濾規(guī)則相對(duì)于其它的選擇器稍微有些復(fù)雜，不過沒關(guān)系技俐，只要將元素的父元素和子元素區(qū)分清楚乘陪，那么使用起來也非常簡單
| 選擇器 | 描 述 | 返回 | 實(shí)例 |
|---|---|---|---|
| :nth-child(index/even/odd/equation) | 選取每一個(gè)父元素下的第 index 個(gè)子元素或者奇偶元素（index 從 0 開始） | 集合元素 | nth-child(index)從 1 開始匹配所有 eq(index)從 0 開始，只匹配一個(gè)元素 |
| :first-child | 選取每個(gè)父元素的第一個(gè)子元素 | 集合元素 | :first 只返回單個(gè)元素雕擂；:first-child 選擇符將返回每一個(gè)父元素匹配的第一個(gè)子元素 |
| :last-child | 選取每一個(gè)父元素的最后一個(gè)子元素 | 集合元素 | 同上 |
| :only-child | 如果某個(gè)元素是父元素唯一的子元素，就會(huì)被匹配贱勃；還含有其他元素井赌，就不會(huì)匹配 | 集合元素 | $("ul li:only-child" 在 ul 中選取是唯一子元素的 li 元素) |
注意：eq(index)只匹配一個(gè)元素，而 :nth-child 將為每一個(gè)符合條件的父元素匹配子元素贵扰。同時(shí)應(yīng)該注意到 nth-child(index) 的 index 是從 1 開始的仇穗，而 :eq(index) 是從 0 開始的。同理 :first 和 :first-child戚绕，:last 和 :last-child 也類似纹坐。
表單對(duì)象屬性過濾選擇器
| 選擇器 | 描 述 | 返回 | 實(shí)例 |
|---|---|---|---|
| :enabled | 選取所有可用元素 | 集合元素 | $("#form1:enabled")選取 id 為 form1 的表單內(nèi)所有可用元素 |
| :disabled | 選取所有不可用的元素 | 集合元素 | $("#form1:disabled")選取 id 為 form1 的表單內(nèi)所有不可用元素 |
| :checked | 選取所有被選中的元素(單選、復(fù)選) | 集合元素 | $("input:checked")選取所有被選中的 input 元素 |
| :selected | 選取所有被選中的選項(xiàng)元素 | 集合元素 | $("select option:selected") 選取所有被選中的選項(xiàng)元素 |
表單選擇器
| 選擇器 | 描 述 | 返回 | 實(shí)例 |
|---|---|---|---|
| :input | 選取 input舞丛、textarea耘子、select、button 元素 | 集合元素 | $(":input")選取所有的 input球切、textarea谷誓、select、button 元素 |
| :text | 選取所有單行文本框 | 集合元素 | $(":text")選取所有的單行文本框 |
| :password | 選取所有密碼框 | 集合元素 | $(":password")選取所有的密碼框 |
| :radio | 選取所有單選框 | 集合元素 | $(":radio")選取所有的單選框 |
| :checkbox | 選取所有多選框 | 集合元素 | $(":checkbox")選取所有的多選框 |
| :submit | 選取所有提交按鈕 | 集合元素 | $(":submit")選取所有的提交按鈕 |
| :image | 選取所有圖像按鈕 | 集合元素 | $(":image")選取所有的圖像按鈕 |
| :reset | 選取所有重置按鈕 | 集合元素 | $(":reset")選取所有的重置按鈕 |
| :button | 選取所有的按鈕 | 集合元素 | $(":button")選取所有的按鈕 |
| :file | 選取所有的上傳域 | 集合元素 | $(":file")選取所有的上傳域 |
| :hidden | 選取所有不可見得元素 | 集合元素 | $(":hidden")選取所有的不可見得元素 |
注意
$(":input")和$("input")的區(qū)別
選擇器中的注意事項(xiàng)
選擇器中含有特殊符號(hào)的注意事項(xiàng)
- 選擇器中含有"．"吨凑、"#"捍歪、"("或"]"等特殊字符
//W3C的規(guī)定户辱，屬性值中是不能含有這些特殊字符的
<div id="id#d">aa</div>
<div id="id[1]">bb</div>
//正確獲取方式 轉(zhuǎn)義特殊字符
$("#\\#b");
$("#id\\[1\\]");
- 屬性選擇器的@符號(hào)問題
//1.1.0 版本遺留問題
$("div[@title='test']")
//1.3.1 版本
$("div[title='test']")
選擇器中含有空格的注意事項(xiàng)
選擇器中的空格也是不容忽視的，多一個(gè)空格或少一個(gè)空格也許會(huì)得到截然不同的結(jié)果
//結(jié)果會(huì)截然不同
$(".test :hidden")
$(".test:hidden")
其他選擇器
jQuery提供的選擇器的擴(kuò)展
-
MoreSelectors for jQuery
- .color可以匹配顏色糙臼，
- :colIndex可以匹配表格中的列
- :focus可以匹配獲取焦點(diǎn)的元素
-
Basic XPath
- 支持XPath選擇器
- 降低選擇器匹配的效率
其他使用CSS選擇器的方法
- document.getElementsBySelector()
- cssQuery()
- querySelectorAll()
