【技术分享】WEB前端全栈成长计划(二阶段)-jQuery之遍历篇(1)
今天将开始对jQuery遍历的使用进行总结，理解遍历和掌握它的使用方法。
本篇主要是介绍jQery遍历概念、祖先、后代(DOM树向下/向上遍历)的使用方法。
jQuery遍历的作用是根据HTML元素关系进行“查找”和“移动”，最常见的使用是从某个根元素开始对其内的指定范围的子元素进行遍历获取需要的属性和值。
看图说话：
div元素属于祖类，与ul是祖与父关系
ul与li属于父子关系，并且属于div内的子元素
li与span和li与p都属于父子关系，是ul的子元素，同时属于div，也可以说是div和ul的后代
两个li元素是同胞，拥有相同的父元素
知识点
祖先是父、祖父、曾祖父等，后代是子、孙、曾孙等。同胞拥有相同的父
遍历DOM中最常见的就是树遍历(tree-traversal)
遍历-祖先
向上遍历DOM材
parent() 返回被选中元素的直接父元素
parents() 返回被选中元素的所有祖先元素，一直向上直到根元素
parentsUnti() 返回介于两个指定元素之间的所有祖先元素
parent、parents、parentsUntil使用
<style>
.divCss *{
border:1px solid black;
color:gray;
margin:5px;
padding:5px;
display: block;
}
</style>
<body>body曾曾祖父
<div class="divCss">div曾祖元素
<div class="laoda">div祖父元素(class=laoda)
<ul>ul祖父元素
<li>li父元素
<span>span子元素</span>
</li>
</ul>
</div>
<div class="xiaodi">div祖父元素(calss=xiaodi)
<p>p父元素
<span>span子元素</span>
</p>
</div>
</div>
<p>1、选中所有span的直接父元素</p>
<button id="btn1">$("span").parent()</button>
<script>
$("#btn1").click(function(){
$("span").parent().css({"color":"red","border":"2px solid red"})
});
</script>
<p>2、选中span的所有祖先元素</p>
<button id="btn2">$("span").parents()</button>
<script>
$("#btn2").click(function(){
$("span").parents().css({"color":"red","border":"2px solid red"})
});
</script>
<p>3、选中span和div之间的所有祖先元素</p>
<button id="btn3">$("span").parentsUntil("div")</button>
<script>
$("#btn3").click(function(){
$("span").parentsUntil("div").css({"color":"red","border":"2px solid red"})
});
</script>
<p>4、选中div元素下所有子元素</p>
<button id="btn4">$("div").children()</button>
<script>
$("#btn4").click(function(){
$("div").children().css({"color":"red","border":"2px solid red"})
});
</script>
</body>
遍历-后代
向下遍历DOM树
children() 返回被选元素的所有直接子元素
find() 返回被选元素的后代元素，一路向下查询直到最后一个
children、find使用
接上节示例代码
<body>
......
<p>5、使用过滤条件，选中类名为"laoda"的所有div元素，并且它们是"div"的直接子元素</p>
<button id="btn5">$("div").children("div.laoda")</button>
<script>
$("#btn5").click(function(){
$("div").children("div.laoda").css({"color":"red","border":"2px solid red"})
});
</script>
<p>6、选中div元素的所有后代</p>
<button id="btn6">$("div").find("*")</button>
<script>
$("#btn6").click(function(){
$("div").find("*").css({"color":"red","border":"2px solid red"})
});
</script>
<p>7、选中div元素的所有"span"元素</p>
<button id="btn7">$("div").find("span")</button>
<script>
$("#btn7").click(function(){
$("div").find("span").css({"color":"red","border":"2px solid red"})
});
</script>
知识点
find("元素名称") 元素名称是个可选项，上面示例中*号代表所有元素，也可以用元素名称作为查询条件
通过jQuery封装的函数可以让我们更方便对DOM树进行操作，重点是理解DOM上下遍历的概念，代码部份还是要多加实战练习。
实例代码已上传我的Gitee项目 https://gitee.com/net_master/Ajax_Node/tree/master/jQuery
书山有路勤为径，学海无涯苦作舟!!!
zhoubo
2020.8.16 at home
- 点赞
- 收藏
- 关注作者
评论（0）