jQuery操作数组的工具方法

1.前言

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

1) length:该属性返回jQuery里包含的DOM元素的个数

2) context:该属性返回获取jQuery对象传入的context参数

3) jquery:该属性返回jQuery的版本

4) each(fn(index)):该方法是一个迭代器函数，它将使用fn函数迭代处理jQuery里包含的每个元素。

5) get():该方法返回由jQuery里包含的所有DOM元素组成的数组

6) get(index):该方法返回jQuery里包含的第index+1个DOM元素（第一个元素索引为0）。

7) index(element|selector):该方法返回element元素（或匹配selector选择器的元素）在当下的程序示范了如何使用这些工具方法来操作类数组的jQuery对象。

2.例子

下面程序示范了如何使用这些工具方法来操作类数组的jQuery对象。

<!DOCTYPE html>
<html>
<head><meta name="author" content="OwenWilliam" /><meta http-equiv="Content-Type" content="text/html; charset=GBK" /><title> 操作类数组的工具方法 </title>
</head>
<body>
<div><div id="java">Java</div><div id="javaee">Java EE</div><div id="ajax">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-1.8.0.js">
</script>
<script type="text/javascript">
// 获取div之内所有的div元素，并迭代处理每个元素
$("div>div").each(function(i)
{this.innerHTML += " 添加的内容" + i;
});
// 返回div之内的所有div元素的个数，下面将输出6
alert($("div>div").length);
// 获取div之内的第二个div元素，下面将输出“轻量级Java EE企业应用实战...”
alert($("div>div").get(1).innerHTML);
// 获取id为java的div元素。注意：$("#java").get()返回一个数组
alert($("#java").get()[0].innerHTML);
// 所有div元素之内，id为ejb的div的索引，下面将输出4.
alert($("div>div").index($("#ejb")));
</script>
</body>
</html>

3.结果