jQuery数据存储的相关方法

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)