jQuery內(nèi)容過濾選擇器與子元素過濾選擇器用法實(shí)例分析
本文實(shí)例講述了jQuery內(nèi)容過濾選擇器與子元素過濾選擇器用法。分享給大家供大家參考，具體如下：
jQuery的內(nèi)容過濾選擇器
一、:contains(text)
選擇器：:contains(text)
描述：匹配包含給定文本的元素
返回值：元素集合
示例：
$("div.mini:contains('div')")
//div.mini是DOM元素集合，:contains('div')是過濾條件
二、:has(selector)
選擇器：:has(selector)
描述：匹配含有選擇器所匹配的元素的元素
返回值：元素集合
示例：
$("div.mini:has(p)")
//div.mini是DOM元素集合，:has(p)是過濾條件
三、:empty
選擇器：:empty
描述：匹配所有不包含子元素或者文本的空元素
返回值：元素集合
示例：
$("div.item:empty")
//div.item是DON元素集合，:empty是過濾條件
四、:parent
選擇器：:parent
描述：匹配含有子元素或者文本的元素
返回值：元素集合
示例：
$("div.item:parent")
//div.item是DOM元素集合，:parent是過濾條件
jQuery子元素過濾選擇器
一、:first-child
選擇器：:first-child
描述：匹配第一個(gè)子元素
返回值：元素集合
示例：
$("div.mini:first-child")//如果div.mini是某元素的第一個(gè)子元素，那么選中此div.mini
$("div.mini :first-child")//如果**div.mini**的后代元素A是某元素的第一個(gè)子元素，那么選中此后代元素A
$("div.mini span:first-child")//如果**div.mini**的span后代元素A是某元素的第一個(gè)子元素，那么選中此**span后代元素A**
$("div.mini span :first-child")//如果**div.mini的span后代元素**的后代元素A是某元素的第一個(gè)子元素，那么選中此后代元素A
二、:last-child
選擇器：:last-child
描述：匹配最后一個(gè)子元素
返回值：元素集合
示例：
$("div.mini:last-child")//如果div.mini是某元素的最后一個(gè)子元素，那么選中此div.mini
$("div.mini :last-child")//如果**div.mini**的后代元素A是某元素的最后一個(gè)子元素，那么選中此后代元素A
$("div.mini span:last-child")//如果**div.mini**的span后代元素A是某元素的最后一個(gè)子元素，那么選中此**span后代元素A**
$("div.mini span :last-child")//如果**div.mini的span后代元素**的后代元素A是某元素的最后一個(gè)子元素，那么選中此后代元素A
三、:only-child
選擇器：:only-child
描述：如果某元素A是其父元素中唯一的子元素，那么A將會被匹配
返回值：單個(gè)元素
示例：
$("div.mini:only-child")//如果div.mini是某元素唯一的子元素，那么選中此div.mini
$("div.mini :only-child")//如果**div.mini**的后代元素A是某元素唯一的子元素，那么選中此后代元素A
$("div.mini span:only-child")//如果**div.mini**的span后代元素A是某元素唯一的子元素，那么選中此**span后代元素A**
$("div.mini span :only-child")//如果**div.mini的span后代元素**的后代元素A是某元素唯一的子元素，那么選中此后代元素A
四、:nth-child
選擇器：:nth-child（:eq()索引從0開始，:nth-child()索引從1開始）
描述：匹配包含給定文本的元素
返回值：元素集合
示例：
$("div.mini:nth-child(1)")//如果div.mini是某元素的**第一個(gè)**子元素，那么選中此div.mini
$("div.mini :nth-child(1)")//如果**div.mini**的后代元素A是某元素的**第一個(gè)**子元素，那么選中此后代元素A
$("div.mini span:nth-child(1)")//如果**div.mini**的span后代元素A是某元素的**第一個(gè)**子元素，那么選中此**span后代元素A**
$("div.mini span :nth-child(1)")//如果**div.mini的span后代元素**的后代元素A是某元素的**第一個(gè)**子元素，那么選中此后代元素A
:nth-child()的索引值除了具體數(shù)字值為還可以是表達(dá)式：
:nth-child(even) :nth-child(odd) :nth-child(3n) :nth-child(3n+1) :nth-child(3n+2)
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery頁面元素操作技巧匯總》、《jQuery常見事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計(jì)有所幫助。
相關(guān)文章
SpringMVC框架下JQuery傳遞并解析Json格式的數(shù)據(jù)是如何實(shí)現(xiàn)的
json作為一種輕量級的數(shù)據(jù)交換格式，在前后臺數(shù)據(jù)交換中占據(jù)著非常重要的地位。Json的語法非常簡單，采用的是鍵值對表示形式,本文給大家介紹SpringMVC框架下JQuery傳遞并解析Json格式的數(shù)據(jù)是如何實(shí)現(xiàn)的，對spring mvc ajax json相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2015-12-12
這篇文章主要介紹了jQuery判斷checkbox是否選中的3種方法,本文中的方法使用ID選擇器實(shí)現(xiàn),比網(wǎng)上其它的一些長篇大論的文章更加簡練,需要的朋友可以參考下2014-08-08
Juery解決tablesorter中文排序和字符范圍的方法
這篇文章主要介紹了Juery解決tablesorter中文排序和字符范圍的方法,實(shí)例分析了jQuery針對tablesorter中文排序和字符范圍的解決方法,需要的朋友可以參考下2015-05-05
這篇文章主要介紹了jQuery使用之處理頁面元素用法,實(shí)例分析了jQuery針對元素的內(nèi)容、復(fù)制、移動和替換等操作技巧,需要的朋友可以參考下2015-01-01
詳解JavaScript中jQuery和Ajax以及JSONP的聯(lián)合使用
這篇文章主要介紹了詳解JavaScript中jQuery和Ajax以及JSONP的聯(lián)合使用,jQuery庫和Ajax異步結(jié)構(gòu)以及JSON數(shù)據(jù)傳輸也是JS日常編程中最常用到的東西,需要的朋友可以參考下2015-08-08
很棒的學(xué)習(xí)jQuery的12個(gè)網(wǎng)站推薦
jQuery是目前最流行的 JavaScript 庫。對于初學(xué)者來說，有的時(shí)候很難找到一個(gè)好的學(xué)習(xí)jQuery的網(wǎng)站，今天本文收集了12個(gè)很棒的 jQuery 學(xué)習(xí)網(wǎng)站推薦給大家。2011-04-04
jQuery實(shí)現(xiàn)的簡單懸浮層功能完整實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的簡單懸浮層功能,結(jié)合完整實(shí)例形式分析了jQuery基于時(shí)間函數(shù)動態(tài)修改css樣式實(shí)現(xiàn)窗口浮動效果的相關(guān)技巧,需要的朋友可以參考下2017-01-01
這篇文章主要介紹了幫助你創(chuàng)建更好的jQuery插件的10條建議,涉及jQuery插件設(shè)計(jì)中常用的技巧,需要的朋友可以參考下2015-05-05
這篇文章主要介紹了jquery讓指定的元素閃爍顯示的方法,涉及jQuery操作css樣式的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-03-03
PHP結(jié)合jQuery實(shí)現(xiàn)的評論頂、踩功能
本文給大家分享的功能是這樣的：你點(diǎn)擊一下頂或踩按鈕，記錄數(shù)值到數(shù)據(jù)庫，并且有顏色的背景跟著變，按照百分比的變化。這樣就可以通過背景顏色一眼就看清楚那邊支持的人比較多。2015-07-07