這篇文章來(lái)介紹下jQuery的選擇器。
選擇器是jQuery的根基，在jQuery中，對(duì)事件處理、遍歷DOM和Ajax操作都依賴于選擇器。因此，如果能熟練的使用選擇器，不僅能簡(jiǎn)化代碼，而且可以達(dá)到事半功倍的效果。jQuery選擇器完全繼承了CSS的風(fēng)格。利用jQuery選擇器，可以非常便捷的找出特定的DOM元素，然后為它們添加相應(yīng)的行為，而無(wú)需擔(dān)心瀏覽器是否支持這一選擇器。
jQuery選擇器可簡(jiǎn)單分為基本選擇器、層次選擇器、過(guò)濾選擇器、表單選擇器。下面通過(guò)表格進(jìn)行一一介紹。
1.基本選擇器
| 選擇器 | 描 述 | 返 回 | 示 例 |
|---|---|---|---|
| #id | 匹配給定的id | 單個(gè)元素 | $(“header”) |
| .class | 匹配給定的類名 | 集合元素 | $(“.test”) |
| E | 匹配給定的標(biāo)簽名 | 集合元素 | $(“div”) |
| * | 匹配所有元素 | 集合元素 | $(“*’) |
| E, .class, E… | 匹配給定的集合 | 集合元素 | $(“span, .tips”) |
2.層次選擇器
| 選擇器 | 描 述 | 返 回 | 示 例 |
|---|---|---|---|
| $(“ancestor descendant”) | 匹配ancestor里的所有 descendant(后代)元素 | 集合元素 | $(“body div”) |
| $(“parent>child”) | 匹配parent下的所有 child(子)元素 | 集合元素 | $(“div>span”) |
| $(“prev+next”) | 匹配緊接在prev后的 next元素 | 集合元素 | $(“.error+span”) |
| $(“prev~siblings”) | 匹配prev后的所有 siblings元素 | 集合元素 | $(“span~a”) |
3.過(guò)濾選擇器
3.1 基本過(guò)濾選擇器
| 選擇器 | 描 述 | 返 回 | 示 例 |
|---|---|---|---|
| :first | 匹配第一個(gè)元素 | 單個(gè)元素 | $(“div:first”) |
| :last | 匹配最后一個(gè)元素 | 單個(gè)元素 | $(“span:last”) |
| :even | 匹配索引是偶數(shù)的元素 索引從0開始 | 集合元素 | $(“l(fā)i:even”) |
| : odd | 匹配索引是奇數(shù)的元素 索引從0開始 | 集合元素 | $(“l(fā)i:odd”) |
| :eq(index) | 匹配索引等于index的元 素(索引從0開始) | 單個(gè)元素 | $(“input:eq(2)”) |
| :gt(index) | 匹配索引大于index的元 素(索引從0開始) | 集合元素 | $(“input:gt(1)”) |
| :lt(index) | 匹配索引小于index的元 素(索引從0開始) | 集合元素 | $(“input:lt(5)”) |
| :header | 匹配所有h1,h2…等 標(biāo)題元素 | 集合元素 | $(“:header”) |
| :animated | 匹配所有正在執(zhí)行 動(dòng)畫的元素 | 集合元素 | $(“div:animated”) |
3.2 內(nèi)容過(guò)濾選擇器
| 選擇器 | 描 述 | 返 回 | 示 例 |
|---|---|---|---|
| :contains(text) | 匹配含有文本內(nèi)容text 的元素 | 集合元素 | $(“p:contains(今天)”) |
| :empty | 匹配不含子元素或 文本元素的空元素 | 集合元素 | $(“p:empty”) |
| :has(selector) | 匹配包含selector元素 的元素 | 集合元素 | $(“div:has(span)”) |
| :parent | 匹配含有子元素或文本 的元素 | 集合元素 | $(“div:parent”) |
3.3 可見性過(guò)濾選擇器
| 選擇器 | 描 述 | 返 回 | 示 例 |
|---|---|---|---|
| :hidden | 匹配所有不可見 的元素 | 集合元素 | $(“:hidden”) |
| :visible | 匹配所有可見元素 | 集合元素 | $(“:visible”) |
3.4 屬性過(guò)濾選擇器
| 選擇器 | 描 述 | 返 回 | 示 例 |
|---|---|---|---|
| [attr] | 匹配擁有此屬性 的元素 | 集合元素 | $(“img[alt]“) |
| [attr=value] | 匹配屬性值為value 的元素 | 集合元素 | $(“a[title=test]“) |
| [attr!=value] | 匹配屬性值不等于 value的元素 | 集合元素 | $(“a[title!=test]“) |
| [attr^=value] | 匹配屬性值以value 開頭的元素 | 集合元素 | $(“img[alt^=welcome]“) |
| [attr$=value] | 匹配屬性值以value 結(jié)尾的元素 | 集合元素 | $(“img[alt$=last]“) |
| [attr*=vlaue] | 匹配屬性值中含有 value的元素 | 集合元素 | $(“div[title*=test]“) |
| [attr1][attr2]… | 通過(guò)多個(gè)屬性 進(jìn)行匹配 | 集合元素 | $(“div[id][title*=test]“) |
3.5 子元素過(guò)濾選擇器
| 選擇器 | 描 述 | 返 回 | 示 例 |
|---|---|---|---|
| :nth-child | 匹配每個(gè)父元素下的 第index個(gè)子元素 索引從1開始 | 集合元素 | $(“div:nth-child(2)”) |
| :first-child | 匹配每個(gè)父元素的 第一個(gè)子元素 | 集合元素 | $(“div:first-child”) |
| :last-child | 匹配每個(gè)父元素的 最后一個(gè)子元素 | 集合元素 | $(“div:last-child”) |
| : only-child | 某元素是它父元素中 的唯一的子元素 則匹配它 | 集合元素 | $(“div:only-child”) |
3.6 表單對(duì)象屬性過(guò)濾選擇器
| 選擇器 | 描 述 | 返 回 | 示 例 |
|---|---|---|---|
| :enabled | 匹配所有可用元素 | 集合元素 | $(“form :enabled”) |
| :disabled | 匹配所有不可用 的元素 | 集合元素 | $(“form :disabled”) |
| :checked | 匹配所有被選中的元素 (含單選框，復(fù)選框) | 集合元素 | $(“input:checked”) |
| :selected | 匹配所有被選中的 選項(xiàng)元素 | 集合元素 | $(“select :selected”) |
4.表單選擇器
| 選擇器 | 描 述 | 返 回 | 示 例 |
|---|---|---|---|
| :input | 匹配所有input, textarea, select, button元素 | 集合元素 | $(“input”) |
| :text | 匹配所有文本框 | 集合元素 | $(“:text”) |
| :password | 匹配所有密碼框 | 集合元素 | $(“:password”) |
| :radio | 匹配所有單選框 | 集合元素 | $(“:radio”) |
| :checkbox | 匹配所有所有多選框 | 集合元素 | $(“:checkbox”) |
| :submit | 匹配所有提交按鈕 | 集合元素 | $(“:submit”) |
| :image | 匹配所有圖像按鈕 | 集合元素 | $(“:image”) |
| :reset | 匹配所有重置按鈕 | 集合元素 | $(“:reset”) |
| :button | 匹配所有按鈕 | 集合元素 | $(“:button”) |
| :file | 匹配所有上傳域 | 集合元素 | $(“:file”) |
喜歡 
頂
難過(guò)
囧
圍觀
無(wú)聊
