过滤:可以允许在一组元素中的位置来选择一个特定的元素
最基本的三个过滤方法分别是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>
not()方法和eq()方法组合起来可以实现反选的效果
$(".div1").not(":eq(1)").css("background-color","yellow"); //不获取类名为.div1中第二个元素其余的.div1元素全部获取