jQuery data() 方法

定义和用法

data() 方法向被选元素附加数据，或者从被选元素获取数据。

提示：如需移除数据，请使用 removeData() 方法。

从元素返回数据

从被选元素中返回附加的数据。

语法

$(selector).data(name)

参数

参数	必需的	描述
name	否	规定要取回的数据的名称。如果没有规定名称，则该方法将以对象的形式从元素中返回所有存储的数据。

向元素附加数据

向被选元素附加数据。

语法

$(selector).data(name,value)

参数

参数	必需的	描述
name	是	规定要设置的数据的名称。
value	是	规定要设置的数据的值。

使用对象向元素附加数据

使用带有名称/值对的对象向被选元素附加数据。

语法

$(selector).data(object)

参数

参数	必需的	描述
object	是	规定包含名称/值对的对象。

实例

下例演示了向 <div> 元素附加数据，然后取回该数据：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>欢迎来到菜鸟教程</title>
//此版本是百度cdn 1.11.1，当然你可以使用更高的版本，从2.0版本以上的是不支持ie6-8的
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
   $("#btn1").click(function(){
      $("div").data("name", "Hello World");
      $("div").text("已将数据附加到div元素");
    });
   $("#btn2").click(function(){
      alert($("div").data("name"));
   });
});
</script>
</head>
<body>
   <button id="btn1">将数据附加到div元素</button><br/>
   <button id="btn2">获取数据附加到div元素</button>
   <div></div>
   <p>注意先附加再获取data的值</p>
</body>
</html>

尝试一下

定义和用法

从元素返回数据

向元素附加数据

使用对象向元素附加数据

实例

相关页面