jquery選擇器之內(nèi)容過濾選擇器詳解
更新時間:2014年01月27日 09:35:25 作者:
本篇文章主要是對jquery選擇器之內(nèi)容過濾選擇器進(jìn)行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助
先寫出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元素

相關(guān)文章
jQuery checkbox全選/取消全選實現(xiàn)代碼
用JavaScript使頁面上的一組checkbox全選/取消全選,邏輯很簡單,實現(xiàn)代碼也沒有太難的語法。但使用jQuery實現(xiàn)則更簡單,代碼也很簡潔,精辟!2009-11-11從零開始學(xué)習(xí)jQuery (三) 管理jQuery包裝集
在使用jQuery選擇器獲取到j(luò)Query包裝集后, 我們需要對其進(jìn)行操作. 本章首先講解如何動態(tài)的創(chuàng)建元素, 接著學(xué)習(xí)如何管理jQuery包裝集, 比如添加,刪除,切片等.2011-02-02使用FlexiGrid實現(xiàn)Extjs表格效果方法分享
這篇文章主要分享了使用FlexiGrid實現(xiàn)Extjs表格效果方法,非常的實用,這里推薦給有相同需求的小伙伴2014-12-12使用jQuery實現(xiàn)dropdownlist的聯(lián)動效果(sharepoint 2007)
在sharepoint 2007網(wǎng)站中,使用jQuery實現(xiàn)dropdownlist的聯(lián)動效果.2011-03-03jQuery實現(xiàn)導(dǎo)航欄頭部菜單項點(diǎn)擊后變換顏色的方法
這篇文章主要介紹了jQuery實現(xiàn)導(dǎo)航欄頭部菜單項點(diǎn)擊后變換顏色的方法,涉及jQuery響應(yīng)鼠標(biāo)事件針對頁面元素的遍歷及屬性變換相關(guān)操作技巧,需要的朋友可以參考下2017-07-07jquery插件splitScren實現(xiàn)頁面分屏切換模板特效
這篇文章主要介紹了jquery插件splitScren實現(xiàn)頁面分屏切換模板特效的相關(guān)資料,需要的朋友可以參考下2015-06-06