JQuery—— 过滤

简介: 过滤:可以允许在一组元素中的位置来选择一个特定的元素最基本的三个过滤方法分别是first(), last() 和 eq()

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

最基本的三个过滤方法分别是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>

效果如下图所示:

20210915092425853.png

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

和first方法方向相反

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

效果如下图:

20210915092915471.png

三、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>

效果如下所示:

20210915094349918.png

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>

20210915094705112.png

not()方法和eq()方法组合起来可以实现反选的效果

$(".div1").not(":eq(1)").css("background-color","yellow");
//不获取类名为.div1中第二个元素其余的.div1元素全部获取

20210915095522584.png



相关文章
|
4月前
|
JavaScript
jQuery 遍历- 过滤
jQuery 遍历- 过滤
29 2
|
JavaScript
jQuery 基本过滤选择器
jQuery 基本过滤选择器
35 0
|
JavaScript 前端开发
【jQuery学习】—jQuery对象的过滤
【jQuery学习】—jQuery对象的过滤
|
JavaScript 前端开发
前端基础 -JQuery之 基本过滤选择器
前端基础 -JQuery之 基本过滤选择器
44 0
|
JavaScript 前端开发 索引
JQuery全部过滤选择器详细介绍上
JQuery全部过滤选择器详细介绍上
89 0
|
JavaScript 索引 AI芯片
JQuery全部过滤选择器详细介绍下
JQuery全部过滤选择器详细介绍下
69 0
|
JavaScript 前端开发 索引
|
JavaScript 开发者 索引
jQuery_基础过滤|学习笔记
快速学习 jQuery_基础过滤
260 0
jQuery_基础过滤|学习笔记
|
JavaScript
jquery筛选方法-13
jquery筛选方法-13
86 0
jquery筛选方法-13
|
JavaScript
jquery的筛选方法-11
jquery的筛选方法-11
91 0
jquery的筛选方法-11

相关课程

更多