jQuery Data vs Attr?

问题描述 投票:489回答:3

使用$.data$.attrdata-someAttribute的用法有何不同?

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

javascript jquery html5 custom-data-attribute
3个回答
98
投票

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

$.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()或其他任何地方访问
  • 检查时未在元件上公开显示
  • 可以是对象

0
投票

您可以使用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");
© www.soinside.com 2019 - 2024. All rights reserved.