jQuery選擇器之層次選擇器用法實(shí)例分析
本文實(shí)例講述了jQuery選擇器之層次選擇器用法。分享給大家供大家參考，具體如下：
前面一篇介紹了幾種基本的jQuery選擇器，今天歸納一下jQuery的層次選擇器。DOM元素之間的層次關(guān)系主要包括元素的子元素、后代元素、相鄰元素和兄弟元素等，我們可以通過DOM元素之間的層次關(guān)系來獲取想要的元素。為了更好的學(xué)習(xí)，我們先列出一段HTML代碼：
<body>
<div id="one" class="aaa">
id=one，class=aaa的div
<br />
<div class="mini">class=mini</div>
</div>
<div id="two" class="aaa">
id=two，class=aaa的div
<br />
<div class="mini">class=mini的div</div>
<div class="mini">class=mini的div</div>
</div>
<div class="bbb">
class=bbb的div
<div class="mini">class=mini的div</div>
<div class="mini">class=mini的div</div>
</div>
<span>^^span元素^^</span>
<span>--span元素--</span>
</body>
1、后代元素選擇器
選擇器：ancestor descendant
描述：在給定的祖先元素下匹配所有的后代元素。
返回值：元素集合
示例：
<script type="text/javascript">
$(document).ready(function(){
$("body div").css("background","#ffbbaa");
});
</script>
2、子元素選擇器
選擇器：parent > child
描述：在給定的祖先元素下匹配所有的子元素。
返回值：元素集合
示例：
<script type="text/javascript">
$(document).ready(function(){
$("body > div").css("background","#ffbbaa");
$("body > div.aaa").css("background", "#ffbbaa");
});
</script>
3、相鄰元素選擇器
選擇器：prev + next
描述：匹配所有緊接在 prev 元素后的 next 元素（prev和next必須是相鄰的兄弟關(guān)系）。
返回值：元素集合
示例：
<script type="text/javascript">
$(document).ready(function(){
//【寫法1】寫法1與寫法2等價(jià)
$("#one + span").css("background","#ffbbaa");
//【寫法2】
$("#one").next("span").css("background","#ffbbaa");
//【寫法3】寫法3、寫法4與寫法5等價(jià)
$("#one").nextAll("span:first").css("background","#ffbbaa");
//【寫法4】
$("#one").nextAll("span:eq(0)").css("background","#ffbbaa");
//【寫法5】
$("#one").nextAll("span").eq(0).css("background","#ffbbaa");
});
</script>
- 當(dāng)#one元素之后存在兄弟span元素，但span元素均與#one元素不相鄰時(shí)，寫法3、寫法4和寫法5可以查詢到結(jié)果，寫法1和寫法2查詢不到結(jié)果。
- 當(dāng)#one元素之后存在相鄰的兄弟span元素時(shí)，寫法1、寫法2、寫法3、寫法4和寫法5查詢到的結(jié)果相同。
4、兄弟元素選擇器
選擇器：prev ~ siblings
描述：匹配 prev 元素之后的所有siblings兄弟元素。
返回值：元素集合
示例：
<script type="text/javascript">
$(document).ready(function(){
//【寫法1】寫法1與寫法2等價(jià)
$("#two ~ div").css("border","1px solid #ffbbaa");
$(".mini:eq(1) ~ div").css("border","1px solid #ffbbaa");
//【寫法2】
$("#two").nextAll("div").css("border","1px solid #ffbbaa");
$(".mini:eq(1)").nextAll("div").css("border","1px solid #ffbbaa");
});
</script>
5、prev()和prevAll()
篩選方法：prev()
描述：取得一個(gè)包含匹配的元素集合中每一個(gè)元素緊鄰的前一個(gè)同輩元素的元素集合。
返回值：元素集合
示例：
<script type="text/javascript">
$(document).ready(function(){
//【寫法1】
$("span:first").prev(".bbb").css("background", "#ffbbaa");
//【寫法2】寫法2、寫法3和寫法4等價(jià)
$("span:first).prevAll(".bbb:first").css("background", "#ffbbaa");
//【寫法3】
$("span:first).prevAll(".bbb:eq(0)").css("background", "#ffbbaa");
//【寫法4】
$("span:first).prevAll(".bbb").eq(0).css("background", "#ffbbaa");
});
</script>
- 當(dāng)span:first元素之前存在兄弟.bbb元素，但.bbb元素均與span:first元素不相鄰時(shí)，寫法2、寫法3和寫法4可以查詢到結(jié)果，寫法1查詢不到結(jié)果。
- 當(dāng)span:first元素之前存在相鄰的兄弟.bbb元素時(shí)，寫法1、寫法2、寫法3和寫法4查詢到的結(jié)果相同。
篩選方法：prevAll()
描述：查找當(dāng)前元素之前所有的同輩元素。
返回值：元素集合
示例：
<script type="text/javascript">
$(document).ready(function(){
$("#two").prevAll("div").css("background", "#ffbbaa");
});
</script>
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運(yùn)行效果。
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery頁面元素操作技巧匯總》、《jQuery常見事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計(jì)有所幫助。
相關(guān)文章
jquery配合.NET實(shí)現(xiàn)點(diǎn)擊指定綁定數(shù)據(jù)并且能夠一鍵下載
本篇文章主要介紹了jquery配合.NET實(shí)現(xiàn)點(diǎn)擊指定綁定數(shù)據(jù)并且能夠一鍵下載，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2016-10-10
使用jquery實(shí)現(xiàn)仿百度自動補(bǔ)全特效
這里給大家分享的效果是像百度的搜索框一樣，當(dāng)用戶在文本框輸入前幾個(gè)字母或是漢字的時(shí)候,該控件就能從存放數(shù)據(jù)的文或是數(shù)據(jù)庫里將所有以這些字母開頭的數(shù)據(jù)提示給用戶,供用戶選擇,提供方便，增加用戶體驗(yàn)。2015-07-07
jQuery 綁定事件到動態(tài)創(chuàng)建的元素上的方法實(shí)例
這篇文章介紹了jQuery 綁定事件到動態(tài)創(chuàng)建的元素上的方法實(shí)例，有需要的朋友可以參考一下2013-08-08
B/S開發(fā)的朋友，首頁常常需要一些新聞圖片切換的特效，鑒于jQuery良好的插件開發(fā)機(jī)制，我也常常自己寫一些實(shí)用的小插件，這里分享一個(gè)新聞圖片切換插件2011-10-10
大家應(yīng)該都會有這樣一種感覺，data函數(shù)在jQuery中看起來很不起眼, 就像沙灘上一顆平凡的沙子, 但仔細(xì)一瞅, 卻驚訝的發(fā)現(xiàn)data是jQuery中無比重要的一環(huán), 甚至jQuery中各種事件都基于此。下面就來詳細(xì)深入的學(xué)習(xí)下jQuery中的data()，感興趣的朋友們可以參考借鑒。2016-12-12
在深入了解jQuery的各個(gè)細(xì)節(jié)之前，需要對jQuery的設(shè)計(jì)思想有一個(gè)大致的了解。在遇到問題時(shí)， 知道應(yīng)該使用jQuery的哪一個(gè)功能，然后迅速從手冊中找到具體的用法。本文將詳細(xì)介紹jQuery的設(shè)計(jì)思想。下面跟著小編一起來看下吧2017-03-03
jQuery實(shí)現(xiàn)html可聯(lián)動的百分比進(jìn)度條
這篇文章主要介紹了jQuery實(shí)現(xiàn)html可聯(lián)動的百分比進(jìn)度條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03
使用ajax在前端驗(yàn)證是否執(zhí)行某個(gè)操作，下面為大家介紹下jquery.post的具體使用2014-01-01
jQuery學(xué)習(xí)筆記之jQuery的DOM操作
jQuery學(xué)習(xí)筆記之jQuery的DOM操作實(shí)現(xiàn)方法， 學(xué)習(xí)jquery與dom操作的朋友可以參考下。2010-12-12
jquery如何退出each循環(huán)的? 在回調(diào)函數(shù)里return false即可，大多數(shù)jq的方法都是如此的2014-02-02