通过 jQuery 遍历 DOM 树
parent() 方法返回被选元素的直接父元素，该方法只会向上一级对 DOM 树进行遍历
parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)
parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素
<style type="text/css">
*{margin:0;padding:0;}
.parent{width:600px;height:300px;}
.parent ul li{list-style:none;}
.parent,ul,li,p{border:1px solid green;padding:5px;margin:10px;}
</style>
<body>
<div class="parent">(太爷)
<ul class="p_ul">(爷爷)
<li>(父亲)
<p>子</p>
</li>
<li></li>
</ul>
</div>
<input type="button" value="找爸爸" id="parent"/>
<input type="button" value="找祖祖" id="parents"/>
<input type="button" value="parentsUntil" id="parentsUntil"/>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function(){
// alert("亲爱的同学们，我爱你们 !");
// parent() 方法返回被选元素的直接父元素，该方法只会向上一级对 DOM 树进行遍历
// $("p").css({ "color": "#ff0011", "background": "blue" });
$("#parent").click(function(){
$("p").parent().css({"color":"red","border":"3px solid red"});
});
/*
function clickMe(){
$("p").parent().css({"color":"red","border":"3px solid red"});
}
*/
// parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)
$("#parents").click(function(){
$("p").parents(".p_ul").html("大家好，太帅了！");
});
// parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素
$("#parentsUntil").click(function(){
$("p").parentsUntil(".p_ul").css("background","#690");
});
});
</script>
</body>
通过 jQuery，向下遍历 DOM 树，以查找元素的后代
children() 方法返回被选元素的所有直接子元素 ，该方法只会向下一级对 DOM 树进行遍历
find() 方法返回被选元素的后代元素，一路向下直到最后一个后代 ，
<style type="text/css">
*{margin:0;padding:0;}
.parent{width:600px;height:300px;}
.parent ul li{list-style:none;}
.parent,ul,li,p{border:1px solid green;padding:5px;margin:10px;}
</style>
<body>
<div class="parent">(太爷)
<div class="par"> par
<ul class="p_ul">(爷爷)
<li>(父亲)
<p class="p_p">子</p>
</li>
<li>另一个li标签</li>
</ul>
</div>
</div>
<input type="button" value="children" id="children"/>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$("#children").click(function(){
// children() 方法返回被选元素的所有直接子元素 ，该方法只会向下一级对 DOM 树进行遍历
//$(".parent").children().css("background","#690");
//$("div").children("ul").css("border","3px green solid");
// $(".parent").children(".par").css({"background":"green","color":"#fff"});
// find() 方法返回被选元素的后代元素，一路向下直到最后一个后代
$(".parent").find("li").eq(1).css("background","red");
});
</script>
</body>
同胞拥有相同的父元素，能够在 DOM 树中遍历元素的同胞元素
在 DOM 树中水平遍历
siblings() 方法返回被选元素的所有同胞元素
next() 方法返回被选元素的下一个同胞元素 ， 该方法只返回一个元素
nextAll() 方法返回被选元素的所有跟随的同胞元素
nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素
prev() ， prevAll() ， prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：
它们返回的是前面的同胞元素（在 DOM 树中沿着同胞元素向后遍历，而不是向前）
<style type="text/css">
*{margin:0;padding:0;}
.parent{width:600px;}
.parent .p_ul{border:3px solid red;}
.parent ul li{list-style:none;}
.parent,ul,li,p,div{border:1px solid green;padding:5px;margin:10px;}
</style>
<body>
<div class="parent">(太爷)
<div class="par"> par
<ul class="p_ul">(爷爷) ul
<li class="p_li">(父亲) li
<p class="p_p">子 p</p>
</li>
<li>另一个li标签</li>
</ul>
<p id="one">我是一个p标签</p>
<p>我是一个p标签</p>
<div>我是一个div标签</div>
<p id="end">由于需要，我又写了一个p标签</p>
</div>
</div>
<input type="button" value="siblings" id="siblings"/>
<input type="button" value="next" id="next"/>
<input type="button" value="nextAll" id="nextAll"/>
<input type="button" value="nextUntil" id="nextUntil"/>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
// siblings()方法返回被选元素的所有同胞元素
$("#siblings").click(function(){
// $(".p_ul").siblings("p").css("background","red");
$(".p_ul").siblings("p").hide();
});
// next()方法返回被选元素的下一个同胞元素 ， 该方法只返回一个元素
$("#next").click(function(){
$(".p_ul").next("p").css("background","red");
});
// nextAll()方法返回被选元素的所有跟随的同胞元素
$("#nextAll").click(function(){
$(".p_ul").nextAll().css("background","red");
});
// nextUntil() 查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止
$("#nextUntil").click(function(){
$("#one").nextUntil("#end").css("background","red");
});
</script>
</body>
缩写搜索元素的范围
三个最基本的过滤方法是：first(), last() 和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素。其他过滤方法
比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素
first() 方法返回被选元素的首个元素
last() 方法返回被选元素的最后一个元素
eq() 方法返回被选元素中带有指定索引号的元素
filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回
not() 方法返回不匹配标准的所有元素
<style type="text/css">
*{margin:0;padding:0;}
.parent{width:600px;}
.parent .p_ul{border:3px solid red;}
.parent ul li{list-style:none;}
.parent,ul,li,p,div{border:1px solid green;padding:5px;margin:10px;}
</style>
<body>
<div class="parent">(太爷)
<div class="par"> par
<ul class="p_ul">(爷爷) ul
<li class="p_li">(父亲) li
<p class="p_p">子 p</p>
</li>
<li>另一个li标签</li>
<li>我是第三个li标签</li>
</ul>
<p id="one">我是一个p标签 one</p>
<p>我是一个p标签</p>
<div>我是一个div标签</div>
<p id="end">由于需要，我又写了一个p标签</p>
</div>
</div>
<input type="button" value="first" id="first"/>
<input type="button" value="last" id="last"/>
<input type="button" value="eq" id="eq"/>
<input type="button" value="filter" id="filter"/>
<input type="button" value="not" id="not"/>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$("#first").click(function(){
// first() 方法返回被选元素的首个元素
$(".p_ul").find("li").first().css("background","red");
});
$("#last").click(function(){
// last() 方法返回被选元素的最后一个元素
$(".p_ul").find("li").last().css("background","green");
});
// eq() 方法返回被选元素中带有指定索引号的元素
$("#eq").click(function(){
$(".p_ul").find("li").eq(-1).css("background","green");
});
// filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回
$("#filter").click(function(){
//$("p").filter("#one").css("background","yellow");
$("p").filter("#one, :last").css("background","yellow");
});
// 从p元素中删除带有 one 的ID的元素
$("#not").click(function(){
$("p").not("#one").css("background","yellow");
});
</script>
</body>
浙公网安备 33010602011771号