jQuery data() 函数是做啥的

Posted 2023-05-08

【中文标题】jQuery data() 函数是做啥的

【英文标题】：what does jQuery data() function dojQuery data() 函数是做什么的

【发布时间】：2010-12-20 04:17:38

【问题描述】：

我还没有找到jquery函数data()有什么用。 谁能给我一些如何使用它的例子吗？

【问题讨论】：

你的意思是docs.jquery.com/Core/data还是docs.jquery.com/Internals/jQuery.data？

【参考方案1】：

它对于将各种对象、字符串、数组等与 DOM 元素相关联非常有用。这是一个有趣的假设用途：

$(document).ready(function()
   $("a").each(function(index, el)
      if(index % 2 == 0) 
         $(this).data('coolColor', 'Orange'); // Set the data
      else 
         $(this).data('coolColor', 'Purple'); // Set the data
   ).click(function(e)
      alert($(this).data('coolColor')); // Retrieve the data
      e.preventDefault();
   );
);

这将选择每个a 标签，如果是奇数则设置Orange，如果是偶数则设置Purple。如果这是您真正想要做的，这不是编写此代码的最佳方式，但它确实说明了如何使用 .data() 函数。

你也可以用它来存储对象：

$("#header").data('headerSettings',
   color: "red",
   cost:  "$25.00",
   time:  1000
);

现在您可以在页面上的任何其他位置访问该数据：

$("#header").data('headerSettings').color;

【讨论】：

我认为它为变量赋值，就像 var color = "orange"

【参考方案2】：

它允许您将任何类型的数据与 DOM 元素相关联。有关示例，请参阅 this 博客文章。

【参考方案3】：

我认为这个问题需要更多的关注。 jQuery 的data API 对于各种用例来说非常强大。

jQuery 的数据函数允许您存储和检索与任何 jQuery 对象相关的任何数据。

主要还可以用来读取html中任意节点上设置的data-属性。

示例 1

HTML: <div id="myNode" data-foo="bar"></div>。

jQuery 代码： $("#myNode").data("foo") //bar

示例 2

同样，我也可以在任何节点上存储一个值。

jQuery 代码：

$("#myNode").data("foo","baz") $("#myNode").data("foo") //baz

这里要注意的重要一点是，当使用数据 API 在便笺上设置数据时，html 不会在 DOM 中更新。如果您想更新 HTML，您可能需要坚持使用 attr("data-foo","baz") 方法。

虽然可以读取存储在 HTML 数据属性中的字符串，但您也可以在使用数据 API 存储值的同时分配对象。

开发人员将对象与节点链接的用例多种多样。

例如

var obj = 
  name : "test"

$("#myNode").data("foo",obj);

$("#myNode").data("foo") === obj //true

来吧，explore the API here.

【参考方案4】：

jQuery documentation 总结得很好：

返回元素的唯一 ID。

通常这个函数只会 内部使用。你可能不会 以这种方式使用 data() 方法。 它 必要时自动调用 使用其他数据时（） 功能。

基本上这个函数的存在是为了支持其他 jQuery 函数。最好忽略这个函数，因为它不是 jQuery API 的公共接口的一部分。

【讨论】：

你指的是jQuery.data，而OP指的是jQuery.fn.data……完全不同。