一、向上遍历：找祖先元素

parent()

大白话： 直接找到当前元素的亲爸爸（直接父元素）。

详细： 从当前元素向上走一步，找到包裹着它的那个元素。如果你想找的是亲爸爸而不是爷爷奶奶，这个方法最合适。

// 找到id为child的元素的直接父元素
$(“#child”).parent();
parents()

大白话： 找到当前元素的所有祖先（爸爸、爷爷、曾祖父…一直到老祖宗html元素）。

详细： 这个方法会一直向上找，直到html根元素，把所有祖先元素都找出来。你可以加一个选择器参数来筛选想要的祖先。

// 找到id为child的元素的所有祖先元素
$(“#child”).parents();

// 只找到祖先中的div元素
$(“#child”).parents(“div”);
parentsUntil()

大白话： 找到当前元素到指定祖先之间的所有祖先（比如从你到你爷爷之间的所有长辈）。

详细： 向上遍历直到遇到匹配选择器的元素为止（不包括匹配元素本身）。相当于在DOM树中划定一个范围，只取这个范围内的祖先。

// 找到当前元素到类名为grandparent元素之间的所有祖先
$(“#child”).parentsUntil(“.grandparent”);

二、向下遍历：找子孙元素

children()

大白话： 找到当前元素的亲儿子/女儿（直接子元素）。

详细： 只查找当前元素下一级的直接子元素，不会继续查找孙子辈元素。如果你只想找亲生孩子，这是最好的选择。

// 找到id为parent的所有直接子元素
$(“#parent”).children();

// 只找到直接子元素中的div
$(“#parent”).children(“div”);
find()

大白话： 找到当前元素的所有后代元素（儿子、孙子、曾孙…）。

详细： 这是最常用的方法之一，会在当前元素内部的所有层次中查找匹配元素。必须传入选择器参数。

// 在id为container的元素内部查找所有p元素
$(“#container”).find(“p”);

三、水平遍历：找兄弟姐妹元素

siblings()

大白话： 找到当前元素的所有亲兄弟/姐妹（同级别的所有元素）。

详细： 查找同一个父元素下的所有其他子元素，不包括自己。可以指定选择器来筛选想要的兄弟姐妹。

// 找到id为child的所有兄弟元素
$(“#child”).siblings();

// 只找到兄弟元素中的div元素
$(“#child”).siblings(“div”);
next()

大白话： 找到当前元素的下一个兄弟（紧跟在后面的那个兄弟）。

详细： 在DOM树中同一层级上，找到当前元素之后紧接着的下一个元素。如果当前元素是最后一个，则不会匹配到任何元素。

// 找到id为current的下一个兄弟元素
$(“#current”).next();
nextAll()

大白话： 找到当前元素之后的所有兄弟（后面的所有兄弟姐妹）。

详细： 匹配当前元素之后的所有同辈元素，可以加选择器参数过滤结果。

// 找到id为current之后的所有兄弟
$(“#current”).nextAll();

// 只找到之后兄弟中的div元素
$(“#current”).nextAll(“div”);
nextUntil()

大白话： 找到当前元素到指定兄弟元素之间的所有兄弟。

详细： 向后查找兄弟元素，直到遇到匹配选择器的元素为止（不包括匹配元素）。

// 找到当前元素到类名为end元素之间的所有兄弟
$(“#current”).nextUntil(“.end”);
prev()

大白话： 找到当前元素的前一个兄弟（紧挨着的前一个兄弟）。

详细： 与next()相反，查找当前元素之前紧邻的同辈元素。

// 找到id为current的前一个兄弟
$(“#current”).prev();
prevAll()

大白话： 找到当前元素之前的所有兄弟（前面的所有兄弟姐妹）。

详细： 匹配当前元素之前的所有同辈元素。

// 找到id为current之前的所有兄弟
$(“#current”).prevAll();
prevUntil()

大白话： 找到当前元素到指定兄弟元素之间的所有兄弟（向前直到某个元素为止）。

详细： 向前查找兄弟元素，直到遇到匹配选择器的元素为止（不包括匹配元素）。

// 找到当前元素到类名为start元素之间的所有兄弟
$(“#current”).prevUntil(“.start”);

四、过滤和遍历：精准定位

each()

大白话： 对一组元素挨个执行相同的操作（就像排队点名一样）。

详细： 遍历一个jQuery对象，对每个匹配的元素执行一个函数。函数中可以用this或$(this)来引用当前元素。

// 对所有div元素设置不同的背景颜色
$(“div”).each(function(index) {
  $(this).css(“background”, getColor(index));
});
filter()

大白话： 从一组元素中筛选出符合条件的（就像从一群人里挑出戴眼镜的）。

详细： 缩小匹配元素的范围，只保留符合选择器或函数条件的元素。

// 从所有段落中筛选出包含”重要”文本的
$(“p”).filter(“:contains(‘重要’)”);

// 使用函数筛选：id长度大于5的元素
$(“div”).filter(function() {
  return this.id.length > 5;
});
not()

大白话： 从一组元素中排除不符合条件的（就像从一群人里排除戴眼镜的）。

详细： 移除匹配选择器或函数的元素，返回剩下的元素。

// 所有段落中不包括类名为note的
$(“p”).not(“.note”);

// 排除第一个元素
$(“div”).not(“:first”);