JQ 選擇器大全
一、基本選擇器
| 選擇器 | 描 述 | 返回 | 示例 |
| #id | 根據給定id匹配一個元素 | 單個元素 | $("#test") 選取id為test的元素 |
| .class | 根據給定類名匹配一個元素 | 集合元素 | $(".test") 選取class為test的元素 |
| element | 根據給定元素名匹配一個元素 | 集合元素 | $("p") 選取p元素 |
| selector1,selector2...selectorN | 將每一個選擇器匹配到元素合成後一起返回 | 集合元素 |
$("div , span ,p , myClass")選取所在div span 和擁有class為myClass的標籤的一組元素 |
| * | 匹配所有元素 | 集合元素 | $("*") 選取所在的元素 |
二、層次選擇器
| 選擇器 | 描 述 | 返回 | 示例 |
| $("ancestor descendant") | 選取ancestor元素裡的所有descendant（後代）元素 | 集合元素 | $("div span")選取div裡面的所有span元素 |
| $("parent > child") | 選取parent元素下的child（子）元素。 | 集合元素 | $("div > span")選取div元素下的元素名是span的子元素 |
| $("prev + next") | 選取緊接在prev元素後的next元素 | 集合元素 | $(.one + div)選取class為one的下一個div元素 |
| $("prev~siblings") | 選取 prev 元素之後的所有siblings元素 | 集合元素 | $("#one~div")選取id為two的元素後面的所有div兄弟元素 |
可以用next()方法來代替$("prev + next")
$(".one+div") <==> $(".one").next("div");
可用nextAll()代替$("prev~siblings")
$("#prev~div") <==> $("#prev").nextAll("div");
siblings()方法與前後位置無關，只要是同輩節點就能匹配。
三、過濾選擇器
1、基本過濾選擇器
| 選擇器 | 描 述 | 返回 | 示例 |
| :first | 選取第1個元素 | 單個元素 | $("div:first") |
| :last | 選取最後一個元素 | 單個元素 | $("div:last") |
| :not(selector) | 去除所有與給定選擇器匹配的元素 | 集合元素 | $("input:not(.myClass)") |
| :even | 選取索引是偶數的所有元素，索引從0開始 | 集合元素 | $("ul li:even") |
| :odd | 選取索引是奇數的所有元素，索引從1開始 | 集合元素 | $("ul li:odd") |
| :eq(index) | 選取索引等於index的元素，index從0開始 | 單個元素 | $("ul:eq(3)") |
| :gt(index) | 選取索引大於index的元素，index從0開始,不包括index | 集合元素 | $("ul li:gt(3)") |
| :lt(index) | 選取索引小於index的元素，index從0開始,不包括index | 集合元素 | $("ul li:lt(3)") |
| :header | 選取所有標題元素，如：h1 h2 h3... | 集合元素 | $(":header") |
| :animated | 選取當前正在執行動畫的所有元素 | 集合元素 | $("div:animated") |
2、內容過濾選擇器
| 選擇器 | 描述 | 返回 | 示例 |
| :contains(text) | 選取含有文字內容text的元素 | 集合元素 | $("div:contains('我')") |
| :empty | 選取不包含子元素或文字的空元素 | 集合元素 | $("div:empty") |
| :has(selector) | 選取含有選擇器所匹配元素的元素 | 集合元素 | $("div:has(p)") |
| :parent | 選取含有子元素或文字的元素 | 集合元素 | $("div:parent") |
3、可見性過濾選擇器
| 選擇器 | 描述 | 返回 | 示例 |
| :hidden | 選取所有不可見元素 | 集合元素 | $(":hidden") |
| :visible | 選取所有可見元素 | 集合元素 | $("div:visible") |
$(":hidden")==》選取所有不可見元素。包括：<input type="hidden"/> 、 <div style="display:none;"> 、<div style="visibility=hidden">等元素。
4、屬性過濾選擇器
| 選擇器 | 描述 | 返回 | 示例 |
| [attribute] | 選取擁有此屬性的元素 | 集合元素 | $("div[id]") |
| [attribute = value] | 選取屬性值為value的元素 | 集合元素 | $("div[title=test]") |
| [attribute != value] | 選取屬性值不等於value的元素 | 集合元素 | $("div[titil!=test]") |
| [attribute ^= value] | 選取屬性值以value開始的元素 | 集合元素 | $("div[titil^=test]") |
| [attribute $= value] | 選取屬性值以value結束的元素 | 集合元素 | $("div[titil$=test]") |
| [attribute *= value] | 選取屬性值含有value值的元素 | 集合元素 | $("div[titil*=test]") |
| [selector][selector2][selectorN] |
用屬性選擇器合併成一個複合屬性選擇器，滿足多個條件。 |
集合元素 |
$("div[id][title=test]") 選取擁有屬性id ， 並且屬性title 等於test的div元素 |
5、子元素過濾選擇器
| 選擇器 | 描述 | 返回 | 示例 |
| :nth-child(index/even/odd) |
選取每個父元素下的第index個子元素或奇偶元素 index從1開始 |
集合元素 | $("ul li:nth-child(3)") |
| :first-child | 選取每個父元素的第1個子元素 | 集合元素 | $("ul li:first-child") |
| :last-child | 選取第個父元素下的最後一個子元素 | 集合元素 | $("ul li:last-child") |
| :only-child |
如果某個元素是它父元素中惟一的子元素，那麼將會 被匹配。如果父元素中含有其它元素，剛不會匹配 |
集合元素 | $("div:only-child") |
:nth-child(even) =>選取每個父元素下的偶子元素
:nth-child(odd) =>選取每個父元素下的奇子元素
:nth-child(3n) =>選取每個父元素下的索引值是3倍數的元素(n從0開始)
6、表單物件屬性過濾選擇器
| 選擇器 | 描述 | 返回值 | 示例 |
| :enabled | 選取所有可用元素 | 集合元素 | $("#form1:enabled") |
| :disabled | 選取所有不可用元素 | 集合元素 | $("#form1:disabled") |
| :checked |
選取所有被選中的元素 （單選框、複選框） |
集合元素 | $("input:checked") |
| :selected |
選取所有被選中的選項元素 （下拉列表） |
集合元素 | $("select:selected") |
四、表單選擇器
| 選擇器 | 描述 | 返回 | 示例 |
| :input | 選取所有input 、textarea 、select 、button元素 | 集合元素 | $(":input") |
| :text | 選取所有的單行文字框 | 集合元素 | $(":text") |
| :password | 選取所有的密碼框 | 集合元素 | $(":password") |
| :radio | 選取所有的單選框 | 集合元素 | $(":radio") |
| :checkbox | 選取所有的多選框 | 集合元素 | $(":checkbox") |
| :submit | 選取所有的提交按鈕 | 集合元素 | $(":submit") |
| :image | 選取所有的影象按鈕 | 集合元素 | $(":image") |
| :reset | 選取所有的重置按鈕 | 集合元素 | $(":reset") |
| :button | 選取所有的按鈕 | 集合元素 | $(":button") |
| :file | 選取所有的上傳域 | 集合元素 | $(":file") |
| :hidden | 選取所有的不可見元素 | 集合元素 | $(":hidden") |