3.4.2 数据存储的相关方法
jQuery允许把jQuery对象当成一个临时的”数据存储中心”,开发者能以key:value对的形式将数据存储到jQuery对象里,并从jQuery对象里取出之前存储的数据,也可以删除之前存储的数据。存入jQuery对象里的数据既可以是基本类型值,也可以是数组、JavaScript对象等。
jQuery对象支持的数据存储相关方法
注意,下面介绍的方法是保存到jQurey对象中的.
data方法
data方法即可以将name:value对存入jQuery对象中,也可以从jQuery对象中取出数据
data方法存入数据到jQuery对象中
| 方法 |
描述 |
data(name,value) |
向jQuery对象里存储name:value的数据对。 |
data(object) |
向jQuery对象中一次存入多个name:value数据对。其中object是一个形如{name:value...}的对象。 |
data方法从jQuery对象中取出数据
| 方法 |
描述 |
data() |
获取jQuery对象中存储的所有数据。该方法返回一个{name:value...}形式的对象。 |
data(name) |
获取jQuery对象里存储的key为name的数据。 |
删除jQuery对象中的数据
| 方法 |
描述 |
removeData([name]) |
删除jQuery对象里存储的key为name的数据。 |
removeData([list]) |
删除list所列出的多个key对应的数据。list既可是多个key组成的数组,也可是空格隔开的多个key。 |
jQuery命名空间下提供的数据存储相关的工具方法
上面介绍的data方法是把数据存储到jQuery对象中的,如果想把数据存储到其他对象中,jQuery命名空间下也提供了一些用于将数据存储到某个元素上的工具方法。
jQuery命名空间下提供的方法类似Java中的静态方法,类似静态方法可以直接通过类名调用,而jQuery命名空间下的方法可以直接通过jQuery关键字调用。
存储键值对的方法
| 方法 |
描述 |
jQuery.data(element,key,value) |
在第一个参数element元素中存储key:value数据对。 |
读取键值对的方法
| 方法 |
描述 |
jQuery.data(element,key) |
获取第一个参数element元素中指定key对应的value值。 |
jQuery.data(element) |
获取element元素中所有key:value对。 |
删除键值对的方法
| 方法 |
描述 |
jQuery.removeData(element [,key]) |
删除element元素中指定key对应的数据项。 |
判断是否有数据
| 方法 |
描述 |
jQuery.hasData(element) |
判断element元素中是否已存储数据。 |
程序示例
下面的代码示范了jQuery的数据存储相关方法。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
| <!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 操作数据的工具方法 </title>
</head>
<body>
<div>
最有趣的人物是
<span></span>， 它的年龄是：
<span></span>
</div>
<script type="text/javascript" src="../jquery-3.1.1.js">
</script>
<script type="text/javascript">
var target = $("<div>java</div>");
target.data("book", "疯狂Java讲义");
console.log(target.data("book"));
target.removeData("book");
console.log(target.data("book"));
var div = $("body>div")[0];
$.data(div, "test", { name: "孙悟空", age: 500 });
$("span:first").text(jQuery.data(div, "test").name);
$("span:last").text(jQuery.data(div)["test"].age);
$.removeData(div);
console.log($.hasData(div));
</script>
</body>
</html>
|