jquery選擇器之內(nèi)容過濾選擇器詳解
更新時(shí)間：2014年01月27日 09:35:25 作者：
本篇文章主要是對(duì)jquery選擇器之內(nèi)容過濾選擇器進(jìn)行了介紹，需要的朋友可以過來參考下，希望對(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)容過濾選擇器選擇元素實(shí)例講解
- jQuery的內(nèi)容過濾選擇器學(xué)習(xí)教程
- jQuery內(nèi)容過濾選擇器用法示例
- jQuery內(nèi)容過濾選擇器與子元素過濾選擇器用法實(shí)例分析
- jQuery表單對(duì)象屬性過濾選擇器實(shí)例詳解
- jQuery選擇器之表單元素選擇器詳解
- jQuery表單域選擇器用法分析
- jquery表單對(duì)象屬性過濾選擇器實(shí)例分析
- jQuery表單元素選擇器代碼實(shí)例
- jQuery表單元素過濾選擇器用法實(shí)例分析
- jQuery內(nèi)容選擇器與表單選擇器實(shí)例分析
相關(guān)文章
花了幾個(gè)小時(shí)用jqury寫的分頁效果實(shí)現(xiàn)，功能基本實(shí)現(xiàn)需要再封裝下 呵呵～～2009-11-11
使用jquery.upload.js實(shí)現(xiàn)異步上傳示例代碼
這篇文章主要介紹了使用jquery.upload.js實(shí)現(xiàn)異步上傳的示例代碼,需要的朋友可以參考下2014-07-07
在jquery是遍歷篩選數(shù)組有多種方法與函數(shù)了，包括有:grep、each、inArray、map同時(shí)也要以遍歷json對(duì)象哦，下面給各位同學(xué)介紹一下具體的操作方法2013-11-11
這篇文章主要介紹了JQuery中的AJAX，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-05-05
花N長(zhǎng)時(shí)間積累的Jquery插件，希望大家喜歡。大家還有什么新的插件，請(qǐng)留言，我們一并收錄。感謝大家的支持。2011-05-05
Jquery下的26個(gè)實(shí)用小技巧(jQuery tips, tricks & solutions)
前段時(shí)間發(fā)布了Jquery類庫1.4版本，使用者也越來越多，為了方便大家對(duì)Jquery的使用，下面列出了一些Jquery使用技巧。2010-03-03
jQuery如何將選中的對(duì)象轉(zhuǎn)化為原始的DOM對(duì)象
在一個(gè)頁面上選擇元素返回的集合是jQuery對(duì)象而不是原始的DOM對(duì)象，那么如何將其轉(zhuǎn)為DOM對(duì)象呢？下面有個(gè)不錯(cuò)的方法，大家可以嘗試操作下2014-06-06
用自定義圖片代替原生checkbox實(shí)現(xiàn)全選,刪除以及提交的方法
下面小編就為大家?guī)硪黄米远x圖片代替原生checkbox實(shí)現(xiàn)全選,刪除以及提交的方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10
JQuery UI的拖拽功能實(shí)現(xiàn)方法小結(jié)
JQuery UI是JQuery官方支持的WebUI 代碼庫，包含底層交互、動(dòng)畫、特效等API，并且封裝了一些Web小部件（Widget）。同時(shí)，JQuery UI繼承了jquery的插件支持，有大量的第三方插件可以豐富JQuery UI的功能2012-03-03
jquery 學(xué)習(xí)之二 屬性(html()與html(val))
取得第一個(gè)匹配元素的html內(nèi)容。這個(gè)函數(shù)不能用于XML文檔。但可以用于XHTML文檔。2010-11-11