jQuery 数据 - data() 方法 概述
jQuery 2022-06-01 18:40:57小码哥的IT人生shichen
jQuery 数据 - data() 方法
实例
向元素附加数据，然后取回该数据：
$("#btn1").click(function(){
$("div").data("greeting", "Hello World");
});
$("#btn2").click(function(){
alert($("div").data("greeting"));
});
完整实例：
<html>
<head>
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn1").click(function(){
$("div").data("greeting", "Hello World");
});
$("#btn2").click(function(){
alert($("div").data("greeting"));
});
});
</script>
</head>
<body>
<button id="btn1">把数据添加到 div 元素</button><br />
<button id="btn2">获取已添加到 div 元素的数据</button>
<div></div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
定义和用法
data() 方法向被选元素附加数据，或者从被选元素获取数据。
从元素返回数据
从被选元素中返回附加的数据。
语法
$(selector).data(name)
| 参数 | 描述 |
|---|---|
| name |
可选。规定要取回的数据的名称。 如果没有规定名称，则该方法将以对象的形式从元素中返回所有存储的数据。 |
向元素附加数据
向被选元素附加数据。
语法
$(selector).data(name,value)
| 参数 | 描述 |
|---|---|
| name | 必需。规定要设置的数据的名称。 |
| value | 必需。规定要设置的数据的值。 |
使用对象向元素附加数据
使用带有名称/值对的对象向被选元素添加数据。
语法
$(selector).data(object)
完整实例：
<html>
<head>
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
testObj=new Object();
testObj.greetingMorn="Good Morning!";
testObj.greetingEve="Good Evening!";
$("#btn1").click(function(){
$("div").data(testObj);
});
$("#btn2").click(function(){
alert($("div").data("greetingEve"));
});
});
</script>
</head>
<body>
<button id="btn1">把数据添加到 div 元素</button><br />
<button id="btn2">获取已添加到 div 元素的数据</button>
<div></div>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
| 参数 | 描述 |
|---|---|
| object | 必需。规定包含名称/值对的对象。 |
