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

<!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>

上一篇:IOS组件绑定无效错误


下一篇:入门设计模式之备忘录模式