开发者学堂课程【jQuery 开发教程:jQuery 遍历_过滤1】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/362/detail/4299
jQuery 遍历_过滤1
目录:
一、过滤eq方法
二、过滤filter方法
三、过滤first方法
四、过滤last方法
五、过滤has方法
六、过滤is方法
七、过滤not方法
八、过滤map方法
九、过滤slice方法
一、过滤方法介绍
1、eq()
减少匹配元素的集合为指定的索引的哪一个元素。两种表现形式
示例:li2标签添加背景颜色
创建index.html
创建index.html <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"><title>< /title> //引入jquery <script src="jquery-2.2.1.min. js"></script>< / head> <body> <ul> <li>li 1</li> <li>li </li> <li>l1 3</l1> <li>li 4</li> </ul> <script> $ ( function(){ //设置背景颜色 $ ("1i"). eq(p.css ( "background-color" , "red"");}) < / script> < / body> < /html>
2、filter()
筛选元素集合中匹配表达式 或通过传递函数测试的 那些元素集合。
3、first()
获取匹配元素集合中第一个元素。
$ ( function( )i $ ( "li"). filter ( " : even" ).css("background-color" , "red"); })
运行结果:
4、last()
获取匹元素集合中最后一个元素。
5、has()
筛选匹配元素集合中的那些有相匹配的选择器或DOM元素的后代元素。
6、is()
判断当前匹配的元素集合中的元素,是否为一个选择器,DOM元素,或者 jQuen 对象,如果这些元素至少一个匹配给定参数,那么返回true。
7、not()
从匹配的元素集合中移除指定的元素。
8、map()
通过一个函数匹配当前集合中的每个元素,产生一个包含新的jQuery对象。
9、slice()
根据指定的下标范围,过滤匹配的元素集合,并生成一个新的jQuery对象。
<! DOCTYPE html > <html lang ="en”> <head> <meta charset ="UTF-8"> <title></title> <script src=" jquery-2.2.1.min.js"></script> <style > div { width: 50px; height: 50px; background-color: aquamarine; float : Left; margin-Left: 10px; </style> <head> <body> // <ul > // <li>li 1</Li> // <1i>1i 2</Li // <1i>1i 3</Li // <1i>1i 4</Li // </ul> // <div></div> // <div class =”middle”></div> // <div class =”middle”></div> // <div class =”middle”></div> // <div></div> <ul> <Li> <strong>s1</strong> </li> </ul> <strong>s1</strong> <strong>s3</strong> </Li> </uL> <script> $( function() { // $("l1").eq(1).css ("background-color", "red") ; // $("l1").filter(“:even”).css ("background-color", "red") ; // $(div").filter(".middle").css ("border","1px solid red); S("l1").fi1ter(function(){ return S ("strong", this). Length ==1 }).css("background-color"," yellow”); }) </script>