jQuery常用的選擇器

小周sri的碼農發表於2017-09-07
jQuery

當我們想要操所頁面中的元素時，首先要做的就是選取元素。選取頁面中元素可以使用jQuery給我們提供的$()方法，該方法需要提供選擇器作為引數，方法執行完成後會返回給我們一個jQuery物件，被選取的元素就包含在該物件中。

1.1基礎選擇器

選擇器 實列 說明
全域性選擇器 $('*') 選擇所有元素
標籤選擇器 $('p') 選擇所有的p元素
ID選擇器 $('#top') 選擇所有id屬性值為top的元素
class選擇器 $('.box') 選擇所有clss屬性值為top的元素
多重選擇器 $('div, p') 選擇所有的div元素和p元素

 

 

 

 

 

 

2.2 按層次結構選取元素

選擇器 實列 說明
子代選擇器 $('div > p') 選擇作為div元素子元素的所有p元素
後代選擇器 $('div p') 選擇作為div後代的所有p元素
相鄰選擇器 $('div + p' 選擇緊鄰div元素且位於其後的p元素
兄弟選擇器 $('div ~ p') 選擇作為div元素且位於其後的所有p元素

 

 

 

 

 

2.3 使用屬性選擇元素

選擇器 實列 說明
tag[attr] $('p[class]') 選擇所有帶有class屬性的p元素
tag[attr="value"] $('p[class="top"]') 選擇所有class屬性值恰好等於top的p元素
tag[attr^="value"] $('p[class^="top"]') 選擇所有class屬性值以top開頭的P元素（包括class等於top的p元素)
 tag[attr$="value"]  $('p[class$="top"]')  選擇所有class屬性值以top結尾的p元素（包括class屬性值恰好等於top的p元素）
 tag[attr!="value"] $('p[class!="top"]')  選擇所有class屬性值不等於top的p元素 
 tag[attr*="value"]  $('p[class*="top"]')  選擇所有class屬性值中包含字串top的p元素（包括class屬性值恰好等於top的p元素）
 tag[attr|="value"]  $('p[class|="top"]')  選擇所有class屬性值為連線符分隔的字串並且該字串以top開頭的p元素和class屬性值恰好等於top的p元素
 tag[attr~="value"]  $('p[class~="top"]')  選擇所有class屬性值為空格分隔的多個字串且其中一個字串等於top的p元素和class屬性值恰好等於top的p元素
tag[attr="value"]... $('p[class="top"][id]') 選擇所有class屬性值恰好等於top並且帶有id屬性的p元素

 

 

 

 

 

 

 

 

 

    <p class="center" id="p1">段落內容1</p>
    <p class="center right">段落內容2</p>
    <p class="left center right">段落內容3</p>

    <p class="center-right">段落內容4</p>
    <p class="left-center">段落內容5</p>
    <p class="left-center-right">段落內容6</p>

　　

// 1. 選擇帶有Class屬性的所有p元素
    var $p1 = $('p[class]');

    // 2. 選擇class屬性值恰好等於center的p元素
    var $p2 = $('p[class="center"]');

    // 3. 選擇class屬性值以center開始的p元素和class屬性值恰好等於center的p元素
    var $p3 = $('p[class^="center"]');

    // 4. 選擇Class屬性值以center結尾的p元素和class屬性值恰好等於center的p元素
    var $p4 = $('p[class$="center"]');

    // 5. 選擇Class屬性不等於center的p元素
    var $p5 = $('p[class!="center"]');

    // 6. 選擇Class屬性值中包含center字串的p元素和class屬性值恰好等於center的p元素
    var $p6 = $('p[class*="center"]');

    // 7. 選擇所有class屬性值為連線符分隔的字串並且該字串以center開頭的p元素和class屬性值恰好等於center的p元素
    var $p7 = $('p[class|="center"]');

    // 8. 選擇所有class屬性值為空格分隔的多個字串且其中一個字串等於center的p元素和class屬性值恰好等於center的p元素
    var $p8 = $('p[class~="center"]');

    // 9. 選擇所有class屬性值恰好等於center並且id屬性值恰好等於的p1元素
    var $p9 = $('p[class="center"][id="p1"]');

　　

2.4基礎過濾器

選擇器 實列 說明
：firs $('li:first') 選擇匹配元素集合中第一個li元素
：last $('li:last') 選擇匹配元素集合中最後一個li元素
:even $('li:even') 選擇匹配元素集合中偶數位的li元素
:odd $('li:odd') 選擇匹配元素集合中奇數位的li元素
:eq(n) $('eq(3)') 選擇匹配元素集合中索引等於3的li元素
:gt(n) $('gt(3)') 選擇匹配元素集合中索引大於3的li元素
:lt(n) $('lt(3)') 選擇匹配元素集合中索引小於3的li元素
:root $(':root') 選擇文件的根元素
:header $(':header') 選擇所有的標題元素(h1-h6)
:lang(language) $('div:lang(en-us)') 選取指定的語言元素
:not(selector) $('a:not(.active)') 選擇不匹配.active選擇器的a元素
:target $(':target') 選擇處於目標狀態的元素（錨連結目標元素）
:hidden $(':hidden') 選擇處於隱藏的狀態
:visible $(':visible') 選擇處於可見狀態的元素。
:animated $(':animated') 選取正在應用動畫效果的元素（只對通過jq方法新增動畫有效）






















2.5子元素過濾器

 

選擇器示例說明
tag:first-child $('div p:first-child') 選擇作為其父元素第一個子元素的p元素
tag:last-child $('div p:last-child') 選擇作為其父元素最後一個子元素的p元素
tag:first-of-type $('p:first-of-type') 選擇幾個同輩p元素中的第一個
tag:last-of-type $('p:last-of-type') 選擇幾個同輩p元素中的最後一個
tag:nth-child(n) $('p:nth-child(2)') 選擇作為其父元素正數第2個子元素的所有p元素
tag:nth-last-child(n) $('p:nth-last-child(2)') 選擇作為其父元素倒數第2個子元素的所有p元素
tag:nth-of-type(n) $('p:nth-of-type(1)') 選擇幾個同輩p元素中的正數第1個
tag:nth-last-of-type(n) $('p:nth-last-of-type(1)') 選擇幾個同輩p元素中的倒數第1個
tag:only-child $('p:only-child') 選擇作為其父元素唯一子元素的p元素
tag:only-of-type $('p:only-of-type') 選擇同輩元素中唯一一個標籤為p的元素



 提示：tag:nth-child(n)，tag:nth-last-child(n)和tag:nth-of-type(n)中的n可以替換成even|odd，或者表示式，比如：Xn+Y。 

 

2.6 內容過濾器

選擇器示例說明
tag:contain(text) $('div:contain("hello")') 選擇匹配元素集合中包含指定文字的所有div元素
tag:empty $('div:empty') 選擇所有沒有子元素的div元素（包括文字節點）
tag:has(selector) $('div:has(p)') 選擇所有子元素中包含p元素的div元素
tag:parent $('div:parent') 選擇匹配元素集合中包含子元素的所有div元素（包括文字節點）

 

2.7 選取表單元素

jQuery提供了一些專門為表單設計的選擇器，用於快速訪問表單元素。

 

選擇器示例說明
:text $(':text ') 選擇所有文字欄位（type="text"，或沒有寫type屬性的input元素）
:password $(':password') 選擇所有密碼欄位（type="password"）
:submit $(':submit ') 選擇所有提交按鈕（type="submit"）
:reset $(':reset ') 選擇所有重置按鈕（type="reset"，）選取type型別為reset的button元素
:button $(':button ') 選擇所有其他按鈕（type="button"）
:checkbox $(':checkbox') 選擇所有核取按鈕（type="checkbox"）
:radio $(':radio ') 選擇所有單選按鈕（type="radio"）
:file $(':file ') 選取type型別為file的input元素
:image $(':image ') 選擇所有圖片按鈕（type="image"）
:input $(':input ') 選擇所有的表單元素（input，select，textarea，button）
:enabled $(':enabled ') 選擇處於可用狀態的元素
:disabled $(':disabled ') 選擇處於不可用狀態的元素（button, input, optgroup, option, select, textarea）
:selected $(':selected') 選擇處於被選中狀態的option元素
:focus $(':focus ') 選擇處於焦點狀態的元素
:checked $(':checked ') 選擇處於選中狀態的checkbox，radio，option元素

 

6. 使用context提高檢索效率

先前我們選取頁面中的元素時，不可避免的要檢索頁面中的所有元素，這樣就降低了檢索的效率。這不是我們想要的，能不能在我們指定的的範圍中檢索我們想要獲取的元素。

下面的選擇器會在id屬性值為box的元素中查詢p元素，而不是在整個文件中查詢：

    $('p', '#box')
後代選擇器也可以像上面那樣寫：

    $('#box p')

    // 等價於

    $('p', '#box')

 

 

相關文章