jQuery遍历DOM元素与节点方法详解

本文实例讲述了jQuery遍历DOM元素与节点方法。分享给大家供大家参考，具体如下：

一、向上遍历--祖先元素

① $(selector).parent([filter]):返回selector匹配元素的直接父元素，方法可以接受一个过滤selector来过滤返回的父元素。

② $(selector).parents([filter]):返回匹配元素的所有祖先节点，一直向上直到文档根元素html，方法可以接受一个过滤selector来过滤返回的祖先节点。

备注：parent与parents的区别，parent返回直接父节点，parents返回所有的祖先节点，另外$("html").parent()返回document节点，而$("html").parents()则返回空。

③ $(selector).parentUntil([ancestorSelector][,filter])：返回匹配节点与ancestorSelector之间的所有祖先节点，注意不包括ancestorSelector匹配的几点，方法可以接受一个过滤selector来过滤返回的祖先节点，如果ancestorSelector为空或者在其祖先节点中没有找到匹配ancestorSelector的元素则返回所有祖先节点等同于parents()方法。

$(selector).parentUtil(element[,ancestorSelector]):用法及含义同上。

④ $(selector).offsetParent():返回匹配元素的最近的一个定位的祖先元素，所谓定位祖先元素是指其CSS position属性设置为relative,absolute,fixed，主要在动画演示过程中计算元素的偏移及位置具有很大的作用。

⑤ $(selector).closest(ancestorSelector[,context]):获取最近的一个匹配ancestorSelector的祖先元素，方法可以接受一个参数context来控制搜索的范围。同parents方法有如下区别：

a.closest从来当前元素本身开始向上搜索
parents则从父节点元素开始。

b.closest沿DOM树向上遍历，直到找到匹配ancestorSelector的一个元素位置
parents沿DOM树向上遍历，直到文档的根元素为止，将每个祖先元素添加到一个临时集合；如果应用了选择器，则会基于该选择器对这个集合进行筛选

c.closest返回包含0个或者一个元素的jQuery对象
parents返回包含0个、一个或多个元素的jQuery对象

其它变形用法：

$(selector).closest(ancestorSelectors[,context]);$(selector).closest(jQuery object);$(selector).closest(element)

二、向下遍历--子孙元素

① .children([childrenSelector]):返回元素的直接子元素，方法可以接受一个参数来过滤返回的子元素。

② .find(descendantSelector):返回元素的匹配decendantSelector的所有后代元素，一直向下知道最后一个后代。

其它变形用法：

.find(jQuery object);.find(element);

③ .contents():返回元素的所有子元素，同children的区别是contents包含text节点及comment节点。

三、同级遍历--兄弟元素

① .siblings([selector])：返回当前元素的所有兄弟元素，方法可以接收一个可选参数来过滤返回的兄弟元素。