Jquery如何實(shí)現(xiàn)過(guò)濾選擇器

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

創(chuàng)新互聯(lián)是一家專業(yè)提供廬江企業(yè)網(wǎng)站建設(shè),專注與網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站建設(shè)、H5響應(yīng)式網(wǎng)站、小程序制作等業(yè)務(wù)。10年已為廬江眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站設(shè)計(jì)公司優(yōu)惠進(jìn)行中。

  1.根據(jù)某過(guò)濾規(guī)則進(jìn)行元素的匹配，書(shū)寫(xiě)時(shí)以“：”號(hào)開(kāi)頭,通常用于查找集合元素中的某一位置的單個(gè)元素。

$("li:first") 第一個(gè)

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

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

其中參數(shù)index表示索引號(hào)（即：一個(gè)整數(shù)），它從0開(kāi)始。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

標(biāo)題名稱：Jquery如何實(shí)現(xiàn)過(guò)濾選擇器
網(wǎng)站地址：http://bm7419.com/article48/gejdep.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、網(wǎng)站制作、用戶體驗(yàn)、網(wǎng)站策劃、營(yíng)銷型網(wǎng)站建設(shè)、網(wǎng)站導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)