Jquery如何實現(xiàn)過濾選擇器

這篇文章主要介紹了Jquery如何實現(xiàn)過濾選擇器，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

  1.根據(jù)某過濾規(guī)則進(jìn)行元素的匹配，書寫時以“：”號開頭,通常用于查找集合元素中的某一位置的單個元素。

$("li:first") 第一個

$("li:last") 最后一個

  2.如果想從一組標(biāo)簽元素數(shù)組中，靈活選擇任意的一個標(biāo)簽元素，我們可以使用:eq(index)

其中參數(shù)index表示索引號（即：一個整數(shù)），它從0開始。

如果index的值為3，表示選擇的是第4個元素：$("li:eq(3)")

3.按照文本內(nèi)容來查找一個或多個元素，那么使用:contains(text)選擇器會更加方便，

它的功能是選擇包含指定字符串的全部元素，它通常與其他元素結(jié)合使用，獲取包含“text”字符串內(nèi)容的全部元素對象。

其中參數(shù)text表示頁面中的文字。$("li:contains('jQuery')")

    <ol>
            <li>強(qiáng)大的"jQuery"</li>
            <li>"javascript"也很實用</li>
            <li>"jQuery"前端必學(xué)</li>
            <li>"java"是一種開發(fā)語言</li>
            <li>前端利器——"jQuery"</li>
    </ol>

4.:has(selector)過濾選擇器的功能是獲取選擇器中包含指定元素名稱的全部元素，

其中selector參數(shù)就是包含的元素名稱，是被包含元素。

$("li:has('p')")選擇器代碼，獲取了包含<p>元素的全部<li>元素

5.:hidden過濾選擇器的功能是獲取全部不可見的元素，這些不可見的元素中包括type屬性值為hidden的元素。

$("p:hidden")代碼獲取隱藏的<p>元素

6.:visible過濾選擇器獲取的是全部可見的元素，也就是說，只要不將元素的display屬性值設(shè)置為“none”，

那么，都可以通過該選擇器獲取。$("p:visible")選擇器代碼，獲取那個可見的<p>元素

7.屬性作為DOM元素的一個重要特征，也可以用于選擇器中，通過元素屬性獲取元素的選擇器，

[attribute=value]屬性選擇器的功能是獲取與屬性名和屬性值完全相同的全部元素，其中[]是專用于屬性選擇器的括號符，參數(shù)attribute表示屬性名稱，value參數(shù)表示屬性值。

$("li[title='我最愛']")屬性選擇器代碼，獲取指定的<li>元素

8.[attribute!=value]屬性選擇器的功能是獲取不包含屬性名，或者與屬性名和屬性值不相同的全部元素，

其中[]是專用于屬性選擇器的括號符，參數(shù)attribute表示屬性名稱，value參數(shù)表示屬性值。

$("li[title!='我最愛']")屬性選擇器代碼，獲取指定的<li>元素，其中有不包含title屬性名，有title屬性值不等于“我最愛”

9.功能更為強(qiáng)大的屬性選擇器[attribute*=value]，它可以獲取屬性值中包含指定內(nèi)容的全部元素，

其中[]是專用于屬性選擇器的括號符，參數(shù)attribute表示屬性名稱，value參數(shù)表示對應(yīng)的屬性值。

$("li[title*='最']")屬性選擇器代碼，獲取指定<li>元素，這些元素的title屬性值中都包含了“最”字符

10.使用:first-child子元素過濾選擇器則可以獲取每個父元素中返回的首個子元素，它是一個集合，常用多個集合數(shù)據(jù)的選擇處理。

<ol>
            <li>芹菜</li>
            <li>茄子</li>
            <li>蘿卜</li>
            <li>大白菜</li>
            <li>西紅柿</li>
        </ol>
        <ol>
            <li>橘子</li>
            <li>香蕉</li>
            <li>葡萄</li>
            <li>蘋果</li>
            <li>西瓜</li>
        </ol>
        
        <script type="text/javascript">
            $("li:first-child").css("background-color", "green");
</script>

11.:last-child子元素過濾選擇器的功能是獲取每個父元素中返回的最后一個子元素，它也是一個集合，常用多個集合數(shù)據(jù)的選擇處理。

$("li:last-child").css("background-color", "blue");

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“Jquery如何實現(xiàn)過濾選擇器”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!