jquery 層次選擇器siblings與nextAll的區(qū)別介紹
更新時間：2013年08月02日 18:14:05 作者：
jquery 層次選擇器包括siblings與nextAll，本文為大家介紹下具體的使用方法，想學習的朋也可以參考下，希望對大家有所幫助
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之后的兄弟元素。只有一個
$(".one").next().css("background","red") // 這個作用同上
$(".one ~ div").css("background","red") //.one之后的兄弟元素。不包括前面的
$(".one").nextAll().css("background","red") //作用同上
$(".one").siblings().css("background","red") // .one所有的兄弟元素，不管是后面的還是前面的。
復制代碼 代碼如下:
<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之后的兄弟元素。只有一個
$(".one").next().css("background","red") // 這個作用同上
$(".one ~ div").css("background","red") //.one之后的兄弟元素。不包括前面的
$(".one").nextAll().css("background","red") //作用同上
$(".one").siblings().css("background","red") // .one所有的兄弟元素，不管是后面的還是前面的。
相關文章
這篇文章主要介紹了jquery控制表單輸入框顯示默認值的方法,可實現(xiàn)輸入框出現(xiàn)出現(xiàn)默認值的效果,需要的朋友可以參考下2015-05-05
下面小編就為大家?guī)硪黄贘Query的Ajax方法使用詳解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
jquery實現(xiàn)select選擇框內(nèi)容左右移動代碼分享
這篇文章主要介紹了jquery實現(xiàn)select選擇框內(nèi)容左右移動代碼，感興趣的小伙伴們可以參考一下2015-11-11
本節(jié)主要介紹了jquery如何取子節(jié)點及當前節(jié)點屬性值,需要的朋友可以參考下2014-07-07
下面小編就為大家?guī)硪黄狫query獲取第一個子元素簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
jQuery的load()方法及其回調(diào)函數(shù)用法實例
這篇文章主要介紹了jQuery的load()方法及其回調(diào)函數(shù)用法,實例分析了load方法的簡單使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
本篇文章主要是對jquery彈出層居中效果的簡單實例進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-03-03
jquery判斷單個復選框是否被選中的代碼，需要的朋友可以參考下。2009-09-09
這篇文章運用實例介紹了jQuery的無new構建，小編感覺介紹的非常詳細，具有參考借鑒價值，感興趣的朋友一起學習吧。2016-08-08
jquery實現(xiàn)走馬燈特效實例(撲克牌切換效果）
本文主要介紹了jquery實現(xiàn)走馬燈特效實例(撲克牌切換效果），文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02