jQuery DOM节点的遍历方法小结

节点查找关系

<div class="div">
  <ul class="son">
    <li class="grandson">1</li>
  </ul>
</div>
// 查找ul的父元素div, $(ul).parent()

parent()无参数

parent()方法允许我们能够在DOM树中搜索到这些元素的父级元素，从有序的向上匹配元素，并根据匹配的元素创建一个新的 jQuery 对象

注意：jQuery是一个合集对象，所以通过parent是匹配合集中每一个元素的父元素

parent()方法选择性地接受同一型选择器表达式

同样的也是因为jQuery是合集对象，可能需要对这个合集对象进行一定的筛选，找出目标元素，所以允许传一个选择器的表达式

parents()方法

jQuery是一个合集对象，如果想快速查找合集里面的每一个元素的所有祖辈元素，此时可以用parents()方法

其实也类似find与children的区别，parent只会查找一级，parents则会往上一直查到查找到祖先节点

节点查找关系

<div class="div">
  <ul class="son">
    <li class="grandson">1</li>
  </ul>
</div>
// 在li节点上找到祖辈元素div，用$("li").parents()方法

parents()无参数

parents()方法允许我们能够在DOM树中搜索到这些元素的祖先元素，从有序的向上匹配元素，并根据匹配的元素创建一个新的 jQuery 对象；返回的元素秩序是从离他们最近的父级元素开始的

注意：jQuery是一个合集对象，所以通过parent是匹配合集中所有元素的祖辈元素

parents()方法选择性地接受同一型选择器表达式

同样的也是因为jQuery是合集对象，可能需要对这个合集对象进行一定的筛选，找出目标元素，所以允许传一个选择器的表达式

注意事项

.parents()和.parent()方法是相似的，但后者只是进行了一个单级的DOM树查找
$( “html” ).parent()方法返回一个包含document的集合，而$( “html” ).parents()返回一个空集合。

closest()方法

以选定的元素为中心，往内查找可以通过find、children方法。如果往上查找，也就是查找当前元素的父辈祖辈元素，jQuery提供了closest()方法，这个方法类似parents但是又有一些细微的区别，属于使用频率很高的方法

closest()方法接受一个匹配元素的选择器字符串

从元素本身开始，在DOM 树上逐级向上级元素匹配，并返回最先匹配的祖先元素

// 在div元素中，往上查找所有的li元素，可以这样表达
$("div").closet("li')

注意：jQuery是一个合集对象，所以通过closest是匹配合集中每一个元素的祖先元素