Question

.data()-Attaches数据到选定元素或从选定元素获取数据。 jQuery中的方法

问题：

1）此方法的目的是什么？
2）运行它时，我看不到创建了data- *属性。那么data-*属性和jQuery中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>

Answer 1

一个用例可以是存储实例，下面是伪代码

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();

Answer 2

.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文档

：）

Answer 3

关于HTML5的data- *属性：除非更方便的.data（）方法已检索到data- *属性，否则此低级方法不会检索它们。

jQuery.data（）方法允许我们以一种安全的方式将任何类型的数据附加到DOM元素上，从而避免循环引用，从而避免内存泄漏。我们可以一次或作为一组检索单个元素的多个不同值。

您可以参考此link以获得更多详细信息。希望对您有所帮助。

我不懂jQuery.data（）方法

3 个答案: