jquery選擇器之層級(jí)過(guò)濾選擇器詳解
更新時(shí)間:2014年01月27日 09:58:18 作者:
本篇文章主要是對(duì)jquery選擇器之層級(jí)過(guò)濾選擇器進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助
復(fù)制代碼 代碼如下:
$("ancestor descendant"):選取parent元素后所有的child元素
$("parent > child"):選取parent元素后所有的直屬child元素,何謂“直屬”,也就是第一級(jí)的意思了
$("prev + next"):prev和next是兩個(gè)同級(jí)別的元素. 選中在prev元素后面的next元素
$("prev ~ siblings"):選擇prev后面的根據(jù)siblings過(guò)濾的元素。注:siblings是過(guò)濾器
后兩個(gè)用的比較少,一般會(huì)有其他選擇器替代
復(fù)制代碼 代碼如下:
$("prev + next")等價(jià)于next()
$("prev ~ siblings")等價(jià)于nextAll()
實(shí)例:
復(fù)制代碼 代碼如下:
<style type="text/css">
/*高亮顯示*/
.highlight{
background-color: gray
}
</style>
復(fù)制代碼 代碼如下:
<body>
<div>
<p id="p1">第一個(gè)DIV里面的P元素。</p>
</div>
<p id="p2">第一個(gè)單P元素。</p>
<div>
<span>DIV里面的SPAN元素。</span>
<p id="p3">第二個(gè)DIV里面的P元素。</p>
<span>
<p id="p4">DIV里面的SPAN里面的P元素。</p>
</span>
</div>
<table>
<tr>
<th>A</th><th>B</th><th>C</th>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
</table>
<p id="p5">第二個(gè)單P元素。</p>
<span>單SPAN元素。</span>
</body>
復(fù)制代碼 代碼如下:
var s = $("div p").addClass("highlight"); //選取div后面的所有p元素 結(jié)果為:p1,p3,p4

復(fù)制代碼 代碼如下:
var s = $("div > p").addClass("highlight"); //選取div后 所有第一級(jí)p元素 結(jié)果為:p1,p3。p4不會(huì)選取,因?yàn)閜4不是div的直屬元素

復(fù)制代碼 代碼如下:
var s = $("div + p").addClass("highlight"); //選取div后面緊鄰的p元素 結(jié)果為:p2。p5不會(huì)選取,因?yàn)閜5不緊鄰div

復(fù)制代碼 代碼如下:
var s = $("div ~ p").addClass("highlight"); //選取div后面所有緊鄰的p元素 結(jié)果為:p2,p5

您可能感興趣的文章:
- jquery 中多條件選擇器,相對(duì)選擇器,層次選擇器的區(qū)別
- 詳解強(qiáng)大的jQuery選擇器之基本選擇器、層次選擇器
- jQuery層次選擇器選擇元素使用介紹
- Jquery中的層次選擇器與find()的區(qū)別示例介紹
- jquery 層次選擇器siblings與nextAll的區(qū)別介紹
- jquery層級(jí)選擇器的實(shí)現(xiàn)(匹配后代元素div)
- jQuery選擇器之基本選擇器與層次選擇器
- JQuery中層次選擇器用法實(shí)例詳解
- jQuery層次選擇器用法示例
- jQuery基本選擇器和層次選擇器學(xué)習(xí)使用
- jQuery入門(mén)之層次選擇器實(shí)例簡(jiǎn)析
- jQuery層疊選擇器用法實(shí)例分析
相關(guān)文章
jQuery移動(dòng)端跑馬燈抽獎(jiǎng)特效升級(jí)版(抽獎(jiǎng)概率固定)實(shí)現(xiàn)方法
這篇文章主要介紹了jQuery移動(dòng)端跑馬燈抽獎(jiǎng)特效升級(jí)版(抽獎(jiǎng)概率固定)實(shí)現(xiàn)方法,涉及jQuery數(shù)值運(yùn)算及條件判斷等相關(guān)操作技巧,需要的朋友可以參考下2019-01-01ASP.NET jQuery 實(shí)例9 通過(guò)控件hyperlink實(shí)現(xiàn)返回頂部效果
ASP.NET jQuery 實(shí)例9 通過(guò)控件hyperlink實(shí)現(xiàn)返回頂部效果的實(shí)現(xiàn)代碼,需要的朋友可以參考下2012-02-02jQuery里filter()函數(shù)與find()函數(shù)用法分析
這篇文章主要介紹了jQuery里filter()函數(shù)與find()函數(shù)用法,實(shí)例對(duì)比分析了filter()函數(shù)與find()函數(shù)的功能與相關(guān)使用技巧,需要的朋友可以參考下2015-06-06詳談jQuery unbind 刪除綁定事件 / 移除標(biāo)簽方法
下面小編就為大家?guī)?lái)一篇詳談jQuery unbind 刪除綁定事件 / 移除標(biāo)簽方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-03-03使用jQuery實(shí)現(xiàn)Web頁(yè)面換膚功能的要點(diǎn)解析
網(wǎng)頁(yè)換膚的實(shí)質(zhì)就是切換CSS樣式,關(guān)鍵是給用戶做出點(diǎn)擊切換的功能以及換膚完成之后的緩存記錄功能,下面我們就來(lái)看一下使用jQuery實(shí)現(xiàn)Web頁(yè)面換膚功能的要點(diǎn)解析:2016-05-05