jquery怎么遍历节点
jquery遍歷節(jié)點(diǎn)的方法：1、使用【children()】方法匹配元素的子元素集合；2、使用【next()】方法匹配元素后面緊鄰的同輩元素；3、使用【prev()】方法匹配元素前面緊鄰的同輩元素。
推薦：《jquery視頻教程》
jquery遍歷節(jié)點(diǎn)的方法：
1、children()方法
該方法用于取得匹配元素的子元素集合。
使用children()方法來獲取匹配元素的所有子元素的個(gè)數(shù)。
var $body=$("body").children();
var $p=$("p").children();
var $ul=$("ul").children();
alert("$body.length"); //<body>元素下有2個(gè)子元素
alert($p.length); //<p>元素下有0個(gè)子元素
alert("$ul.length"); //<ul>元素下有3個(gè)子元素
for(var i=0;len=$ul.length;i<len;i++)<br>{
alert($ul[i].innerHTML); //循環(huán)輸出<li>元素的HTML內(nèi)容
}
2、next()方法
該方法用于取得匹配元素后面緊鄰的同輩元素。
var $p1=$("p").next;//獲取緊鄰<p>元素后的同輩元素
得到的結(jié)果將是：
<ul>
<li title='蘋果'>蘋果</li>
<li title='橘子'>橘子</li>
<li title='菠蘿'>菠蘿</li>
</ul>
3、prev()方法
該方法用于取得匹配元素前面緊鄰的同輩元素
從dom樹的結(jié)構(gòu)中可以知道<ul>元素的上一個(gè)同輩節(jié)點(diǎn)是<p>，因此可以通過prev()方法來獲取<p>元素，代碼如下：
var $ul=$("ul").prev();//取得緊鄰<ul>元素前的同輩元素
得到的結(jié)果將是：
<p title="選擇你最喜歡的水果.">你最喜歡的水果是？</p>
4、siblings()方法
該方法用于取得匹配元素前后所有的同輩元素。
上面的代碼中就用到了siblings()方法，當(dāng)時(shí)是為了獲取匹配元素的兄弟節(jié)點(diǎn)，即獲取匹配元素的同輩元素。
以DOM樹的結(jié)構(gòu)為例。<ul>元素和<p>元素互為同輩元素，<ul>元素下的3個(gè)<li>元素也互為同輩元素。
如果要獲取<p>元素的同輩元素，則可以使用如下代碼：
var $p2=$("p").siblings();//取得緊鄰<p>元素的同輩元素
得到的結(jié)果是：
<ul>
<li title='蘋果'>蘋果</li>
<li title='橘子'>橘子</li>
<li title='菠蘿'>菠蘿</li>
</ul>
5、closest()
它用來取得最近的匹配元素。首先檢查當(dāng)前元素是否匹配，如果匹配則直接返回元素本身。如果不匹配則向上查找父元素，逐級(jí)向上直到找到匹配選擇器的元素。如果什么都沒找到則返回一個(gè)空的Jquery對(duì)象。
比如，給點(diǎn)擊的目標(biāo)元素的最近的li元素添加顏色，可以使用如下代碼：
$(document).bind("click",function(e){
$(e.target).closest("li").css("color","red");
})
相關(guān)免費(fèi)學(xué)習(xí)推薦：JavaScript（視頻）
總結(jié)
以上是生活随笔為你收集整理的jquery怎么遍历节点的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 我的博客旧貌换新颜了
- 下一篇： 我们在雪地撒野——51cto众人滑雪图片