DOM——遍历.parent()、.parents()、.closest()和.next()

简介:

      遍历.parent()、.parents()、.closest()和.next()

1   .parent()快速查找合集里面的每一个元素的父元素,即父亲与儿子的关系,因为是父元素,所以只会向上查找一级

2   .parent()无参数,能够在DOM树中搜索到这些元素的父级元素,有序的向上匹配元素,并根据匹配的元素创建一个新的JQuery对象

3   .parent()选择性地接受同一型选择器表达式,需要对这个合集对象进行一定的筛选,找出目标元素,允许传一个选择器的表达式

4   .parents()可以快速查找合集里面的每一个元素的所有祖辈元素,

5   .parents()无参数,选择性地接受同一型选择器表达式,返回的元素秩序是从离他们最近的父级元素开始的

6   .parents()能够在DOM树中搜索到这些元素的祖先元素,有序的向上匹配元素,并根据匹配的元素创建一个新的JQuery对象

7   .parents()需要对这个合集对象进行一定的筛选,找出目标元素,允许传一个选择器的表达式

8   .parents()和.parent()的区别

   .parent()只会查找一级,只进行一个单级DOM树查找,返回一个包含document的集合

   .parents()会往上一直查找到祖先节点,返回一个空集合

9   .closest()接受一个匹配元素的选择器字符串,从元素本身开始,在DOM树上逐级向上级元素匹配,并返回最先匹配的祖先元素

10   .closest()查找当前元素的父辈祖辈元素,给定的JQuery集合或元素来过滤元素,匹配合集中每一个元素的祖先元素,需要对这个合集对象进行一定的筛选,找出目标,允许传一个JQuery的对象

11   .parents()和.closest()的区别

   起始位置

   .parents()开始于父元素

   .closest()开始于当前元素

   便利的目标

   .parents()遍历到文档根元素,一直查找到根元素,并将匹配的元素加入集合

   .closest()要找到指定的目标,向上查找直到找到一个匹配的就停止查找

   结果

   .parents()返回的是包含零个或多个元素的JQuery对象

   .closest()返回的是包含零个或一个元素的JQuery对象

12   .next()无参数,可以快速查找指定元素集合中每一个元素紧邻的后面同辈元素的元素集合,找遍元素集合中紧跟着这些元素的直接兄弟元素,并根据匹配的元素创建一个新的JQuery对象

13   .next()匹配合集中每一个元素的下一个兄弟元素,选择性的接受同一类选择器表达式,需要对这个合集对象进行一定的筛选,找出目标,允许传一个选择器的表达式


本文转自 拉考的考拉 51CTO博客,原文链接:http://blog.51cto.com/lakaodekaola/2044143


相关文章
|
1月前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
该文介绍了XML DOM遍历节点树的方法,通过循环移动遍历文档,以提取各元素值。示例代码展示了如何遍历指定节点的所有子节点,显示它们的名称和值,如书名、作者和年份。
|
1月前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
该文讲述了如何遍历XML文档的节点树。通过示例代码展示如何循环访问XML元素,提取每个节点的名称和值。实例中,XML数据包含书籍信息,程序加载XML后,遍历根节点的所有子节点,依次显示它们的名称和内容。
|
2天前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
Traversal means looping or moving through a node tree in XML DOM. "Traversal of the node tree" often occurs when extracting each element's value from an XML document. Here's an example that loops through all child nodes of an `xmlDoc` and displays their names and values:
|
4天前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
该文介绍了如何遍历XML文档的节点树。通过循环移动,可以访问并处理每个节点,例如提取元素值。示例代码展示了一个实例,它加载XML字符串到xmlDoc,然后遍历根元素的所有子节点,打印出节点名及文本值。在浏览器中运行此实例会显示标题、作者和年份等信息。
|
7天前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
该文介绍了如何遍历XML文档的节点树。通过循环移动,可以访问并处理每个节点,例如提取元素值。示例代码展示了一个实例,它加载XML字符串到`xmlDoc`,遍历根元素的所有子节点,打印出节点名及文本值,如"title: Everyday Italian"等。
|
12天前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
该文介绍了XML DOM遍历节点树的概念,通过循环或移动在节点树中操作。示例展示了如何遍历XML文档,提取每个元素的名称和值。代码实例遍历了一个XML结构,输出了`book`元素的子节点信息,如`title`, `author`, `year`及其对应的值。
|
14天前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
该文介绍了如何遍历XML文档的节点树。通过循环移动,可以访问并处理每个节点,例如提取元素值。示例代码展示了一个实例,它加载XML字符串到`xmlDoc`,然后遍历根元素的所有子节点,打印出节点名及文本值。在输出中,可以看到对"title", "author"和"year"节点的处理。
|
16天前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
该文介绍了XML DOM遍历节点树的概念,通过循环移动遍历文档,以提取各元素值。示例代码展示了如何加载XML到xmlDoc,获取根元素子节点并打印其名称和值,例如:`title: Everyday Italian`, `author: Giada De Laurentiis`, `year: 2005`。
|
19天前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
该文介绍了XML文档对象模型(DOM)中的节点遍历。通过遍历节点树,可以循环访问XML文档的各个元素。示例代码展示如何遍历一个XML结构,打印出所有子节点的名称和值。在HTML中,XML字符串被加载到`xmlDoc`,然后获取根元素的子节点并逐一输出其信息。
|
1天前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
Traversal means looping or moving through a node tree in XML DOM.