當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

JQuery筛选选择器之内容筛选

發(fā)布時(shí)間：2023/12/31 编程问答 26 豆豆

生活随笔收集整理的這篇文章主要介紹了 JQuery筛选选择器之内容筛选小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

基本篩選選擇器針對(duì)的都是元素DOM節(jié)點(diǎn)，如果我們想要通過(guò)內(nèi)容來(lái)過(guò)濾一些東西，該怎么辦呢？
jQuery是相當(dāng)強(qiáng)大的，這一點(diǎn)它當(dāng)然想到了啊，JQuery專門(mén)為此提供了一組內(nèi)容篩選選擇器，當(dāng)然其規(guī)則也會(huì)體現(xiàn)在它所包含的子元素或者文本內(nèi)容上。讓我們一起來(lái)通過(guò)一張表了解一下：

注意：

:contains與:has都有查找的意思，但是contains查找包含“指定文本”的元素，has查找包含“指定元素”的元素
如果:contains匹配的文本包含在元素的子元素中，同樣認(rèn)為是符合條件的。
:parent與:empty是相反的，兩者所涉及的子元素，包括文本節(jié)點(diǎn)

下面看實(shí)例：

<!DOCTYPE html> <html><head><meta http-equiv="Content-type" content="text/html; charset=utf-8" /><title></title><link rel="stylesheet" href="imooc.css" type="text/css"><script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> </head><body><h2>內(nèi)容篩選器</h2><h3>:contains/:has</h3><div class="left"><div class="div"><p>:contains</p></div><div class="div"><p>:contains</p></div><div class="div"><p><span>:has</span></p></div><div class="div"><p>:contains</p></div></div><script type="text/javascript">//查找所有class='div'中DOM元素中包含"contains"的元素節(jié)點(diǎn)//并且設(shè)置顏色$(".div:contains(':contains')").css("color", "#CD00CD");</script><script type="text/javascript">//查找所有class='div'中DOM元素中包含"span"的元素節(jié)點(diǎn)//并且設(shè)置顏色$(".div:has(span)").css("color", "blue");</script><h3>:parent/:empty</h3><div class="left"><div class="aaron"><a>:parent</a></div><div class="aaron"><a>:parent</a></div><div class="aaron"><a>:parent</a></div><div class="aaron"><a></a></div></div><script type="text/javascript">//選擇所有a元素，找到對(duì)應(yīng)的父元素//增加一個(gè)藍(lán)色的邊框$("a:parent").css("border", "3px groove blue");</script><script type="text/javascript">//找到a元素下面的所有空節(jié)點(diǎn)(沒(méi)有子元素)//增加一段文本與邊框$("a:empty").text(":empty").css("border", "3px groove red"); </script></body></html>

執(zhí)行結(jié)果如下：

總結(jié)

以上是生活随笔為你收集整理的JQuery筛选选择器之内容筛选的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。