使用$.data
时$.attr
和data-someAttribute
的用法有何不同?
我的理解是$.data
存储在jQuery的$.cache
中,而不是DOM中。因此,如果我想使用$.cache
进行数据存储,我应该使用$.data
。如果我想添加HTML5数据属性,我应该使用$.attr("data-attribute", "myCoolValue")
。
两者之间的主要区别在于它的存储位置和访问方式。
$.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()
或其他任何地方访问您可以使用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");