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.结果

jQuery操作数组的工具方法_第1张图片

你可能感兴趣的:(jquery,web开发)