Educoder jQuery动画 第4关：jQuery遍历——过滤

任务描述

本关任务：jQuery 遍历 DOM 元素的过滤方法，显示效果如下图。

相关知识

为了完成本关任务，你需要掌握：1.first()，2. last() 3. eq()，4. filter()，5.not()。

基本的html结构如下（CSS已省略）：

1. <div class="container">
2. <p>我是第一个元素</p>
3. <p class="active">我是第二个元素</p>
4. <p class="active">我是第三个元素</p>
5. <p>我是第四个元素</p>
6. <p>我是第五个元素</p>
7. </div>

效果图如下：

first()

如何给div下的第一个p元素设置背景色呢？ 这里用first()。代码如下：

1. $("div p").first().css("background","orange");

效果如下：

从上面可以看出：first() 方法会返回被选元素的第一个元素。

还记得学过的过滤选择器吗？也是可以实现相同效果的。代码如下：

1. $("div p:first").css("background","orange");

last()

如何给div下的最后一个p元素设置背景色呢？ 这里用last()。代码如下：

1. $("div p").last().css("background","orange");

效果如下：

从上面可以看出：last() 方法会返回被选元素的最后一个元素。

用过滤选择器实现代码如下：

1. $("div p:last").css("background","orange");

eq()

如何给div下的第三个p元素设置背景色呢？ 这里用eq()。代码如下：

1. $("div p").eq(2).css("background","orange");

效果如下：

从上面可以看出：eq() 方法会返回带有指定索引号的元素。
注意：索引是从0开始的。

用过滤选择器实现代码如下：

1. $("div p:eq(2)").css("background","orange");

filter()

如何给div下class="active"的p元素设置背景色呢？ 这里用filter()。代码如下：

1. $("div p").filter(".active").css("background","orange");

效果如下：

从上面可以看出：filter() 方法会规定一个标准，匹配的会被返回，不匹配的不返回。

用选择器实现代码如下：

1. $("div p.active").css("background","orange");

not()

如何给div下没有class="active"的p元素设置背景色呢？ 这里用not()。代码如下：

1. $("div p").not(".active").css("background","orange");

效果如下：

从上面可以看出：not() 方法会返回不匹配的元素，和filter()相反。

用过滤选择器实现代码如下：

1. $("div p:not(.active)").css("background","orange");