本人的兩篇原創文章純乾貨！一切關於jquery選擇器和純乾貨！jQuery之DOM操作解析，釋出不到1個月，就被部落格園某賬號 認領 為他的原創，並且他還精心地將慕課網原創文章的版權宣告和文章中關於我的點點滴滴，刪除地乾乾淨淨，很專業。我不打算貼出他的賬號，只是希望部分程式設計師能學會尊重他人的版權。
版權宣告，文章首發於本人慕課網賬號：人生還有多少個二十年，歡迎轉載，轉載請註明出處
以下是個人對jQuery選擇器的總結，內容並不詳細，建議讀者閱讀時結合jQuery相關的參考文件或書籍，本文主要著眼於一些易錯點，同時將一些選擇器和方法聯絡起來，文中難免會有些錯誤，敬請批評指正。
jQuery的選擇器可以分為以下的四類：
（一） 基本選擇器
1. ID選擇器
eg: $(“#nav”)選取ID為nav的元素
2. 類選擇器
eg: $(“.fruit”)選取class為fruit 的元素
3. 標籤選擇器
eg: $(“p”)選取所有的p元素
4. 通用選擇器
eg: $(“*”)選取所有的元素
5. 群組選擇器
eg: $(“li,span.active”)選取所有li元素和class為active的span元素
（二） 層次選擇器
1. 子選擇器$( "parent > child" )：選取所有指定元素的直接後代元素，即子元素，可以用children()代替它。
eg: $(“body>div”)相當於$(“body”).children(“div”);
2. 後代選擇器$("ancestor descendant")：選取給定的祖先元素的所有後代元素，可以用find()代替它
eg: $(“ul li”)相當於$(“ul”).find(“li);
3. 相鄰兄弟選擇器$("prev + next")：選取所有緊接在“prev”元素後的“next”元素,可以用next()替代它。
eg : $(“a+ul”)相當於$(“a”).next();
相鄰兄弟選擇器要滿足三個條件：
1）它們必須是兄弟，即他們的父元素為同一個
2）next必須在prev後面
3）它們必須相鄰
4. 一般兄弟選擇器 $("prev ~ siblings")，選取“prev”元素之後的所有兄弟元素,可以用nextAll()代替它。
eg : $(“a~span”)相當於$(“a”).nextAll("span");
一般兄弟選擇器兩個條件：
1.它們必須是兄弟，即他們的父元素為同一個
2.siblings必須在prev後面
Attentions:
1)siblings()可以跟同輩的元素匹配，無論位置的先後。
next()只能跟緊隨其後的一個同輩元素匹配
nextAll()只能跟其後的同輩元素匹配
2)區分$(“ul.active”)和$(“ul .active”)
二者的差別在於空格，前者會被解析為“獲取class為active的ul元素”，而後者則是“獲取ul元素的後代元素中class為active的元素”
（三） 過濾選擇器
1. 基本過濾選擇器
1）:first/:last
2):even/:odd/:eq()/:gt()/:lt()
3):not()
Attentions:
1.:first,:last,:eq()都只能選擇一個元素
2.:even,:odd,:eq(),:gt(),:lt()都是靠索引來選擇元素的，而且索引的起始值都為0，而:nth-child()的索引起始值為1。
以下舉幾個例子：
（1）tr:even選取的是索引為偶數（0,2,4,6...）的行，即奇數行（第1,3,5,7...行）
（2）div:eq(2)選取的是索引為2的div元素，即第3個div元素
（3）span:lt(2)選取的是索引小於2的span元素，索引為0,1的元素，也就是說，選擇的是第1個和第2個span
3. eq(0)相當於:first,eq(-1)相當於:last
4. :first相當於.first()，:last相當於.last()，:eq()相當於.eq()，:not()相當於.not()
2. 內容過濾選擇器
$(":contains(text)")是根據元素所包含的文字來篩選的
$(":has(selector)")是根據元素所包含的選擇器來篩選的
$(":parent")選擇的是包含子元素或文字的元素
$(":empty")跟$(":parent")完全相反，選擇的是既不包含子元素，又不包含文字的元素
3. 可見性過濾選擇器
:visible
:hidden
Attentions:
1) 如果元素佔據文件一定的空間,則被認為是可見的，同理，不佔空間則視為不可見。
2) visibility為hidden， opacity為0的元素為可見
4. 屬性過濾選擇器
[attribute]
[attribute=value]/[attribute!=value]
[attribute^=value]/[attribute$=value]
[attribute*=value]
[attrSel1][attrSel2][attrSelN]
[attribute=value]
[attribute~=value]
eg: $(“[title]”)選中有title屬性的元素
$(“[title=’apple’]”)選中有title屬性值為apple的元素
$(“[title!=’apple’]”)選中有title屬性值不為apple的元素
$(“[title^=’a’]”)選中有title屬性值以a開頭的元素
$(“[title$=’a’]”)選中有title屬性值以a結尾的元素
$(“[title*=’a’]”)選中有title屬性值中含有a的元素
$(“[title][id][src]”)選中同時具有title，id和src屬性的元素
$(“[title=’a’]”)選中有title屬性值為a或者title屬性值以a為字首的元素
$(“[title~=’a’]”)選中title屬性值用空格分隔的值中含有a的元素
5. 子元素過濾選擇器
:first-child/:last-child
:nth-child()/:nth-last-child()
:only-child
Attentions:
1）區分:nth-child(n) 與 :nth-last-child(n)
前者是從前往後計算，後者從後往前計算
2）:first-child相當於nth-child(1),:last-child相當於nth-last-child(1)
3）所有的選擇器都只能往後選，往下選，要實現往前選，往上選，則要利用一些現成的方法。eg : parent(),closest()
4）區分:first/:first-child，:last/:last-child，:eq()/:nth-child()
這三對選擇器的差別是類似的，下面就:eq()/:nth-child()做個說明：
:eq()的索引是以0開始的，並且只能選中一個元素，而:nth-child()的索引是以1開始的，並且能夠選中多個元素。
6. 表單物件屬性過濾選擇器
1):enables/:disabled
2):checked/:selected
（四） 表單選擇器
1. :input選取所有的<input>、<textarea>、<select>、<button>元素
2. :text, :password , :radio , :checkbox , :submit , :image , :reset , :button , :file , :hidden
Attentions:
1).除了:input篩選選擇器，幾乎每個表單類別篩選器都對應一個input元素的type值。大部分表單類別篩選器可以使用屬性篩選器替換。比如 $(`:password`) == $(`[type=password]`)
2).區分$(“input”)和$(“:input”)
$(“input”)獲取的是<input>元素，而:input選取所有的<input>、<textarea>、<select>、<button>元素