码迷,mamicode.com
首页 > Web开发 > 详细

jQuery数据存储的相关方法

时间:2016-05-13 04:28:16      阅读:216      评论:0      收藏:0      [点我收藏+]

标签:

1.前言

jQuery允许把jQuery对象当作一个临时的“数据存储中心“,开发者能以key-value对的形式将数据存储到jQuery对象里,并林jQuery对象里取出之前存储的数据,也可以删除之前存储的数据。存入jQuery对象里的数据既可以是基本类型值,也可以是数组、JavaScript对象等。jQuery对象支持的数据存储相关方法如下:

1)        data(name,value):向jQuery对象里存储name:value的数据对。

2)        data(object):向jQuery对象中一次存入多个name:value数据对。其中object是一个形如{name:value…}的对象。

3)        data():获取jQuery对象中存储的所有数据。该方法返回一个{name:value…}形式的对象

4)        removeData([name]):删除jQuery对象里存储的key为name的数据。

5)        removaData([list]):删除list所列出的多个key对应的数据。

除此之外,jQuery命名空间也提供了一些数据存储相关的工具方法,这些工具方法用于将数据存储某个元素上。

1)        jQuery.data(element,key,value):在element元素上存储key:value数据对

2)        jQuery.data(element,key):获取element元素上指定key对应的value值。

3)        jQuery.data(element):获取element元素上所有key:value对。

4)        jQuery.removeData(element[,key]):删除element元素指定keyA对应的数据项

5)        jQuery.hasData(element):判断element元素上是否已存储数据

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>
	最有趣的人物是<span></span>,
	它的年龄是:<span></span>
</div>
<script type="text/javascript" src="../jquery-1.8.0.js">
</script>
<script type="text/javascript">
	var target = $("<div>java</div>");
	// 向jQuery对象里添加book数据
	target.data("book" , "Java");
	// 访问jQuery对象里的book数据,将输出"Java"
	alert(target.data("book"));
	// 删除jQuery对象里的book数据
	target.removeData("book");
	// 再次访问jQuery对象里的book数据,将输出"undefined"
	alert(target.data("book"));
	// 获取页面上第一个div元素
	var div = $("body>div")[0];
	// 向div元素上存储多个key:value对
	$.data(div, "test", { name: "孙悟空", age: 500 });
	// 访问div元素上存储的数据
	$("span:first").text(jQuery.data(div, "test").name);
	$("span:last").text(jQuery.data(div, "test").age);
</script>
</body>
</html>

3.运行结果

技术分享

jQuery数据存储的相关方法

标签:

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

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