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


相关文章
|
3月前
|
JavaScript 小程序
遍历类数组之获取多个dom节点并遍历
遍历类数组之获取多个dom节点并遍历
|
JavaScript 前端开发
JS DOM之DOM遍历
1.什么是DOM遍历? DOM遍历,可以简单地理解为“查找元素”。举个例子,如果你使用getElementById()等方法获取一个元素,然后又想得到该元素的父元素、子元素,甚至是下一个兄弟元素,这种操作涉及的就是DOM遍历 2.查找父元素 在JavaScript中,我们可以使用parentNode属性来获得某个元素的父元素
82 0
JS DOM之DOM遍历
|
JavaScript 前端开发
JavaScript 然后遍历dom时报错 forEach is not a function
JavaScript 然后遍历dom时报错 forEach is not a function
312 2
|
JavaScript
VUE element-ui之el-tree树形控件循环遍历渲染dom节点;子节点横向排列;控件添加指示线
VUE element-ui之el-tree树形控件循环遍历渲染dom节点;子节点横向排列;控件添加指示线
748 0
VUE element-ui之el-tree树形控件循环遍历渲染dom节点;子节点横向排列;控件添加指示线
|
JavaScript
DOM移除、替代、拷贝、遍历
DOM移除、替代、拷贝、遍历
61 0
|
JavaScript 数据安全/隐私保护
jQuery的DOM文档对象模型,常见的事件,遍历,validate插件,自定义事件方法
jQuery的DOM文档对象模型,常见的事件,遍历,validate插件,自定义事件方法
105 0
jQuery的DOM文档对象模型,常见的事件,遍历,validate插件,自定义事件方法
|
JavaScript 前端开发
JavaScript遍历标签(遍历DOM数组)
JavaScript遍历标签(遍历DOM数组)
JavaScript遍历标签(遍历DOM数组)
|
JavaScript 前端开发 索引
jQuery学习笔记--效果,操作html元素,遍历DOM树
参考W3school: http://www.w3school.com.cn/jquery/jquery_hide_show.asp jQuery效果: 隐藏: 基础语句: $(selector).hide(speed,callback); 可选的 speed 参数规定隐藏/显示的速度,可以取以下值:”slow”、”fast” 或毫秒。
1639 0