jquery 層次選擇器siblings與nextAll的區(qū)別介紹
更新時(shí)間：2013年08月02日 18:14:05 作者：
jquery 層次選擇器包括siblings與nextAll，本文為大家介紹下具體的使用方法，想學(xué)習(xí)的朋也可以參考下，希望對(duì)大家有所幫助
HTML代碼：
<div>
<div >1</div>
<div class="one">
2
<div>2_1
<div>2_1_1</div>
</div>
<div>2_2</div>
</div>
<div>3</div>
<div>4</div>
</div>
$(".one div").css("background","red") // .one之后所有DIV后代元素（后代：包括兒子和孫子.....）
$(".one > div").css("background","red") // .one之后的子元素。（子：兒子和女兒....）
$(".one + div").css("background","red") // .one之后相鄰的元素。就是緊靠.one之后的兄弟元素。只有一個(gè)
$(".one").next().css("background","red") // 這個(gè)作用同上
$(".one ~ div").css("background","red") //.one之后的兄弟元素。不包括前面的
$(".one").nextAll().css("background","red") //作用同上
$(".one").siblings().css("background","red") // .one所有的兄弟元素，不管是后面的還是前面的。
復(fù)制代碼 代碼如下:
<div>
<div >1</div>
<div class="one">
2
<div>2_1
<div>2_1_1</div>
</div>
<div>2_2</div>
</div>
<div>3</div>
<div>4</div>
</div>
$(".one div").css("background","red") // .one之后所有DIV后代元素（后代：包括兒子和孫子.....）
$(".one > div").css("background","red") // .one之后的子元素。（子：兒子和女兒....）
$(".one + div").css("background","red") // .one之后相鄰的元素。就是緊靠.one之后的兄弟元素。只有一個(gè)
$(".one").next().css("background","red") // 這個(gè)作用同上
$(".one ~ div").css("background","red") //.one之后的兄弟元素。不包括前面的
$(".one").nextAll().css("background","red") //作用同上
$(".one").siblings().css("background","red") // .one所有的兄弟元素，不管是后面的還是前面的。
您可能感興趣的文章:
- jQuery prev ~ siblings選擇器使用介紹
- 使用jquery選擇器如何獲取父級(jí)元素、同級(jí)元素、子元素
- jquery選擇器之屬性過(guò)濾選擇器詳解
- JQuery 選擇器、過(guò)濾器介紹
- jquery選擇器排除某個(gè)DOM元素的方法（實(shí)例演示）
- jQuery Selector選擇器小結(jié)
- JQuery中$之選擇器用法介紹
- jquery選擇器-根據(jù)多個(gè)屬性選擇示例代碼
- jQuery中的類(lèi)名選擇器（.class）用法簡(jiǎn)單示例
- jQuery選擇器全集詳解
- jquery選擇器大全 全面詳解jquery選擇器
- jQuery 選擇器用法實(shí)例分析【prev + next】
相關(guān)文章
這篇文章主要介紹了jquery控制表單輸入框顯示默認(rèn)值的方法,可實(shí)現(xiàn)輸入框出現(xiàn)出現(xiàn)默認(rèn)值的效果,需要的朋友可以參考下2015-05-05
下面小編就為大家?guī)?lái)一篇基于JQuery的Ajax方法使用詳解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
jquery實(shí)現(xiàn)select選擇框內(nèi)容左右移動(dòng)代碼分享
這篇文章主要介紹了jquery實(shí)現(xiàn)select選擇框內(nèi)容左右移動(dòng)代碼，感興趣的小伙伴們可以參考一下2015-11-11
jquery 取子節(jié)點(diǎn)及當(dāng)前節(jié)點(diǎn)屬性值
本節(jié)主要介紹了jquery如何取子節(jié)點(diǎn)及當(dāng)前節(jié)點(diǎn)屬性值,需要的朋友可以參考下2014-07-07
Jquery獲取第一個(gè)子元素簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇Jquery獲取第一個(gè)子元素簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
jQuery的load()方法及其回調(diào)函數(shù)用法實(shí)例
這篇文章主要介紹了jQuery的load()方法及其回調(diào)函數(shù)用法,實(shí)例分析了load方法的簡(jiǎn)單使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
本篇文章主要是對(duì)jquery彈出層居中效果的簡(jiǎn)單實(shí)例進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-03-03
jquery判斷單個(gè)復(fù)選框是否被選中的代碼，需要的朋友可以參考下。2009-09-09
實(shí)例詳解jQuery的無(wú)new構(gòu)建
這篇文章運(yùn)用實(shí)例介紹了jQuery的無(wú)new構(gòu)建，小編感覺(jué)介紹的非常詳細(xì)，具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧。2016-08-08
jquery實(shí)現(xiàn)走馬燈特效實(shí)例(撲克牌切換效果）
本文主要介紹了jquery實(shí)現(xiàn)走馬燈特效實(shí)例(撲克牌切換效果），文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02