鋒利的jQuery學習筆記之jQuery選擇器
在介紹jQuery選擇器之前，先簡單介紹一下CSS選擇器--->
一、CSS選擇器
常見的CSS選擇器有以下幾種：
| 選擇器 | 語法 | 描述 | 示例 |
| 標簽選擇器 | E{CSS規則} | 以文檔元素為選擇符 |
td{font-size:10px;} a{tetx-decoration:none;} |
| ID選擇器 | #ID{CSS規則} | 以文檔元素的唯一標示ID為選擇符 | #node{corlor:red;} |
| 類選擇器 | .className{CSS規則} | 以文檔元素的class作為選擇符 | div.node{background-color:yellow;} |
| 群組選擇器 | E1,E2,E3{CSS規則} |
以多個文檔元素作為選擇符 |
p,div,a,span{font-size:10px;} |
| 後代選擇器 | E F{CSS規則} | 以元素E的任意後代元素F作為選擇器 | div input{font:10px black;} |
| 通配選擇器 | *{CSS規則} | 以文檔所有元素作為選擇器 | *{font-size:10px;} |
二、jQuery選擇器
jQuery選擇器完全繼承CSS選擇器，可以快速找到DOM元素並添加對應的行為。
jQuery共有基本選擇器、層次選擇器、過濾選擇器和表單選擇器。下面對這幾類選擇器一一介紹
1、基本選擇器
| 選擇器 | 描述 | 返回 | 示例 |
| element | 根據給定的元素名稱匹配元素 | 集合元素 | $("p")選取所有的p元素 |
| #id | 根據給定的id匹配指定的元素 | 一個元素 | $("#nodeName")選取id為nodeName的元素 |
| #className |
根據給定的class名稱匹配元素 |
集合元素 | $("div.span")選擇class為span的所有div |
| * |
匹配所有的元素 |
集合元素 | $("*")選擇所有的元素 |
| selecter1,selecter,...,selecterN | 將每一個選擇器匹配的元素合並後返回 | 集合元素 | $("div,span,p.info")選擇所有的div\span和class為info的p元素 |
2、層次選擇器
| 選擇器 | 描述 | 返回 | 示例 |
| $("ancestor descendant") | 選擇ancestor裏的所有descendant(後代)元素 | 集合元素 | $("div span")選取div裏的所有span元素 |
| $("parent > child") |
選擇parent的child(子)元素 PS:$("ancestor descendant")是選擇後代（包括孫輩元素） $("parent > child")只選擇子元素 |
集合元素 | $("div > span")選擇div元素下名為span的子元素 |
| $("pre + next‘) | 選擇緊接在pre元素後的下一個同輩元素 | 集合元素 | $(".one + div")選擇class為one後面的第一個div同輩元素 |
| $("pre ~ siblings") | 選擇pre元素後面的所有同輩元素 | 集合元素 | $("#two ~ div")選擇id為two後面的所有div同輩元素 |
jQuery中的方法可以代替上面的某些選擇器：
- next()方法等價於$("pre + next")。所以$(".one + div")就等價於$(".one").next();
- nextAll()方法等價於$("pre ~ siblings")。所以$("#two ~ div")就等價於$("#two").nextAll();
- siblings()方法是獲取當前元素的所有同輩元素，不分前後；
3、過濾選擇器
過濾選擇器主要是通過特定的過濾規則來篩選出所需的DOM元素，過濾規則與CSS的偽類選擇器語法相同，即選擇器都是以一個冒號（:）開頭，按照不同的過濾規則，過濾選擇器可以分為：
基本過濾、內容過濾、可見性過濾、屬性過濾、子元素過濾、表單對象屬性過濾
| 選擇器 | 描述 | 返回 | 示例 |
| :first | 選擇第一個元素 | 單個元素 | $("div:first")選擇所有div中的第一個元素 |
| :last | 選擇最後一個元素 | 單個元素 |
$("div:last")選擇所有div中的最後一個元素 |
| :not(selector) | 去所有與給定選擇器匹配的元素 | 集合元素 | $("div:not(‘.div1‘)")選擇class不是div1所有div元素 |
| :even | 選擇索引值為偶數的元素 | 集合元素 | $("tr:even")選擇索引值為偶數的tr元素 |
| :odd | 選擇索引值為奇數的元素 | 集合元素 | $("tr:odd")選擇索引值為奇數的tr元素 |
| :eq(index) | 選擇索引值等於index的元素 | 單個元素 | $("input:eq(2)")選擇索引值為2的元素，即第三個input元素（索引從0開始） |
| :gt(index) | 選擇索引值大於index的元素 | 集合元素 | $("inputgt(2)")選擇索引值大於2的元素，即第三個input後面的元素（索引從0開始） |
| :lt(index) | 選擇索引值小於index的元素 | 集合元素 | $("input:lt(2)")選擇索引值小於2的元素，即第三個input前面的元素（索引從0開始） |
| :header | 選擇所有的標題元素，例如h1，h2等 | 集合元素 | $("header")選擇網頁中所有的標題元素h1到h6 |
| :animated | 選擇當前正在執行動畫的元素 | 集合元素 | $("div:animated")選擇正在執行動畫的div元素 |
| :focus | 選擇所有獲取焦點的元素 | 集合元素 | $(":focus")選擇網頁中所有獲取焦點的元素 |
內容過濾選擇器：它的過濾規則主要體現在它所包含的子元素或文本內容上。
| 選擇器 | 描述 | 返回 | 示例 |
| :contains(text) | 選擇文本內容包含text的元素 | 集合元素 | $("div:contains(‘學生‘)")選擇文本內容包含“學生”的所有div元素 |
| :empty | 選擇不包含子元素或內容為空的元素 | 集合元素 | $("div:empty")選擇不包含子元素或者內容為空的div元素 |
| :has(selector) | 選擇包含匹配選擇器元素的元素 | 集合元素 | $("div:has(p)")選擇包含p元素的div元素 |
| :parent |
選擇含有子元素或者文本的元素 |
集合元素 | $("div:parent")選擇含有子元素或者文本內容不為空的div元素 |
可見性過濾選擇器根據元素的可見和不可見性來選擇元素。
可見性過濾選擇器
| 選擇器 | 描述 | 返回 | 示例 |
| :hidden | 選擇所有的隱藏元素 | 集合元素 |
$(":hidden")選擇頁面所有的隱藏元素 PS:隱藏元素包括樣式屬性display為none，visibility為hidden及隱藏的表單域 |
| :visible | 選擇所有的可見元素 | 集合元素 | $("div:visible")選擇所有可見的div元素 |
屬性過濾選擇器是根據元素屬性選擇相應的元素
| 過濾器 | 描述 | 返回 | 示例 |
| [attribute] | 選擇包含該屬性的元素 | 集合元素 | $("div[id]")選擇含有id屬性的div元素 |
| [attribute=value] | 選擇屬性值等於value的元素 |
集合元素 |
$("div[id=‘div1‘]")選擇id屬性值等於div1的div元素 |
| [attribute!=value] | 選擇屬性值不等於value的元素 | 集合元素 | $("div[id!=‘div1‘]選擇id屬性值不等於div1的div元素 |
| [attribute^=value] | 選擇屬性值以value開頭的元素 | 集合元素 | $("div[id^=‘div1‘]選擇id屬性值以div1開頭的div元素 |
| [attribute$=value] | 選擇屬性值以value結尾的元素 | 集合元素 |
$("div[id$=‘div1‘]選擇id屬性值以duv1結尾的div元素
|
| [attribute*=value] | 選擇屬性值包含value的元素 | 集合元素 | $("div[id*=‘div1‘]選擇id屬性值包含div1的div元素 |
| [attribute|=value] | 選擇屬性值為value或以value為前綴（該字符串後面跟一個連字符’-‘）的元素 | 集合元素 | $("div[id|=‘div1‘]選擇id屬性值為div1或者以div1為前綴的div元素 |
| [attribute~=value] | 選擇屬性用空格分隔的值中包含一個給定值的元素 | 集合元素 | $("div[id~=‘div1‘]選擇id屬性用空格分隔的值中等於div1的div元素 |
| [attribute1][attribute2][attribute3] | 用屬性選擇器合並成一個復合屬性選擇器，滿足多個條件，沒選擇依一次，縮小一次選擇 | 集合元素 | $("div[id][title=‘hello‘])選擇含有id屬性並且title的屬性值為hello的div元素 |
子元素過濾選擇器是針所有父元素進行過濾，而不只是某一個指定的父元素
| 選擇器 | 描述 | 返回 | 示例 |
| :nth-child(index/even/odd/equation) | 選擇每個父元素下第index的子元素或者奇偶於元素（index從1開始） | 集合元素 | :eq(index)只匹配一個元素，而:nth-child(index)將匹配每一個父元素中索引值為index的子元素，且前者的索引從0開始，後者索引從1開始。 |
|
:first-child |
選擇每個父元素的第一個子元素 | 集合元素 |
:first只返回單個元素，而:first-child將返回每一個父元素中的第一個元素 $("ul li:last-child")選擇每個ul中的第一個元素 |
| :last-child | 選擇每一個父元素的最後一個子元素 | 集合元素 |
:last只返回打個元素，而:last-child將返回每一個父元素中的最後一個元素 $("ul li:first-child")選擇每個ul中的最後一個元素 |
| :only-child | 如果某個元素是它父元素中的唯一子元素，那麽它將被匹配，否則不會被匹配 | 集合元素 | $("ul li:only-child")獲取的是ul中的唯一子元素li |
表單元素屬性過濾器，主要是對所選擇的的表單元素進行過濾。
| 選擇器 | 描述 | 返回 | 示例 |
| :enabled | 選擇所有可用的表單元素 | 集合元素 | $("#form1 :enabled")選擇id=form1的表單內所有可用元素 |
| :disabled | 選擇所有不可用的表單元素 | 集合元素 | $("#form1 :disabled")選擇id=form1的表單內所有不可用元素 |
| :checked | 選擇所有被選中的元素（包括單選框、復選框） | 集合元素 | $("#input:checked")選擇所有被選中的input元素 |
| :selected | 選擇所有被選中的選項元素（下拉列表） | 集合元素 | $("select option:selected")選擇i所有被選中的選項元素 |
至此，所有的過濾選擇器就介紹完了，下面介紹最後一種選擇器-----表單選擇器
3、表單選擇器
利用表單選擇器可以方便地獲取到某個或某種類型的元素
| 選擇器 | 描述 | 返回 | 示例 |
| :input | 選擇所有的input、textarea、button、select元素 | 集合元素 | $(":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")選擇所有的隱藏域（這個已經在之前的不可見性過濾器中講到過） |
以上就是jQuery中所有的選擇器及使用方法，這麽多的選擇器，要想每一個都能理解，關鍵還在實踐。
鋒利的jQuery學習筆記之jQuery選擇器