摘要：選擇器淺析最核心的組成部分就是選擇器引擎，選擇器引擎占了很大一部分。它繼承了的語法，可以對元素的標簽名屬性名狀態等進行快速準確的選擇，并且不必擔心瀏覽器的兼容性。在構造選擇器時，盡量簡單，只保證必要的確定性。

jQuery 最核心的組成部分就是：選擇器引擎，選擇器引擎Sizzle占了jQuery很大一部分。它繼承了CSS 的語法，可以對DOM 元素的標簽名、屬性名、狀態等進行快速準確的選擇，并且不必擔心瀏覽器的兼容性。jQuery選擇器實現了CSS1~CSS3 的大部分規則之外，還實現了一些自定義的選擇器，用于各種特殊狀態的選擇。

選擇類型           選擇器                  返回  
元素名         $("div")            獲取所有div元素的DOM對象
ID            $("#xzavier")       獲取一個ID為box元素的DOM對象
類(class)     $(".xzavier")       獲取所有class為box的所有DOM對象
群組選擇       $("span,.xzavier")  獲取多個選擇器的DOM對象
后代選擇       $("ul li a")        獲取追溯到的多個DOM對象
通配選擇       $("*")              獲取所有元素標簽的DOM對象
后代選擇       $("ul li a")        獲取追溯到的多個DOM對象
子選擇         $("div p")          只獲取子類節點的多個DOM對象
next選擇       $("div + p")        只獲取某節點后一個同級DOM對象
nextAll選擇    $("div ~ p")        獲取某節點后面所有同級DOM對象

$("#xzavier").find("button")      //等價后代選擇器
$("#xzavier").children("button")  //等價子選擇器
$("#xzavier").next("button")      //等價next選擇器 
$("#xzavier").nextAll("button")   //等價nextAll選擇器    
$("#xzavier").prev("button")      //選擇同級上一個元素
$("#xzavier").prevAll("button")   //選擇同級所有上面的元素
$("#xzavier").prevUntil("button") //選擇同級上非指定元素，遇到則停止
$("#xzavier").nextUntil("button") //選擇同級下非指定元素，遇到則停止
$("#xzavier").siblings("button")  //選擇同級上下所有元素

更多：
1.ID返回的是單個元素，而元素標簽名和類(class)返回的是多個，我們可以采用jQuery 核心自帶的一個屬性length 或size()方法來查看返回的元素個數。
2.ID在頁面中是唯一的，一般要求開發者要遵守規范。如果你在頁面中出現三次，在CSS使用樣式是會成功顯示樣式的，但在jQuery，就匹配不到后面的ID。
3.在使用上，通配選擇器一般用的并不多，尤其是，比如：$("")，這種使用方法效率很低，影響性能。
4.在構造選擇器時，盡量簡單，只保證必要的確定性。當選擇器篩選越復雜，jQuery 內部的選器引擎處理字符串的時間就越長。
5.注意，find()、next()、nextAll()和children()這四個方法中，如果不傳遞參數，就相當于傳遞了“*”，即任何節點。

對應CSS模式               選擇器                            返回
a[title]           $("a[title]")             獲取title屬性的DOM對象
a[title=num]       $("a[title=num]")         獲取title屬性且=num的DOM對象
a[title^=num]      $("a[title^=num]")        獲取title且開頭屬性值匹配的DOM對象
a[title|=num]      $("a[title|=num]")        獲取title且=num或開頭屬性值匹配后面跟一個“-”號的DOM對象
a[title$=num]      $("a[title$=num]")        獲取title屬性且結尾屬性值匹配的DOM對象
a[title!=num]      $("a[title!=num]")        獲取title屬性且!=num的DOM對象
a[title~=num]      $("a[title~=num]")        獲取title且屬性值是以一個空格分割的列表，其中包含屬性值的DOM對象
a[title*=num]      $("a[title*=num]")        獲取title且屬性值含有一個指定字串的DOM對象
a[xz][title=num]   $("a[xz][title=num]")     獲取具有bbb屬性且title屬性=num的DOM對象

過濾器名          jQuery              返回       
:first         $("li:first")     選取第一個元素     
:last          $("li:last")      選取最后一個元素   
:not(selector) $("li:not(.xzavier)") 選取class不是xzavier的li元素
:even          $("li.even")      選擇索引(0 開始)是偶數的所有元素
:odd           $("li:odd")       選擇索引(0 開始)是奇數的所有元素
:eq(index)     $("li:eq(2)")     選擇索引(0 開始)等于index的元素
:gt(index)     $("li:gt(2)")     選擇索引(0 開始)大于index的元素
:lt(index)     $("li.lt(2)")     選擇索引(0 開始)小于index的元素
:header        $(":header")      選擇標題元素，h1 ~ h6 
:animated      $(":animated")    選擇正在執行動畫的元素
:focus         $(":focus")       選擇當前被焦點的元素

更多：
1.:focus 過濾器，必須是網頁初始狀態的已經被激活焦點的元素才能實現元素獲取。而不是鼠標點擊或者Tab鍵盤敲擊激活的。
2.:first、:last 和first()、last()這兩組過濾器和方法在出現相同元素的時候，first 會實現第一個父元素的第一個子元素，last 會實現最后一個父元素的最后一個子元素。所以，如果需要明確是哪個父元素。

過濾器名                jQuery                        返回
:contains(text)  $(":contains("xzavier")")  選取含有"xzavier"文本的元素
:empty           $(":empty")                選取不包含子元素或空文本的元素
:has(selector)   $(":has(.xzavier)")        選取含有class是xzavier的元素
:parent          $(":parent")               選取含有子元素或文本的元素

更多：
1.jQuery 提供了一個has()方法來提高:has 過濾器的性能：$("ul").has(".xzavier")
2.jQuery 提供了一個名稱和:parent 相似的方法，但這個方法并不是選取含有子元素或文本的元素，而是獲取當前元素的父元素，返回的是元素集合

過濾器名      jQuery            返回
:hidden    $(":hidden")    選取所有不可見元素集合元素
:visible   $(":visible")   選取所有可見元素集合元素

更多：
1.:hidden 過濾器一般是包含的內容為：CSS 樣式為display:none、input 表單類型為type="hidden"和visibility:hidden 的元素

過濾器名             jQuery                   返回
:first-child   $("li:first-child")   獲取每個父元素的第一個子元素
:last-child    $("li:last-child")    獲取每個父元素的最后一個子元素
:only-child    $("li:only-child")    獲取只有一個子元素的元素
:nth-child(odd/even/eq(index))  $("li:nth-child(even)")    獲取每個自定義子元素的元素(索引值從1開始計算)

方法名                 jQuery                               備注
is(s/o/q/f)       $("li").is(".red")           參數可傳遞選擇器、DOM、jquery對象或是函數來匹配
hasClass(class)   $("li").hasClass("xzavier")  同is("." + class)
slice(start, end) $("li").slice(0,2)           選擇從start到end位置的元素，如果是負數，則從后面開始
filter(s/o/q/f)   $("li").filter(".xzavier")   參數可傳遞選擇器、DOM、jquery對象或是函數來匹配
end()             $("div").find("p").end()     獲取當前元素前一次狀態集合元素
contents()        $("div").contents()          獲取某元素下面所有元素節點，包括文本節點

選擇器名         jQuery               返回
:input       $(":input")       所有  元素
:text        $(":text")        所有 type="text" 的  元素
:password    $(":password")    所有 type="password" 的  元素
:radio       $(":radio")       所有 type="radio" 的  元素
:checkbox    $(":checkbox")    所有 type="checkbox" 的  元素
:submit      $(":submit")      所有 type="submit" 的  元素
:reset       $(":reset")       所有 type="reset" 的  元素
:button      $(":button")      所有 type="button" 的  元素
:image       $(":image")       所有 type="image" 的  元素
:file        $(":file")        所有 type="file" 的  元素      
:enabled     $(":enabled")     所有激活的 input 元素
:disabled    $(":disabled")    所有禁用的 input 元素
:selected    $(":selected")    所有被選取的 input 元素
:checked     $(":checked")     所有被選中的 input 元素

更多：
1.這些選擇器都是返回元素集合，如果想獲取某一個指定的元素，最好結合一下屬性選擇器。

$(":text[name=xzavier]); //獲取單行文本框name=xzavier 的元素  

我們在使用中，不會所有標簽都有id，使用起來也不方便，代碼冗雜。綜合組合很多選擇器使用，選到特定的元素，也是非常方便的。