jQuery Data vs Attr？

Question

使用$.data时$.attr和data-someAttribute的用法有何不同？

我的理解是$.data存储在jQuery的$.cache中，而不是DOM中。因此，如果我想使用$.cache进行数据存储，我应该使用$.data。如果我想添加HTML5数据属性，我应该使用$.attr("data-attribute", "myCoolValue")。

Answer 1

两者之间的主要区别在于它的存储位置和访问方式。

$.fn.attr将信息直接存储在元素中，这些属性在检查时是公开可见的，也可以从元素的本机API中获得。

$.fn.data将信息存储在ridiculously obscure地方。它位于一个名为data_user的闭合局部变量中，该变量是本地定义的函数Data的一个实例。无法直接从jQuery外部访问此变量。

使用attr()设置数据

• 可从$(element).attr('data-name')访问
• 可从element.getAttribute('data-name')访问，
• 如果价值是data-name的形式，也可以从$(element).data(name)和element.dataset['name']和element.dataset.name访问
• 检查时在元件上可见
• 不能是对象

使用.data()设置数据

• 只能从.data(name)访问
• 无法从.attr()或其他任何地方访问
• 检查时未在元件上公开显示
• 可以是对象

Answer 2

您可以使用data-*属性嵌入自定义数据。 data-*属性使我们能够在所有HTML元素上嵌入自定义数据属性。

jQuery .data()方法允许您以一种安全的方式从循环引用中获取/设置任何类型的数据到DOM元素，从而避免内存泄漏。

jQuery .attr()方法仅为匹配集中的第一个元素获取/设置属性值。

例：

<span id="test" title="foo" data-kind="primary">foo</span>

$("#test").attr("title");
$("#test").attr("data-kind");
$("#test").data("kind");
$("#test").data("value", "bar");