jquery選擇器之內(nèi)容過(guò)濾選擇器詳解
更新時(shí)間：2014年01月27日 09:35:25 作者：
本篇文章主要是對(duì)jquery選擇器之內(nèi)容過(guò)濾選擇器進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
先寫出DOM元素的HTML結(jié)構(gòu)：
<style type="text/css">
/*高亮顯示*/
.highlight{
background-color: gray
}
</style>
<div>John Resign</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J.Ohn</div>
<div></div>
<p></p>
<div><p>Has p</p></div>
一、:contains(text)
選取含有文本內(nèi)容為“text”的元素
$("div:contains('John')").addClass("highlight"); //查找所有包含 "John" 的 div 元素
二、:empty
選取不含任何子元素或文本的空元素
用chrome瀏覽器審查元素可發(fā)現(xiàn)div為empty 的class樣式已改變
$("div:empty").addClass("highlight");
三、:has(selector)
選取含有選擇器所匹配的元素的元素
$("div:has(p)").addClass("highlight"); //查找所有包含p的div元素
四、:parent
選取含有子元素或者文本的元素標(biāo)簽
$("div:parent").addClass("highlight"); //查找所有含有子元素或者文本的div元素
復(fù)制代碼 代碼如下:
<style type="text/css">
/*高亮顯示*/
.highlight{
background-color: gray
}
</style>
復(fù)制代碼 代碼如下:
<div>John Resign</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J.Ohn</div>
<div></div>
<p></p>
<div><p>Has p</p></div>
一、:contains(text)
選取含有文本內(nèi)容為“text”的元素
復(fù)制代碼 代碼如下:
$("div:contains('John')").addClass("highlight"); //查找所有包含 "John" 的 div 元素
二、:empty
選取不含任何子元素或文本的空元素
用chrome瀏覽器審查元素可發(fā)現(xiàn)div為empty 的class樣式已改變
復(fù)制代碼 代碼如下:
$("div:empty").addClass("highlight");
三、:has(selector)
選取含有選擇器所匹配的元素的元素
復(fù)制代碼 代碼如下:
$("div:has(p)").addClass("highlight"); //查找所有包含p的div元素
四、:parent
選取含有子元素或者文本的元素標(biāo)簽
復(fù)制代碼 代碼如下:
$("div:parent").addClass("highlight"); //查找所有含有子元素或者文本的div元素
您可能感興趣的文章:
- 使用jQuery內(nèi)容過(guò)濾選擇器選擇元素實(shí)例講解
- jQuery的內(nèi)容過(guò)濾選擇器學(xué)習(xí)教程
- jQuery內(nèi)容過(guò)濾選擇器用法示例
- jQuery內(nèi)容過(guò)濾選擇器與子元素過(guò)濾選擇器用法實(shí)例分析
- jQuery表單對(duì)象屬性過(guò)濾選擇器實(shí)例詳解
- jQuery選擇器之表單元素選擇器詳解
- jQuery表單域選擇器用法分析
- jquery表單對(duì)象屬性過(guò)濾選擇器實(shí)例分析
- jQuery表單元素選擇器代碼實(shí)例
- jQuery表單元素過(guò)濾選擇器用法實(shí)例分析
- jQuery內(nèi)容選擇器與表單選擇器實(shí)例分析
相關(guān)文章
jQuery checkbox全選/取消全選實(shí)現(xiàn)代碼
用JavaScript使頁(yè)面上的一組checkbox全選/取消全選，邏輯很簡(jiǎn)單，實(shí)現(xiàn)代碼也沒(méi)有太難的語(yǔ)法。但使用jQuery實(shí)現(xiàn)則更簡(jiǎn)單，代碼也很簡(jiǎn)潔，精辟！2009-11-11
這篇文章主要介紹了jQuery驗(yàn)證元素是否為空的兩種常用方法,實(shí)例分析了兩種常用的判斷為空技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-03-03
這篇文章主要介紹了jQuery判斷一個(gè)元素是否可見的方法,涉及jQuery鏈?zhǔn)讲僮骷皹邮脚卸ǖ募记?需要的朋友可以參考下2015-06-06
從零開始學(xué)習(xí)jQuery (三) 管理jQuery包裝集
在使用jQuery選擇器獲取到j(luò)Query包裝集后, 我們需要對(duì)其進(jìn)行操作. 本章首先講解如何動(dòng)態(tài)的創(chuàng)建元素, 接著學(xué)習(xí)如何管理jQuery包裝集, 比如添加,刪除,切片等.2011-02-02
使用FlexiGrid實(shí)現(xiàn)Extjs表格效果方法分享
這篇文章主要分享了使用FlexiGrid實(shí)現(xiàn)Extjs表格效果方法，非常的實(shí)用，這里推薦給有相同需求的小伙伴2014-12-12
使用jQuery實(shí)現(xiàn)dropdownlist的聯(lián)動(dòng)效果(sharepoint 2007)
在sharepoint 2007網(wǎng)站中，使用jQuery實(shí)現(xiàn)dropdownlist的聯(lián)動(dòng)效果.2011-03-03
JQuery jsonp 使用示例，想學(xué)習(xí)的朋友可以參考下。2009-08-08
jQuery實(shí)現(xiàn)導(dǎo)航欄頭部菜單項(xiàng)點(diǎn)擊后變換顏色的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)導(dǎo)航欄頭部菜單項(xiàng)點(diǎn)擊后變換顏色的方法,涉及jQuery響應(yīng)鼠標(biāo)事件針對(duì)頁(yè)面元素的遍歷及屬性變換相關(guān)操作技巧,需要的朋友可以參考下2017-07-07
jQuery登陸判斷簡(jiǎn)單實(shí)現(xiàn)代碼
登陸判斷在實(shí)際應(yīng)用中還是比較常見，在客戶端執(zhí)行判斷可以減少服務(wù)器端的負(fù)擔(dān)，感興趣的朋友可以參考下2013-04-04
jquery插件splitScren實(shí)現(xiàn)頁(yè)面分屏切換模板特效
這篇文章主要介紹了jquery插件splitScren實(shí)現(xiàn)頁(yè)面分屏切換模板特效的相關(guān)資料,需要的朋友可以參考下2015-06-06