jquery 層次選擇器siblings與nextAll的區(qū)別介紹
更新時間:2013年08月02日 18:14:05 作者:
jquery 層次選擇器包括siblings與nextAll,本文為大家介紹下具體的使用方法,想學(xué)習(xí)的朋也可以參考下,希望對大家有所幫助
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所有的兄弟元素,不管是后面的還是前面的。
復(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之后的兄弟元素。只有一個
$(".one").next().css("background","red") // 這個作用同上
$(".one ~ div").css("background","red") //.one之后的兄弟元素。不包括前面的
$(".one").nextAll().css("background","red") //作用同上
$(".one").siblings().css("background","red") // .one所有的兄弟元素,不管是后面的還是前面的。
相關(guān)文章
jquery的ajax和getJson跨域獲取json數(shù)據(jù)的實現(xiàn)方法
本篇文章主要是對jquery的ajax和getJson跨域獲取json數(shù)據(jù)的實現(xiàn)方法進行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-02-02jquery實現(xiàn)tab菜單切換內(nèi)容(精簡版demo)
這篇文章主要為大家介紹了jquery實現(xiàn)tab菜單切換內(nèi)容的精簡方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-10-10淺談jQuery中的eq()與DOM中element.[]的區(qū)別
下面小編就為大家?guī)硪黄獪\談jQuery中的eq()與DOM中element.[]的區(qū)別。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-10-10jquery實現(xiàn)固定頂部導(dǎo)航效果(仿蘑菇街)
蘑菇街導(dǎo)航固定頂部的效果想必大伙有所關(guān)注吧,想實現(xiàn)吧,本文將帶你走完實現(xiàn)之旅,接下來的代碼是使用jquery,感興趣的各位可不要錯過了哈2013-03-03fancybox1.3.1 基于Jquery的插件在IE中圖片顯示問題
JQuery的彈出窗口插件也很多了,例如Lightbox…這個我們介紹比較優(yōu)秀的Plugin – Fancybox。2010-10-10