3.3 jQuery操作类数组的工具方法

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

3.3 jQuery操作类数组的工具方法

很多时候,jQuery的$()函数都返回一个类似数组的jQuery对象,例如$("div")将返回由页面中所有<div>元素包装成的jQuery对象,这个jQuery对象实际上包含了多个<div>元素对应的DOM对象。在这种情况下,jQuery提供了以下几个常用属性和方法来操作作为类数组的jQuery对象。

jQuery操作数组的常用属性和方法

常用属性

  • length:该属性返回jQuery里包含的DOM元素的个数。
  • context:该属性返回获取该jQuery对象传入的context参数。
  • jquery:该属性返回jQuery的版本。

迭代器

  • each(function(index)):该方法是一个迭代器函数,它将使用function函数迭代处理jQuery里包含的每个元素。在function函数里使用this来代表当前正在处理的DOM元素,如果想获取该DOM元素对应的jQuery对象,使用$(this)即可。function是一个形如function(index){}的函数,其中index代表jQuery里元素的索引,该索引从0开始。

返回DOM的方法

  • get():该方法返回由jQuery里包含的所有DOM元素组成的数组。
  • get(index):该方法返回jQuery里包含的第index+1个DOM元素(第一个元素的索引为0)。

上面的两个get方法非常重要,它们可以将jQuery对象再次恢复成DOM对象。根据前面的介绍可知,jQuery的思路是把所有DOM对象包装成jQuery对象来处理,这种方式简单优雅,但总有些地方有失灵活。如果开发者需要操作DOM元素,则可通过这两个方法把jQuery对象转换成DOM对象。尤其需要指出的是,无参的get()方法总是返回一个数组—即使原始的jQuery对象里只有一个DOM对象,调用jQuery对象的无参的get()方法也将返回一个长度为1的数组。

返回索引的方法

index(element或者selector):该方法返回element元素(或匹配selector选择器的元素)在当前jQuery对象中的索引,其中element既可以是jQuery里包含的多个DOM对象之一,也可以是由任一DOM对象包装成的jQuery对象。

转为数组的方法

toArray():将该jQuery对象中包含的所有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
<!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元素，并迭代处理每个元素
        $("div>div").each(function (i) {
            this.innerHTML += " 添加的内容" + i;
        });
        // 返回div之内的所有div元素的个数，下面将输出6
        console.log($("div>div").length);
        // 获取div之内的第二个div元素，下面将输出“轻量级Java EE企业应用实战...”
        console.log($("div>div").get(1).innerHTML);
        // 获取id为java的div元素。注意：$("#java").get()返回一个数组
        console.log($("#java").get()[0].innerHTML);
        // 所有div元素之内，id为ejb的div的索引，下面将输出4.
        console.log($("div>div").index($("#ejb")));
    </script>
</body>
</html>

jQuery对象和DOM对象之间的转换

jQuery对象转成DOM对象

调用jQuery对象的无参的get方法或get(index)方法可以取得DOM对象.

DOM对象转成jQuery对象

在$()函数(或jQuery()函数)中传入DOM对象作为参数即可把DOM对象包装成jQuery对象.