3.3.1 过滤相关方法

发表于 更新于 分类于 ， ， Waline： 本文字数： 3.8k 阅读时长 ≈ 3 分钟

3.3.1 过滤相关方法

下面是一组对类数组的jQuery对象进行过滤的方法,这些方法将会过滤掉jQuery对象里包含的部分DOM对象。假如某个jQuery对象里包含5个DOM对象,则调用这些过滤方法后,该jQuery对象里可能就只包含3个DOM对象了。

过滤方法

按索引取出一个jQuery对象

方法 描述
eq(position) 该方法返回由jQuery里包含的第position+1个元素包装成的jQuery对象。

返回首尾元素的方法

方法 描述
first() 该方法返回由jQuery对象中包含的第一个元素包装成的jQuery对象。
last() 该方法返回由jQuery对象中包含的最一个元素包装成的jQuery对象。

保留特定DOM元素的方法

方法 描述
filter(表达式) 返回符合表达式的元素,不符合条件的元素将被移除
其中表达式可以是任意合法的selector 选择器,也可以是包含多个元素的数组,还可以是包含多个元素的jQuery对象。
方法 描述
filter(function(index)) 返回满足给定函数的元素。
这是一个迭代器函数,它将使用function函数迭代处理jQuery里包含的每个元素。在function函数里使用this来代表当前正处理的DOM元素,如果想获取该DOM元素对应的jQuery对象,使用$(this)即可。function是一个形如function(index){}的函数,其中index代表jQuery里元素的索引,该索引从0开始。如果将当前元素传入function函数后返回true,则该元素被保留,否则将被删除。

移除特定DOM元素的方法

方法 描述
not(表达式) 从jQuery对象里删除所有匹配表达式的DOM对象。
其中表达式可以是任意合法的selector选择器,也可以是包含多个元素的数组,还可以是包含多个元素的jQuery对象。该方法与filter(表达式)方法的作用完全相反。
方法 描述
not(function(index)) 删除满足给定函数的元素。
这是一个迭代器函数,它将使用function函数迭代处理jQuery里包含的每个元素。在function函数里使用this来代表当前正处理的DOM元素,如果想获取该DOM元素对应的jQuery对象,使用$(this)即可。function是一个形如function(index){}的函数,其中index代表jQuery里元素的索引,该索引从0开始。如果将当前元素传入function函数后返回true,则该元素被删除,否则将被保留。该方法与filter(function(index))方法的作用完全相反。

测试方法

方法 描述
is(表达式) 用表达式来检查该jQuery对象包含的元素集合,如果其中任意一个元素符合表达式,就返回true;如果没有元素符合,或者表达式无效,就返回false。

其中表达式可以是任意合法的selector选择器,也可以是包含多个元素的数组,还可以是包含多个元素的jQuery对象。

方法 描述
is(function(index)) 该方法是一个迭代器函数,它将使用function函数迭代处理jQuery 里包含的每个元素,如果将任意一个元素传入function函数后返回true,则该方法返回true。

在function函数里使用this来代表当前正处理的DOM元素,如果想获取该DOM元素对应的jQuery对象,使用$(this)即可。function是一个形如function(index){}的函数,其中index代表jQuery里元素的索引,该索引从0开始。如果将任意一个元素传入function函数后返回true,则该方法返回true。

转为其他对象的方法

方法 描述
map(callback(index)) 该方法用于将jQuery对象里包含的一系列DOM 对象转换成其他对象(这些对象既可包含原始DOM对象,也可不包含原始DOM对象)。callback函数会依次处理jQuery里包含的每个DOM对象,每次函数执行后的返回值将作为新jQuery对象里包含的新元素。callback是一个形如callback(index){}的函数,其中index代表jQuery里元素的索引,该索引从0开始。

截取方法

方法 描述
slice(start,end) 返回由jQuery里索引从start开始到end结束的DOM元素组成的jQuery对象。

程序示例

下面的程序示范了相关过滤方法的用法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html>

<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title> 操作类数组的工具方法 </title>
</head>

<body>
    <div>
        <div id="java">疯狂Java讲义</div>
        <div id="javaee">轻量级Java EE企业应用实战</div>
        <div id="ajax">疯狂前端开发讲义</div>
        <div id="xml">疯狂XML讲义</div>
        <div id="ejb">经典Java EE企业应用实战</div>
        <div id="android">疯狂Android讲义</div>
    </div>
    <script type="text/javascript" src="../jquery-3.1.1.js">
    </script>
    <script type="text/javascript">
        // 对div之内的div元素的第四个元素设置字体为24
        $("div>div").eq(3).css("font-size", "24pt");

        // 对div之内的div元素进行过滤，必须满足id为ajax
        $("div>div").filter("#ajax").css("background-color", "#aaa");

        // 对div之内的div元素进行过滤，要求div内的字符串长度大于8
        $("div>div").filter(function () {
            return this.innerHTML.length > 8;
        }).css("border", "1px solid black");

        // 对div之内的div元素进行过滤，必须满足id不为ajax
        $("div>div").not("#ajax").css("font-weight", "bold");

        // 对div之内的div元素进行过滤，取出索引从3到5的元素
        $("div>div").slice(3, 5).height(60);
        
        // 将div之内的div元素映射成另一个类数组的jQuery对象
        // 此处使用了箭头函数作为callback函数
        var result = $("div>div").map(i => i);
        console.log(result);
    </script>
</body>

</html>

最后一行粗体字代码使用map()方法对jQuery所包含的多个元素进行转换,转换函数使用了箭头函数:map(i=>i),这意味着jQuery原来包含的每个元素直接被转换成它的索引。在浏览器的控制台中可以看到最后的输出如下。

1
Object { 0: 0, 1: 1, 2: 2, 3: 3, 4: 4, 5: 5, length: 6, prevObject: {…} }

从该输出可以看出,$("div>div")原来一共包括6个div元素,现在每个<div>元素都被转换成了该元素对应的索引。