JQuery筛选选择器之内容筛选
生活随笔
收集整理的這篇文章主要介紹了
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專門為此提供了一組內(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)題。
- 上一篇： 类似墨墨背单词的app
- 下一篇： JQuery选择器中的可见性筛选