jQuery內容過濾選擇器與子元素過濾選擇器用法實例分析


jQuery選擇器內容過濾

一、:contains(text)

選擇器::contains(text)
描述:匹配包含給定文本的元素
返回值:元素集合

示例:

?
1
2
$( "div.mini:contains('div')" )
//div.mini是DOM元素集合,:contains('div')是過濾條件

二、:has(selector)

選擇器::has(selector)
描述:匹配含有選擇器所匹配的元素的元素
返回值:元素集合

示例:

?
1
2
$( "div.mini:has(p)" )
//div.mini是DOM元素集合,:has(p)是過濾條件

三、:empty

選擇器::empty
描述:匹配所有不包含子元素或者文本的空元素
返回值:元素集合

示例:

?
1
2
$( "div.item:empty" )
//div.item是DON元素集合,:empty是過濾條件

四、:parent

選擇器::parent
描述:匹配含有子元素或者文本的元素
返回值:元素集合

示例:

?
1
2
$( "div.item:parent" )
//div.item是DOM元素集合,:parent是過濾條件

jQuery子元素過濾選擇器

一、:first-child

選擇器::first-child
描述:匹配第一個子元素
返回值:元素集合

示例:

?
1
2
3
4
$( "div.mini:first-child" ) //如果div.mini是某元素的第一個子元素,那么選中此div.mini
$( "div.mini :first-child" ) //如果**div.mini**的后代元素A是某元素的第一個子元素,那么選中此后代元素A
$( "div.mini span:first-child" ) //如果**div.mini**的span后代元素A是某元素的第一個子元素,那么選中此**span后代元素A**
$( "div.mini span :first-child" ) //如果**div.mini的span后代元素**的后代元素A是某元素的第一個子元素,那么選中此后代元素A

二、:last-child

選擇器::last-child
描述:匹配最后一個子元素
返回值:元素集合

示例:

?
1
2
3
4
$( "div.mini:last-child" ) //如果div.mini是某元素的最后一個子元素,那么選中此div.mini
$( "div.mini :last-child" ) //如果**div.mini**的后代元素A是某元素的最后一個子元素,那么選中此后代元素A
$( "div.mini span:last-child" ) //如果**div.mini**的span后代元素A是某元素的最后一個子元素,那么選中此**span后代元素A**
$( "div.mini span :last-child" ) //如果**div.mini的span后代元素**的后代元素A是某元素的最后一個子元素,那么選中此后代元素A

三、:only-child

選擇器::only-child
描述:如果某元素A是其父元素中唯一的子元素,那么A將會被匹配
返回值:單個元素

示例:

?
1
2
3
4
$( "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開始)
描述:匹配包含給定文本的元素
返回值:元素集合

示例:

?
1
2
3
4
$( "div.mini:nth-child(1)" ) //如果div.mini是某元素的**第一個**子元素,那么選中此div.mini
$( "div.mini :nth-child(1)" ) //如果**div.mini**的后代元素A是某元素的**第一個**子元素,那么選中此后代元素A
$( "div.mini span:nth-child(1)" ) //如果**div.mini**的span后代元素A是某元素的**第一個**子元素,那么選中此**span后代元素A**
$( "div.mini span :nth-child(1)" ) //如果**div.mini的span后代元素**的后代元素A是某元素的**第一個**子元素,那么選中此后代元素A

:nth-child()的索引值除了具體數字值為還可以是表達式:

?
1
2
3
4
5
:nth-child(even)
:nth-child(odd)
:nth-child(3n)
:nth-child(3n+1)
:nth-child(3n+2)


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM