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

Posted 2020-10-15

      遍历.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()匹配合集中每一个元素的下一个兄弟元素，选择性的接受同一类选择器表达式，需要对这个合集对象进行一定的筛选，找出目标，允许传一个选择器的表达式