JavaScript（22）jQuery 遍历

最新推荐文章于 2022-09-27 13:35:11 发布

馨宇心苑

最新推荐文章于 2022-09-27 13:35:11 发布

阅读量1k

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/u014194675/article/details/29800293

版权

JavaScript 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

jQuery 遍历
意为“移动”，用于根据其相对于其他元素的关系来“查找”（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达期望的元素为止。

遍历 DOM
通过 jQuery 遍历，能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行遍历。
遍历方法中最大的种类是树遍历（tree-traversal）。

祖先是父、祖父、曾祖父等等。
后代是子、孙、曾孙等等。
同胞拥有相同的父。

向上遍历 DOM 树
这些 jQuery 方法很有用，它们用于向上遍历 DOM 树，以查找元素的祖先：

parent()
parents()
parentsUntil()

jQuery parent() 方法
parent() 方法返回被选元素的直接父元素。该方法只会向上一级对 DOM 树进行遍历。
下面的例子返回所有 <span> 元素的直接父元素：

$(document).ready(function(){
  $("span").parent();
});

jQuery parents() 方法
parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。
下面的例子返回所有 <span> 元素的所有祖先：

$(document).ready(function(){
  $("span").parents();
});

也可以使用可选参数来过滤对祖先元素的搜索。
下面的例子返回所有 <span> 元素的所有祖先，并且它是 <ul> 元素：

$(document).ready(function(){
  $("span").parents("ul");
});

jQuery parentsUntil() 方法
parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。
下面的例子返回介于 <span> 与 <div> 元素之间的所有祖先元素：

$(document).ready(function(){
  $("span").parentsUntil("div");
});

也许这样理解会更好记：使用可选参数，返回被选元素的祖先元素，直到可选参数为止。
注意，这个之间，是不包括 <span> 与 <div> 元素的。

向下遍历 DOM 树
下面是两个用于向下遍历 DOM 树的 jQuery 方法，以查找元素的后代：

children()
find()

jQuery children() 方法
children() 方法返回被选元素的所有直接子元素。该方法只会向下一级对 DOM 树进行遍历。
下面的例子返回每个 <div> 元素的所有直接子元素：

$(document).ready(function(){
  $("div").children();
});

也可以使用可选参数来过滤对子元素的搜索。
下面的例子返回类名为 "1" 的所有 <p> 元素，并且它们是 <div> 的直接子元素：

$(document).ready(function(){
  $("div").children("p.1");
});

jQuery find() 方法
find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。
下面的例子返回属于 <div> 后代的所有 <span> 元素：

$(document).ready(function(){
  $("div").find("span");
});

下面的例子返回 <div> 的所有后代：

$(document).ready(function(){
  <span style="background-color: rgb(255, 255, 204);">$("div").find("*");</span>
});

注意，不等价于 $("div").find(""); 。

馨宇心苑

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript（22）jQuery 遍历

jQuery 遍历意为“移动”，用于根据其相对于其他元素的关系来“查找”（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。下图展示了一个家族树。通过 jQuery 遍历，您能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行遍历。
复制链接

扫一扫

专栏目录