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>