开发者学堂课程【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
<!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>