jQuery遍历_过滤1|学习笔记

简介: 快速学习 jQuery 遍历_过滤1

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

图片39.png

2、filter()

筛选元素集合中匹配表达式 或通过传递函数测试的 那些元素集合。

3、first()

获取匹配元素集合中第一个元素。

$ ( function( )i
$ ( "li"). filter ( " : even" ).css("background-color" , "red");
})

运行结果:

图片40.png

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>

图片41.png

相关文章
|
7月前
|
JavaScript
jQuery遍历div,判断是否为空,为空时执行某个操作
jQuery遍历div,判断是否为空,为空时执行某个操作
|
3月前
|
JavaScript
jQuery 遍历
jQuery 遍历
30 2
jQuery 遍历
|
3月前
|
JavaScript
jQuery 遍历 方法
jQuery 遍历 方法
33 5
|
3月前
|
JavaScript
jQuery 遍历
jQuery 遍历
35 1
jQuery 遍历
|
3月前
|
JavaScript
jQuery 遍历 - 同胞(siblings)
jQuery 遍历 - 同胞(siblings)
26 6
|
3月前
|
JavaScript
jQuery 遍历 - 祖先
jQuery 遍历 - 祖先
36 5
|
3月前
|
JavaScript
jQuery 遍历- 过滤
jQuery 遍历- 过滤
19 2
|
3月前
|
JavaScript
jQuery 遍历 方法
jQuery 遍历 方法
26 3
|
3月前
|
JavaScript
jQuery 遍历 - 祖先
jQuery 遍历 - 祖先
17 4
|
3月前
|
JavaScript
jQuery 遍历 - 同胞(siblings)
jQuery 遍历 - 同胞(siblings)
21 2