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>