jQuery基礎(chǔ) - 樹(shù)形結(jié)構(gòu)的選擇器
來(lái)源：程序員人生 發(fā)布時(shí)間：2013-11-08 04:56:14 閱讀次數(shù)：3634次
樹(shù)形結(jié)構(gòu)里的節(jié)點(diǎn)，如果它不是根部，也不是末枝，那么它一定有父母和孩子。DOM結(jié)構(gòu)其實(shí)也是一種樹(shù)形結(jié)構(gòu)，jQuery提供的樹(shù)形選擇器可以用來(lái)選擇DOM Tree里的節(jié)點(diǎn)。這些樹(shù)形選擇器的方法包括：children(), parent(), parents(), next(), prev(), siblings().
選擇某個(gè)元素的"孩子" - children()
<ul id="parent">
<li id="son1">第一列</li>
<li id="son2">第二列</li>
<li id="son3">第三列</li>
</ul>
$("#parent").children().length //得到所有的”孩子“(li)的個(gè)數(shù)，“3”
$("#parent").children("#son1").text(); //得到第一個(gè)”孩子“(li)的值 - “第一列” 選擇某個(gè)元素的“父母” - parent()
<ul id="parent">
<li id="son1">第一列</li>
<li id="son2">第二列</li>
<li id="son3">第三列</li>
</ul>
$("#son1").parent().attr("id");//得到ul的ID - "parent"選擇某個(gè)元素的“祖先”-parents() (注意：一級(jí)一級(jí)向上選擇直到<html>)
<div id="grand">
<ul id="parent">
<li id="son1">第一列</li>
<li id="son2">第二列</li>
<li id="son3">第三列</li>
</ul>
</div>
$("#son2").parents().each(function(i){
if(i<3) //只顯示3代祖先
alert($(this).html());
});
選擇某個(gè)元素的“弟弟” - next()
<ul id="parent">
<li id="son1">第一列</li>
<li id="son2">第二列</li>
<li id="son3">第三列</li>
</ul>
$("#son2").next().text(); //選擇#son3選擇某個(gè)元素的“哥哥” - prev()
<ul id="parent">
<li id="son1">第一列</li>
<li id="son2">第二列</li>
<li id="son3">第三列</li>
</ul>
$("#son2").prev().text(); //選擇#son1選擇某個(gè)元素的“兄弟” - siblings()
<ul id="parent">
<li id="son1">第一列</li>
<li id="son2">第二列</li>
<li id="son3">第三列</li>
</ul>
$("#son2").siblings().text(); //選擇#son1和#son3
生活不易，碼農(nóng)辛苦
如果您覺(jué)得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)
