jQuery遍历——过滤

最新推荐文章于 2022-12-13 06:00:00 发布

原创最新推荐文章于 2022-12-13 06:00:00 发布 · 1.7k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#过滤器

JavaScript基础专栏收录该内容

19 篇文章

订阅专栏

任务描述

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

相关知识

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

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

<div class="container">
我是第一个元素
我是第二个元素
我是第三个元素
我是第四个元素
我是第五个元素
</div>

效果图如下：

first()

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

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

效果如下：

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

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

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

last()

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

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

效果如下：

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

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

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

eq()

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

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

效果如下：

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

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

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

filter()

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

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

效果如下：

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

用选择器实现代码如下：

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

not()

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

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

效果如下：

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

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

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

编程要求

根据提示，在右侧编辑器Begin至End之间填充代码，修改指定元素的字体颜色。要求用本关介绍的方法，过滤选择器可自行调试。要求如下：

获取第一个p元素，改变字体颜色为red；
获取匹配class="active"的p元素，改变字体颜色为orange；
获取第三个p元素，改变字体颜色为yellow；
获取没有class="item"的p元素，改变字体颜色为green；
获取最后一个p元素，改变字体颜色为blue；

格式注意：

获取元素统一用类名获取，直接获取即可；
统一用双引号""表示字符串；

效果如下：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

    <style>
    .container{
        width: 400px;
        margin: 20px auto;
    }
    .container *{
        display: block;
        border: 2px solid #000;
        padding: 5px;
        margin: 15px;
    }

    </style>
</head>
<body>
<div class="container">
    <p class="item">我是第一个元素</p>
    <p class="item active">我是第二个元素</p>
    <p class="item">我是第三个元素</p>
    <p class="four">我是第四个元素</p>
    <p class="item">我是第五个元素</p>
</div>

    <script>
     $(function(){
      //---------- Begin ------------
      $(".item").first().css("color","red");
      $(".item").filter(".active").css("color","orange");
      $(".item").eq(2).css("color","yellow");
      $(".four").not(".item").css("color","green");
      $(".item").last().css("color","blue");
        
      //----------- End -------------
     })
    </script>
    
</body>
</html>