jquery next nextAll nextUntil siblings的區(qū)別介紹
更新時(shí)間：2013年10月05日 17:19:38 作者：
在本文為大家詳細(xì)介紹下jquery next nextAll nextUntil siblings的區(qū)別，感興趣的朋友可以參考下
next：緊挨著$('')的一個(gè)元素
nextAll：在$('')以后的所有的同輩元素
nextUntil：until有直到。。。之前的意思，所以他表示$('')以后的所有的同輩元素，不過(guò)要在nextUntil參數(shù)之前，不包括匹配的元素本身
sibings:$('')前后的所有同輩元素
簡(jiǎn)單理解就是，next就是找他的弟弟/妹妹，nextAll就是找他所有的弟弟/妹妹，nextUntil就是找比他小一定年齡的弟弟/妹妹，siblings就是找他所有的哥哥/姐姐，還有他的所有的弟弟/妹妹。所以同理的同輩關(guān)系，prev，prevAll ，prevUntil
下面是簡(jiǎn)單的測(cè)試代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.min.js'></script>
</head>
<body>
<div class="first">
<a href="#">hhh</a>
<h1>這是一個(gè)標(biāo)題</h1>
<p>這是一個(gè)test</p>
<p>這是一個(gè)test</p>
<p>這是一個(gè)test</p>
<p>這是一個(gè)test</p>
<div>hhha</div>
<p>這是一個(gè)test</p>
<p>這是一個(gè)test</p>
</div>
<script>
$(function(){
//$('p:first').next().css('background','red');
//$('p:first').nextAll().css('background','yellow');
//$('p:first').nextUntil('div').css({'font-size':20,background:'red'});
//$('p:first').siblings().css('background','yellow');
});
</script>
</body>
</html>
nextAll：在$('')以后的所有的同輩元素
nextUntil：until有直到。。。之前的意思，所以他表示$('')以后的所有的同輩元素，不過(guò)要在nextUntil參數(shù)之前，不包括匹配的元素本身
sibings:$('')前后的所有同輩元素
簡(jiǎn)單理解就是，next就是找他的弟弟/妹妹，nextAll就是找他所有的弟弟/妹妹，nextUntil就是找比他小一定年齡的弟弟/妹妹，siblings就是找他所有的哥哥/姐姐，還有他的所有的弟弟/妹妹。所以同理的同輩關(guān)系，prev，prevAll ，prevUntil
下面是簡(jiǎn)單的測(cè)試代碼
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.min.js'></script>
</head>
<body>
<div class="first">
<a href="#">hhh</a>
<h1>這是一個(gè)標(biāo)題</h1>
<p>這是一個(gè)test</p>
<p>這是一個(gè)test</p>
<p>這是一個(gè)test</p>
<p>這是一個(gè)test</p>
<div>hhha</div>
<p>這是一個(gè)test</p>
<p>這是一個(gè)test</p>
</div>
<script>
$(function(){
//$('p:first').next().css('background','red');
//$('p:first').nextAll().css('background','yellow');
//$('p:first').nextUntil('div').css({'font-size':20,background:'red'});
//$('p:first').siblings().css('background','yellow');
});
</script>
</body>
</html>
您可能感興趣的文章:
- jquery siblings獲取同輩元素用法實(shí)例分析
- jQuery中的siblings()是什么意思(推薦)
- 淺談jquery中next與siblings的區(qū)別
- 有關(guān)jQuery中parent()和siblings()的小問(wèn)題
- jQuery siblings()用法實(shí)例詳解
- jquery遍歷函數(shù)siblings()用法實(shí)例
- jQuery中的siblings用法實(shí)例分析
- jQuery中siblings()方法用法實(shí)例
- jQuery prev ~ siblings選擇器使用介紹
- jquery 層次選擇器siblings與nextAll的區(qū)別介紹
- 仿jQuery的siblings效果的js代碼
- jQuery使用siblings獲取某元素所有同輩(兄弟姐妹)元素用法示例
相關(guān)文章
jquery 可拖拽的窗體控件實(shí)現(xiàn)代碼
這個(gè)是一個(gè)讓DOM元素可以拖拽的控件，代碼很簡(jiǎn)單，我也是新手，不知道有沒(méi)有BUG，自己測(cè)試還行，希望大家發(fā)現(xiàn)BUG，踴躍提出，謝謝。這個(gè)是基于JQUERY開(kāi)發(fā)的2010-03-03
這篇文章主要介紹了JQuery顯示隱藏頁(yè)面元素的方法總結(jié),本文分別講解了show()、hide()、toggle()、slideDown()、css()5種控制顯示隱藏某個(gè)DIV或P標(biāo)簽等頁(yè)面元素的方法,需要的朋友可以參考下2015-04-04
基于JQuery實(shí)現(xiàn)的圖片自動(dòng)進(jìn)行縮放和裁剪處理
頁(yè)面加載后，對(duì)不合比例的圖片自動(dòng)進(jìn)行縮放和裁剪處理，兼容圖像已在緩存或不在緩存的情況，基于JQuery2014-01-01
淺析jquery如何判斷滾動(dòng)條滾到頁(yè)面底部并執(zhí)行事件
jquery如何判斷滾動(dòng)條滾到頁(yè)面底部并執(zhí)行事件？下面小編就為大家?guī)?lái)一篇jquery判斷滾動(dòng)條滾到頁(yè)面底部并執(zhí)行事件方法。希望對(duì)大家有所幫助，一起跟隨小編過(guò)來(lái)看看吧2016-04-04
這篇文章主要為大家詳細(xì)介紹了jQuery焦點(diǎn)圖左右轉(zhuǎn)換效果,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
Jsonp(JSON with Padding) 是 json 的一種"使用模式"，可以讓網(wǎng)頁(yè)從別的域名（網(wǎng)站）那獲取資料，即跨域讀取數(shù)據(jù)，本文給大家簡(jiǎn)單介紹jsonp 使用小結(jié) ，需要的朋友參考下2016-01-01
jquery實(shí)現(xiàn)文本框鼠標(biāo)右擊無(wú)效以及不能輸入的代碼
jquery實(shí)現(xiàn)文本框鼠標(biāo)右擊無(wú)效以及不能輸入的實(shí)現(xiàn)方法，需要的朋友可以參考下。2010-11-11
淺談jquery點(diǎn)擊label觸發(fā)2次的問(wèn)題
下面小編就為大家?guī)?lái)一篇淺談jquery點(diǎn)擊label觸發(fā)2次的問(wèn)題。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
jquery實(shí)現(xiàn)點(diǎn)擊向下展開(kāi)菜單項(xiàng)(伸縮導(dǎo)航)效果
這篇文章主要介紹了jquery實(shí)現(xiàn)點(diǎn)擊向下展開(kāi)菜單項(xiàng)(伸縮導(dǎo)航)效果,通過(guò)jquery遍歷及匹配頁(yè)面元素并動(dòng)態(tài)修改頁(yè)面元素樣式實(shí)現(xiàn)該功能,需要的朋友可以參考下2015-08-08
本文主要對(duì)jquery中的each用法進(jìn)行介紹，相信會(huì)對(duì)大家學(xué)習(xí)each方法會(huì)很有幫助，下面就跟小編一起來(lái)看下吧2016-12-12