码迷,mamicode.com
首页 > 编程语言 > 详细

jQuery操作数组的工具方法

时间:2016-05-13 04:26:51      阅读:181      评论:0      收藏:0      [点我收藏+]

标签:

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操作数组的工具方法

标签:

原文地址:http://blog.csdn.net/owen_william/article/details/51339760

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!