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

演示效果如下

2、.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 然后返回

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 包含首，不包含尾。

演示结果如下：

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

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

演示结果如下：