Jquery 简明教程

jQuery - DOM Traversing

jQuery 是一个非常强大的工具，它提供了多种 DOM 遍历方法来帮助我们在 HTML 或 XML 文档中随机或按顺序方法选择元素。DOM 中的元素被组织成一个树状数据结构，可以遍历它来导航、查找 HTML 或 XML 文档中的内容。

jQuery is a very powerful tool which provides a variety of DOM traversal methods to help us select elements in an HTML or XML document randomly as well as in sequential method. Elements in the DOM are organized into a tree-like data structure that can be traversed to navigate, locate the content within an HTML or XML document.

DOM 树可以想象成一个 nodes 集合，它们通过父 - 子和兄弟 - 兄弟关系相互关联，根从最顶层的父开始，它是一个 HTML 文档中的 HTML 元素。

The DOM tree can be imagined as a collection of nodes related to each other through parent-child and sibling-sibling relationships and the root start from the top parent which is HTML element in an HTML document.

在我们开始遍历 DOM 之前，让我们理解一下 parent 、 child 和 sibling 的术语。让我们看一个示例：

Before we start traversing a DOM, Let’s understand the terminology of parent, child and sibling. Let’s see an example:

<body>
   <p>This is paragrah</p>

   <div><span>This is div</span></div>

   <button id="b1">Get width</button>
   <button id="b2">Set width</button>
</body>

在上面的示例中，我们在顶部有一个 <body> 元素，它被称为所有元素的父元素。<body> 元素内的 <div>、<p> 和 <button> 元素被称为兄弟元素。而 <div> 内的 <span> 元素是 <div> 的子元素，<div> 称为 <span> 元素的父元素。

In the above example, we have a <body> element at the top, which is called a parent for all the elements. The <div>, <p> and <button> elements inside the <body> element are called siblings. Again <span> element inside <div> is a child of <div> and <div> is called a parent of <span> element.

<div> 元素是 <p> 元素的下一个兄弟元素，<p> 是 <div> 元素的上一个兄弟元素。

The <div> element is a next sibling of the <p> element and <p> is the previous sibling of the <div> element.

Traversing the DOM

大多数 DOM 遍历方法不会修改 jQuery DOM 对象，它们用于根据给定条件从文档中筛选出元素。jQuery 提供了以下三个方向的遍历方法：

Most of the DOM Traversal Methods do not modify the jQuery DOM object and they are used to filter out elements from a document based on given conditions. jQuery provides methods to traverse in the following three directions:

  1. Traversing Upwards - This direction means traversing the ancestors (Parent, Grandparent, Great-grandparent etc.)

  2. Traversing Downwards - This direction means traversing the descendants (Child, Grandchild, Great-grandchild etc.)

  3. Sideways - This direction means traversing the ancestors the siblings (Brother, sisters available at the same level)

我们将在下一章开始学习上述所有遍历方法。

We will learn all the above traversing methods starting from the next chapter.

jQuery Traversing Reference

您可以在以下页面获得所有 jQuery 方法的完整引用以遍历 DOM： jQuery Traversing Reference 。

You can get a complete reference of all the jQuery Methods to traverse the DOM at the following page: jQuery Traversing Reference.