jQuery 遍历 - 后代深入解析分析【前端 jQuery 框架】
JQuery 遍历
![](https://static001.geekbang.org/infoq/09/09068add633969f84f83159c01d5edde.png)
JQuery 遍历,意思是“移动”,用于根据 HTML 元素与其他元素的关系“查找”(或选择)HTML 元素。从一个选择开始,沿着它移动,直到到达所需的元素。下图显示了一个家谱。通过 jQuery 遍历,您可以轻松地从所选(当前)元素在族谱树中上移(祖先)、下移(后代)和水平移动(同级)。这种移动称为 DOM 遍历。
![](https://static001.geekbang.org/infoq/38/3816c73b8b0a12012d208f1781d893d4.png)
<div>
元素是<ul>
的父元素,也是其所有内容的祖先。元素是元素的父元素和 div 的子元素左边的元素是<span>
的父元素,是<ul>
的子元素,是<div>
的后代。<span>
元素是<li>
的子元素,是<ul>
和<div>
的后代。两个元素是兄弟元素(具有相同的父元素)。右边的元素是 b 的父元素,ul 的子元素,div 的后代。<b>
元素是右侧<li>
的子元素,是<ul>
和<div>
的后代。JQuery 提供了许多遍历 dom 的方法。最大的遍历方法是树遍历。
Jquery parent()方法
parent()方法返回所选元素的直接父元素。此方法将只在一个级别上遍历 DOM 树。返回每个元素的直接父元素:
![](https://static001.geekbang.org/infoq/fd/fdc439f75fcc4027f84df56d0cf48fd7.png)
Jquery parents()方法
parents()方法返回所选元素的所有祖先元素,这些元素一直到文档的根元素(<html>
)。所有元素的所有祖先:
运行结果
![](https://static001.geekbang.org/infoq/d0/d01577b613eb712fc3a98b0a62202784.png)
Jquery parentsuntil()方法
parentsuntil()方法返回两个给定元素之间的所有祖先元素。返回<span>
和<div>
元素之间的所有祖先元素:
![](https://static001.geekbang.org/infoq/e4/e42911b221f36239b8e9242989a7d16e.png)
JQuery 遍历-子体
子孙是子女、孙子、曾孙等等。使用 jQuery,可以向下遍历 DOM 树以查找元素的后代。
Jquery children()方法
children()方法返回所选元素的所有直接子元素。该方法仅向下遍历 DOM 树一级。返回每个<div>
元素的所有直接子元素:
Jquery children()方法运行截图如下:
![](https://static001.geekbang.org/infoq/e1/e1767b6a6ef28864d8d81a9931a18401.png)
返回所有类名为“1”的元素,它们是<div>
的直接子元素:
Jquery find()方法
find()方法返回所选元素的子元素,一直到最后一个子元素。返回属于子体的所有元素:
![](https://static001.geekbang.org/infoq/42/42e1a798a45bbc77cf6a748f5dc03e54.png)
版权声明: 本文为 InfoQ 作者【黎燃】的原创文章。
原文链接:【http://xie.infoq.cn/article/05ea156aa5cbaace0617b0327】。文章转载请联系作者。
评论