jQuery遍历——过滤

ゝ一纸荒年。 2022-04-05 14:08 199阅读 0赞

任务描述

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

![206792][]

相关知识

为了完成本关任务，你需要掌握：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>`

效果图如下：

![206785][]

first()

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

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

效果如下：  
![206786][]

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

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

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

last()

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

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

效果如下：  
![206787][]

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

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

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

eq()

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

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

效果如下：  
![206788][]

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

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

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

filter()

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

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

效果如下：  
![206789][]

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

用选择器实现代码如下：

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

not()

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

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

效果如下：  
![206790][]

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

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

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

编程要求

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

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

格式注意：

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

效果如下：

![206792][]

<!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>

[206792]: https://educoder.trustie.net/attachments/download/206792
[206785]: https://educoder.trustie.net/attachments/download/206785
[206786]: https://educoder.trustie.net/attachments/download/206786
[206787]: https://educoder.trustie.net/attachments/download/206787
[206788]: https://educoder.trustie.net/attachments/download/206788
[206789]: https://educoder.trustie.net/attachments/download/206789
[206790]: https://educoder.trustie.net/attachments/download/206790