回味jQuery系列（1）-選擇器

jQuery-選擇器淺析

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")       全部 <input> 元素
:text        $(":text")        全部 type="text" 的 <input> 元素
:password    $(":password")    全部 type="password" 的 <input> 元素
:radio       $(":radio")       全部 type="radio" 的 <input> 元素
:checkbox    $(":checkbox")    全部 type="checkbox" 的 <input> 元素
:submit      $(":submit")      全部 type="submit" 的 <input> 元素
:reset       $(":reset")       全部 type="reset" 的 <input> 元素
:button      $(":button")      全部 type="button" 的 <input> 元素
:image       $(":image")       全部 type="image" 的 <input> 元素
:file        $(":file")        全部 type="file" 的 <input> 元素      
:enabled     $(":enabled")     全部激活的 input 元素
:disabled    $(":disabled")    全部禁用的 input 元素
:selected    $(":selected")    全部被選取的 input 元素
:checked     $(":checked")     全部被選中的 input 元素

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

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

咱們在使用中，不會全部標籤都有id，使用起來也不方便，代碼冗雜。綜合組合不少選擇器使用，選到特定的元素，也是很是方便的。