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的数据存储相关方法。

<!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>");
		// 向jQuery对象里添加book数据
		target.data("book", "疯狂Java讲义");
		// 访问jQuery对象里的book数据，将输出"疯狂Java讲义"
		console.log(target.data("book"));
		// 删除jQuery对象里的book数据
		target.removeData("book");
		// 再次访问jQuery对象里的book数据，将输出"undefined"
		console.log(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);
		// 删除div元素上的数据
		$.removeData(div);
		// 判断div元素上是否有数据
		console.log($.hasData(div));
	</script>
</body>

</html>

原文链接: 3.4.2 数据存储的相关方法