Jquery中的DOM操作 (八.遍历节点)

1.childrend()方法

该方法用于取得匹配元素的子元素集合.

2.next()方法

该方法用于取得匹配元素后面紧邻的同辈元素

3.prev()方法

该方法用于取得匹配元素前面紧邻的同辈元素

4.sliblings()方法

该方法用于取得匹配元素前后所有的同辈元素

5.parent()

获取集合中每个匹配元素的父级元素

6.parents()

获取集合中每个匹配元素的祖先元素

7.closest()

从元素本身开始,逐级向上级元素匹配,并返回最先匹配的祖先元素

$(function () {
alert($("p").children().length);
alert($("ul").children().length);
for(var i=0;i< $("ul").children().length;i++){
alert( $("ul").children()[i].innerHTML );
};
//--------------------------------------------------------
var $p1 = $("p").next();
alert( $p1.html() ); // 紧邻<p>元素后的同辈元素
var $ul = $("ul").prev();
alert( $ul.html() ); // 紧邻<ul>元素前的同辈元素
var $p2 = $("p").siblings();
alert( $p2.html() ); // 紧邻<p>元素的唯一同辈元素
$(document).bind("click", function (e) {
$(e.target).closest("li").css("color","red");
})
//--------------------------------------------------------
//parent
$("input:eq(0)").click(function(){
resetStyle();
$('.item-1').parent().css('background-color', 'red');
});
//parents
$("input:eq(1)").click(function(){
resetStyle();
$('.item-1').parents('ul').css('background-color', 'red');
});
//closest
$("input:eq(2)").click(function(){
resetStyle();
$('.item-1').closest('ul').css('background-color', 'red');
});

function resetStyle(){
$("*").removeAttr("style");
}
});

<p  title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
<ul>
<li title='苹果'>苹果</li>
<li title='橘子'>橘子</li>
<li title='菠萝'>菠萝</li>
</ul>
<hr/>
<input type="button" value="parent()"/>
<input type="button" value="parents()"/>
<input type="button" value="closest()"/>

<ul id="one" class="level-1">
<li class="item-i">I</li>
<li id="ii" class="item-ii">II
<ul class="level-2">
<li class="item-a"><a href="#" class="item-1">Home</a></li>
<li class="item-b"><a href="#" class="item-2">Product</a></li>
<li class="item-c"><a href="#" class="item-3">About</a></li>
</ul>
</li>
<li class="item-iii">III</li>
</ul>