遍历

一、遍历祖先元素

何为祖先元素呢？祖先元素就是指某个元素的父元素或者祖父元素等上层元素，例如：

<body>
  <div>
    <p></p>
  </div>
</body>

在上面例子中，我们 p 元素的父元素是 div 元素，p 元素的祖父元素是 body 元素。

在 jQuery 中，提供了方法用来找到指定元素的祖先元素，常用的方法有以下两种。

parent 方法是用来查找指定元素的父元素的。
parents 方法是用来查找指定元素的所有祖先元素的。

parent 和 parents 的使用

二、遍历兄弟元素

遍历兄弟元素的方法分为三种：

前向兄弟元素查找
后向兄弟元素查找
所有兄弟元素查找

前向兄弟元素查找

前向兄弟元素查找就是查找指定元素前面的兄弟元素，在 jQuery 中可以用以下两种方法来实现前向兄弟元素的查找。

其语法格式为：

$().prev(); // 查找指定元素前向第一个元素

$().preAll(); // 查找指定元素前向所有元素

prev 方法的使用

提示

我们指定给第三个 div 标签的前向兄弟标签设置了一个背景颜色，从效果图我们可以知道，prev 方法只能查找到指定元素的第一个前向兄弟元素。

prevAll 方法的使用

$(function () {
	$("#div3").prevAll().css("background", "#a6d6d6");
  });

提示

第三个 div 元素的所有兄弟元素都被选中了

后向兄弟元素查找

后向兄弟元素查找就是查找指定元素的后向元素。

其语法格式为：

$().next(); // 查找指定元素的第一个后向兄弟元素

$().nextAll(); // 查找指定元素的所有后向兄弟元素

$(function () {
	$("#div3").next().css("background", "#a6d6d6");
  });

所有兄弟元素查找

除了前面所讲的前向和后向的兄弟元素查找，jQuery 还给我们提供了查找所有兄弟元素的方法。

其语法格式为：

$().siblings();

提示

从上图我们可以看出除了被指定的元素本身，它的其他兄弟元素都被查找到了。

三、遍历后代元素

遍历后代元素有两种方法，分别是：

children 方法
find 方法

children 方法

children 方法和 find 方法都是用来查找元素的子元素的，区别是 children 只能获取元素的儿子节点，而 find 方法可以获取元素的所有符合条件的后代节点。

children 语法格式为：

jQuery对象.children();

提示

打开页面我们会看到一个带有诗词的文本框，当点击 div 元素时，会触发 click 事件，使用 $(this).children("#title") 给 div 元素中 id 名为 title 的子元素设置字体大小属性。
使用 $(this).children() 给 div 元素的所有子元素设置居中的效果。

find 方法

find 方法也是查找指定元素的后代元素，但不同的是，find 方法可以查找到指定元素的所有后代元素。

其语法格式为：

jQuery对象.find(selector);

提示

在上面代码中，页面上有个无序列表，当我们点击该元素时，会触发 click 事件。
通过使用 $(this).find("li") 可以给 div 元素的所有 li 类型的子元素设置文字居中。

四、过滤元素

过滤元素就是通过指定的条件来查找元素，其有以下四种方式：

类名过滤
下标过滤
判断过滤
反向过滤

类名过滤

在 jQuery 中使用 hasClass 方法可以用来判断指定元素是否包含该类名的元素。

其使用格式为：

$().hasClass("类名");

hasClass 方法返回值为 boolean 类型，当查找到类名相符的指定元素时，则会返回 true，反之为 false。

提示

在上面代码中，有三个 div 元素，当我们点击三个元素中的其中一个时，会触发 click 事件。
使用 $("div").hasClass("div2") 来判断 div 元素中是否包含 class 名为 div2 的元素。
使用 if 语句判断，如果没有该元素，则给该元素添加背景颜色；如果有，弹出警告框。

下标过滤

在 jQuery 中使用 eq 方法可以实现下标过滤。

其语法格式为：

$().eq(n);

n 是一个整数，取值为元素的下标值。

提示

在上面代码中，我们使用 for 循环来遍历 li 元素。
通过 for(var i=0; i<3; i++) 我们可以遍历列表的前三项。
使用 eq(i).css("color","#77acf1") 给列表前三项的字设置颜色。

判断过滤

在 jQuery 中可以使用 is 方法来判断指定元素中是否有符合条件的存在。

其使用格式为：

$().is(selector);

is 方法返回的也是布尔类型的值，符合条件返回 true，反之 false。

前面我们学过类名过滤，可以判断是否存在该类名的元素，is 方法也可以实现。不过除了这一功能，我们的 is 方法拥有更多魔法，它还可以判断一个元素当前是否处于某个状态。

提示

在上面的代码中，点击「元素当前状态」按钮，触发 click 事件。
在函数内部通过 $("div").is(":animated") 判断当前 div 元素是否处于动画状态。
如果是，在 p 元素中写入“元素处于动画状态”；如果不是，在 p 元素中写入“元素不处于动画状态”。

反向过滤

在 jQuery 中使用 not 方法可以选择不符合条件的元素。

其使用格式为：

$().not(selector|function)

它的参数有两种，当为选择器时，我们会通过选择器来过滤不符合条件的元素；当为函数时，我们会通过函数来过滤不符合条件的元素。

提示

除了 not 方法中类名为 div2 的选择器，其他选择器都能够显示背景颜色。

遍历

# 遍历

# 一、遍历祖先元素

# parent 和 parents 的使用

# 二、遍历兄弟元素

# 前向兄弟元素查找

# prev 方法的使用

# prevAll 方法的使用

# 后向兄弟元素查找

# 所有兄弟元素查找

# 三、遍历后代元素

# children 方法

# find 方法

# 四、过滤元素

# 类名过滤

# 下标过滤

# 判断过滤

# 反向过滤

遍历

一、遍历祖先元素

parent 和 parents 的使用

二、遍历兄弟元素

前向兄弟元素查找

prev 方法的使用

prevAll 方法的使用

后向兄弟元素查找

所有兄弟元素查找

三、遍历后代元素

children 方法

find 方法

四、过滤元素

类名过滤

下标过滤

判断过滤

反向过滤