js进阶 11-15 jquery过滤方法有哪些

一、总结

一句话总结：jquery方法中的参数一般是什么：选择器、元素或 jQuery 对象。

1、jquery方法中的参数一般是什么？

选择器、元素或 jQuery 对象

2、has()如何使用（如何选取有em元素的对象）？

36             // $('li').has('em').css("background-color", "pink")

3、is()方法如何使用（选择某个元素是不是有pink1类或者pink2类）？

34             //     alert($('li:eq(3)').is('.pink1,.pink2'))

4、not()方法如何使用（如何选取不是pink1类和pink2类的元素）？

32             // $('li').not('.pink1,.pink2').css("background-color", "pink");

5、jquery中如何选取一段？

slice(start, [end])把匹配元素集合缩减为指定的指数范围的子集。

start:开始选取子集的位置。第一个元素是0.如果是负数，则可以从集合的尾部开始选起。

end:结束选取自己的位置，如果不指定，则就是本身的结尾。

37             // $('li').slice(0,3).css("background-color", "pink")

二、jquery过滤方法有哪些

1、相关知识

为了更加灵活迅速地操作元素，除了选择器之外，jQuery还为我们提供了过滤、查找方法。过滤和查找补充了很多使用选择器无法进行的操作

first()/last() 方法返回被选元素的首个元素/最后一个元素。
eq() 方法返回被选元素中带有指定索引号的元素。
索引号从 0 开始，因此首个元素的索引号是 0 而不是 1
filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
not() 方法返回不匹配标准的所有元素。
is() 判断所选元素是否有符合某个条件的元素，返回值为true或false.
根据选择器、元素或 jQuery 对象来检测匹配元素集合，如果这些元素中至少有一个元素匹配给定的参数，则返回 true。
has() 使用“自定义表达式”来选择符合条件的元素
slice(start, [end])把匹配元素集合缩减为指定的指数范围的子集。
- start:开始选取子集的位置。第一个元素是0.如果是负数，则可以从集合的尾部开始选起。
- end:结束选取自己的位置，如果不指定，则就是本身的结尾。

2、代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <style>
 4 </style>
 5 <head>
 6     <meta charset="UTF-8">
 7     <title>演示文档</title>
 8     <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
 9     <style>
10         li{
11             margin-top: 5px;width: 150px;
12         }    
13     </style>
14 </style>
15 </head>
16 <body>
17     <ol>
18         <li>1</li>
19         <li>2</li>
20         <li class="pink1"><em>3</em></li>
21         <li class="pink2">4</li>
22         <li>5</li>
23     </ol>
24     <input id="btn1" type="button" value='is'>
25     <script type="text/javascript">
26         $(function(){
27             // $('li:first').css("background-color", "orange");
28             // $('li').first().css("background-color", "orange");
29             // $('li').last().css("background-color", "orange");
30             // $('li').eq(1).css("background-color", "green");
31             // $('li').filter('.pink1,.pink2').css("background-color", "pink");
32             // $('li').not('.pink1,.pink2').css("background-color", "pink");
33             // $('#btn1').click(function(){
34             //     alert($('li:eq(3)').is('.pink1,.pink2'))
35             // })
36             // $('li').has('em').css("background-color", "pink")
37             // $('li').slice(0,3).css("background-color", "pink")
38             $('li').slice(-4,-2).css("background-color", "pink")
39 
40         })
41     </script>
42 </body>
43 </html>