JQuery—— 过滤_jquery 过滤-CSDN博客

本文链接：https://blog.csdn.net/nanchen_J/article/details/120301651

过滤：可以允许在一组元素中的位置来选择一个特定的元素

最基本的三个过滤方法分别是first(), last() 和 eq()

一、first（）方法：返回首个元素

看下面例子：如果我想获取div中的第一个元素或者是p标签的第一个元素就可以使用此方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>first()方法</title>
    <style>
        .div1{
            width: 120px;
            height: 40px;
            display: inline-block;
            margin-left: 5px;
            cursor: pointer;
        }
        p{
            width: 120px;
            height: 40px;
        }
    </style>
</head>
<body>
     <!-- first()方法返回被选元素的首个元素 -->
     <div class="div1">我是第一个div</div>
     <div class="div1">我是第二个div</div>
     <div class="div1">我是第三个div</div>
     <div><p>我是第一个p</p></div>
     <div><p>我是第二个p</p></div>
     <div><p>我是第三个p</p></div>
     <script src="../jquery-3.6.0.js"></script>
     <script>
         $(document).ready(function () {
             $('.div1').first().css('background','red');    //获取首个div
             $('p').first().css({                            //获取首个p标签
                'background':'black',
                'color':'#fff'
             });
         })
     </script>
</body>
</html>

效果如下图所示：

二、last()方法：返回被选元素的最后一个元素。

和first方法方向相反

$('.div1').last().css('background','red');    //获取最后一个div
             $('p').last().css({            //获取最后一个p标签
                'background':'black',
                'color':'#fff'
             });

效果如下图：

三、eq()方法：返回被选元素中带有指定索引号的元素。

注：索引号是从0开始依次往下

想要选取第二个div和第二个p标签，就可以使用eq()方法

 $('.div1').eq(1).css('background','red');
             $('p').eq(1).css({  //因为索引号是从0开始，所以取第二个盒子的话
                'background':'black',//就是从0、1、2、3......中选取1即为第二个div和第二个p
                'color':'#fff'
             });

当然还有一些其他过滤方法如：filter()和not()方法

filter（）方法：可以自己规定标准，不符合这个标准的元素会被从集合中删除，匹配的元素返回

例如：我想获取div中带有div1类名的元素

<body>
     <div class="div1">我是第一个div</div>
     <div>我是第二个div</div>
     <div>我是第三个div</div>
     <div class="div1">我是第四个div</div>
     <div>我是第五个div</div>
     <div class="div1">我是第六个div</div>
     <script src="../jquery-3.6.0.js"></script>
     <script>
         $(document).ready(function () {
             $('div').filter('.div1').css('background','red');
             //$('div.div1').css('background','red');效果一样
         })
     </script>
</body>

效果如下所示：

not（）方法：返回不是这个标准的元素与filter（）方法相反

例如：返回不是这个div1类名的元素

<body>
     <div class="div1">我是第一个div</div>
     <div>我是第二个div</div>
     <div>我是第三个div</div>
     <div class="div1">我是第四个div</div>
     <div>我是第五个div</div>
     <div class="div1">我是第六个div</div>
     <script src="../jquery-3.6.0.js"></script>
     <script>
         $(document).ready(function () {
             $('div').not('.div1').css('background','red');
         })
     </script>
</body>