我不懂jQuery.data（）方法
[英]I don't understand jQuery.data() method
问题描述
.data()-Attaches data to, or gets data from, selected elements. 
.data()-Attaches数据.data()-Attaches到选定元素或从中获取数据。 A method in jQuery jQuery中的方法
Question: 题：
1) What the purpose of this method ? 1）这种方法的目的是什么？
2) When I run it, I see NO data-* attribute created. 2）运行它时，我看不到创建了data- *属性。 So what is the difference between data-* attribute and data created by data() method in jQuery? 那么data-*属性和jQuery中data()方法创建的data()什么区别？
<!--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>
3 个解决方案
解决方案1
1 2019-04-26 03:47:41
One use case can be around storing instance, pseudo code below 一种用例可以是围绕存储实例，下面是伪代码
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);
}
usage: 用法：
$(".element").somePlugin({});
var pluginInstance = $(".element").data("somePlugin");
pluginInstance.method();
解决方案2
1 2019-04-26 06:16:26
The .data() method allow you to attach data of any type of DOM elements in a way that is safe from circular references and therefore from memory leaks. .data（）方法允许您以一种安全的方式附加任何类型的DOM元素的数据，以防止循环引用，从而避免内存泄漏。
We can set several distinct values for a single element and retrieve them later: (Documentation example) 我们可以为单个元素设置几个不同的值，然后在以后检索它们：（文档示例）
$( "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 ] }
"Using the data() method to update data does not affect attributes in the DOM. To set a data-* attribute value, use attr. “使用data（）方法更新数据不会影响DOM中的属性。要设置data- *属性值，请使用attr。
Prior to jQuery 1.4.3, .data( obj ) completely replaced all data. 在jQuery 1.4.3之前，.data（obj）完全替换了所有数据。 Since jQuery 1.4.3, data is instead extended by shallow merge." 从jQuery 1.4.3开始，数据通过浅合并来扩展。”
font: jquery documentation 字体：jquery文档
:) :)
解决方案3
0 2019-04-26 03:50:05
Regarding HTML5 data-* attributes: This low-level method does NOT retrieve the data-* attributes unless the more convenient .data() method has already retrieved them. 关于HTML5 data- *属性：除非更方便的.data（）方法已检索到data- *属性，否则此低级方法不会检索到data- *属性。
The jQuery.data() method allows us to attach data of any type to DOM elements in a way that is safe from circular references and therefore from memory leaks. jQuery.data（）方法允许我们以一种安全的方式将任何类型的数据附加到DOM元素上，从而避免循环引用，从而避免内存泄漏。 We can retrieve several distinct values for a single element one at a time, or as a set. 我们可以一次或作为一组检索单个元素的多个不同值。
You can refer this link for more details. 您可以参考此链接以获取更多详细信息。 I hope this can help you. 希望对您有所帮助。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.