jQuery 遍历-后代深入解析分析【前端jQuery框架】
@[toc]
JQuery遍历
JQuery遍历，意思是“移动”，用于根据HTML元素与其他元素的关系“查找”（或选择）HTML元素。从一个选择开始，沿着它移动，直到到达所需的元素。
下图显示了一个家谱。通过jQuery遍历，您可以轻松地从所选（当前）元素在族谱树中上移（祖先）、下移（后代）和水平移动（同级）。这种移动称为DOM遍历。
<div>元素是<ul>的父元素，也是其所有内容的祖先。
元素是元素的父元素和div的子元素
左边的元素是<span>的父元素，是<ul>的子元素，是<div>的后代。
<span>元素是<li>的子元素，是<ul>和<div>的后代。
两个元素是兄弟元素（具有相同的父元素）。
右边的元素是b的父元素，ul的子元素，div的后代。
<b>元素是右侧<li>的子元素，是<ul>和<div>的后代。
JQuery提供了许多遍历dom的方法。
最大的遍历方法是树遍历。
Jquery parent（）方法
parent（）方法返回所选元素的直接父元素。
此方法将只在一个级别上遍历DOM树。
返回每个元素的直接父元素：
<div class="ancestors">
<div style="width:500px;">div (曾祖父元素)
<ul>ul (祖父元素)
<li>li (父元素)
<span>span</span>
</li>
</ul>
</div>
<div style="width:500px;">div (祖父元素)
<p>p (父元素)
<span>span</span>
</p>
</div>
</div>
Jquery parents（）方法
parents（）方法返回所选元素的所有祖先元素，这些元素一直到文档的根元素（<html>）。
所有元素的所有祖先：
$(document).ready(function(){
$("span").parents();
});
运行结果
Jquery parentsuntil（）方法
parentsuntil（）方法返回两个给定元素之间的所有祖先元素。
返回<span>和<div>元素之间的所有祖先元素：
$(document).ready(function(){
$("span").parentsUntil("div");
});
<body class="ancestors"> body (曾曾祖父元素)
<div style="width:500px;">div (曾祖父元素)
<ul>ul (祖父元素)
<li>li (父元素)
<span>span</span>
</li>
</ul>
</div>
</body>
JQuery遍历-子体
子孙是子女、孙子、曾孙等等。
使用jQuery，可以向下遍历DOM树以查找元素的后代。
Jquery children（）方法
children（）方法返回所选元素的所有直接子元素。
该方法仅向下遍历DOM树一级。
返回每个<div>元素的所有直接子元素：
$(document).ready(function(){
$("div").children();
});
Jquery children（）方法运行截图如下：
返回所有类名为“1”的元素，它们是<div>的直接子元素：
$(document).ready(function(){
$("div").children("p.1");
});
Jquery find（）方法
find（）方法返回所选元素的子元素，一直到最后一个子元素。
返回属于子体的所有元素：
$(document).ready(function(){
$("div").find("span");
});
- 点赞
- 收藏
- 关注作者
评论（0）