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

开发者学堂课程【jQuery 开发教程:jQuery 遍历_过滤3】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址:https://developer.aliyun.com/learning/course/362/detail/4301


jQuery 遍历_过滤3


目录

一、 具体方法

二、 演示

 

一、具体方法

.not():从匹配的元素集合中移除指定的元素。

.map():通过一个函数匹配当前集合中的每个元素,产生一个包含新的 jQuery 对象。

.slice():根据指定的下标范围,过滤匹配的元素集合,并生成一个新的 jQuery 对象。过滤当中所有的方法都会生成一个新的 jQuery 对象。除了 is,它只是一个判断。

 

二、 演示

1、.not 方法演示: 

<ul>

<li>li 1</li>

<li>li 2</li>

<li>li 3</li>

<li>li 4</li>

</ul>

<script>

$(function() {

$("li").not(";odd").css("background-color","yellow");

.not接受一个参数,可以是元素对象选择器等,这里的效果是把不是奇数的标签变为黄色背景。因为 odd 是从 0 开始计数,所以这里选择的是1和3

演示效果如下

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

.map 方法演示:

<​​div id=”d1”>d1</div>

<div id=”d2”>d2</div>

<div id=”d3”>d3</div>

<div id=”d4”>d4</div>

<script>

$(function() {

$("div").map(function() {

console.log(this.id);

});

要实现的效果是遍历的打印出每个 div 的 id ,map 方法的参数是一个回调函数,会在处理集合中每个元素时都会被调用,即这个函数的方法对于 div ,每个div都会调用这个函数。

还可以利用 .map 方法对数组进行操作,然后返回一个新的数组。

var arr=[0,1,2];

console.log(arr.map(function(n) {

return n+4;

}))

把数组的每一项都加 4 然后返回

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

.slice方法演示:

<ul>

<li>li 1</li>

<li>li 2</li>

<li>li 3</li>

<li>li 4</li>

</ul>

<script>

$(function() {

$("li").slice(1,3).css("background-color","pink");

Slice 接受两个参数,第一个 start 起始下标,从 0 开始计数,是整数,可以为正值,也可以为负值,如果为负值,代表从末尾开始计数。

第二个参数为 end ,end 终止下标,它选择的范围是从 start开始到 end 结束,end 包含首不包含尾

演示结果如下:

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

它也可以只接受一个参数,比如只写一个 1 ,他表示从1开始到最后。

$("li").slice(1).css("background-color","pink");

演示结果如下:

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

上一篇:windows多线程同步--临界区


下一篇:windows多线程同步--事件