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選擇器之屬性過濾選擇器詳解
- JQuery 選擇器、過濾器介紹
- jquery選擇器排除某個(gè)DOM元素的方法（實(shí)例演示）
- jQuery Selector選擇器小結(jié)
- JQuery中$之選擇器用法介紹
- jquery選擇器-根據(jù)多個(gè)屬性選擇示例代碼
- jQuery中的類名選擇器（.class）用法簡單示例
- jQuery選擇器全集詳解
- jquery選擇器大全 全面詳解jquery選擇器
- jQuery 選擇器用法實(shí)例分析【prev + next】
相關(guān)文章
基于jQuery的前端數(shù)據(jù)通用驗(yàn)證庫
做了這么長時(shí)間的開發(fā)，一直因?yàn)轵?yàn)證的問題相當(dāng)?shù)目鄲?，不斷的寫很多重?fù)的代碼，對(duì)想偷懶的我來說是相當(dāng)痛苦的。2011-08-08
jquery的ajax和getJson跨域獲取json數(shù)據(jù)的實(shí)現(xiàn)方法
本篇文章主要是對(duì)jquery的ajax和getJson跨域獲取json數(shù)據(jù)的實(shí)現(xiàn)方法進(jìn)行了介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2014-02-02
jquery實(shí)現(xiàn)tab菜單切換內(nèi)容(精簡版demo)
這篇文章主要為大家介紹了jquery實(shí)現(xiàn)tab菜單切換內(nèi)容的精簡方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10![淺談jQuery中的eq()與DOM中element.[]的區(qū)別](http://img.jbzj.com/images/xgimg/bcimg3.png)
淺談jQuery中的eq()與DOM中element.[]的區(qū)別
下面小編就為大家?guī)硪黄獪\談jQuery中的eq()與DOM中element.[]的區(qū)別。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10
jquery實(shí)現(xiàn)固定頂部導(dǎo)航效果(仿蘑菇街)
蘑菇街導(dǎo)航固定頂部的效果想必大伙有所關(guān)注吧，想實(shí)現(xiàn)吧，本文將帶你走完實(shí)現(xiàn)之旅，接下來的代碼是使用jquery，感興趣的各位可不要錯(cuò)過了哈2013-03-03
本章節(jié)主要介紹了jQuery在HTML中動(dòng)態(tài)插入節(jié)點(diǎn)的各種方法,制作成表格，方便大家對(duì)比學(xué)習(xí)，需要的朋友可以參考下2015-03-03
fancybox1.3.1 基于Jquery的插件在IE中圖片顯示問題
JQuery的彈出窗口插件也很多了，例如Lightbox…這個(gè)我們介紹比較優(yōu)秀的Plugin – Fancybox。2010-10-10
基于jQuery實(shí)現(xiàn)圖片的前進(jìn)與后退功能
前進(jìn)與后退在瀏覽網(wǎng)頁的時(shí)候是比較常見的而且非常的實(shí)用，接下來為大家分享下使用jQuery實(shí)現(xiàn)圖片的前進(jìn)與后退，感興趣的朋友可以參考下哈2013-04-04
在網(wǎng)頁客戶端，我們經(jīng)常會(huì)遇到讀取或者設(shè)置cookie的情況，如果用純生的js我們可能會(huì)遇到一些兼容性帶來的麻煩，這里給大家介紹一個(gè)比較實(shí)用jquery操作cookie的插件2014-01-01
jQuery.ajax 用戶登錄驗(yàn)證代碼，需要的朋友可以參考下。2010-10-10