我不了解jQuery.data（）方法
.data()-Attaches数据到选定元素或从选定元素获取数据。jQuery中的方法
问题：
1）这种方法的目的是什么？
2）运行它时，我看不到创建了data- *属性。那么，data-*属性和由data()jQuery中的方法创建的数据之间有什么区别？
<!--code from w3school -->
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("div").data("greeting", "Hello World");
});
$("#btn2").click(function(){
alert($("div").data("greeting"));
});
});
</script>
</head>
<body>
<button id="btn1">Attach data to div element</button><br>
<button id="btn2">Get data attached to div element</button>
<div></div>
</body>
</html>
繁星coding浏览 223回答 3
3回答
-
RISEBY
一种用例可以是存储实例，下面是伪代码function SomePlugin(element, options) { this.$el = $(element); this.options = options;}SomePlugin.prototype.method = function() { this.$el.toggleClass(this.options.cssClass);}$.fn.somePlugin = function(options) { var somePluginInstance = new SomePlugin(this, options); // store instance as data this.data("somePlugin", somePluginInstance);}用法：$(".element").somePlugin({});var pluginInstance = $(".element").data("somePlugin");pluginInstance.method(); -
交互式爱情
.data（）方法允许您以一种安全的方式附加任何类型的DOM元素的数据，以防止循环引用，从而避免内存泄漏。我们可以为单个元素设置几个不同的值，并在以后检索它们：（文档示例）$( "body" ).data( "foo", 52 );$( "body" ).data( "bar", { isManual: true } );$( "body" ).data( { baz: [ 1, 2, 3 ] } );$( "body" ).data( "foo" ); // 52$( "body" ).data(); // { foo: 52, bar: { isManual: true }, baz: [ 1, 2, 3 ] }“使用data（）方法更新数据不会影响DOM中的属性。要设置data- *属性值，请使用attr。在jQuery 1.4.3之前，.data（obj）完全替换了所有数据。从jQuery 1.4.3开始，数据通过浅合并来扩展。”字体：jquery文档
随时随地看视频慕课网APP
相关分类
JavaScript