使用 $.data("value") 和 $.attr("data-value") 的区别

Question

当我使用jQuery.data来改变值时，DOM中的属性值并不会改变。 但是我喜欢当DOM中的属性值改变时，调试起来更容易。

那么使用$().attr("data-value")来改变数据属性是否可以呢？

这只是一个小小的示例，展示了混合使用$().attr和$().data会导致问题：

http://jsfiddle.net/AvRJc/

- nbar

---

当您使用 .data() 时，数据存储在 jQuery 的内部数据结构中，这就是为什么混合使用这两者不起作用的原因。 - Arun P Johny

$().data 读取 data-* 属性的初始值只是一个方便的功能。只要保持一致，您可以使用任何您想要的内容。 - Felix Kling

Answer 1

data 函数管理 jQuery 提供的元素数据缓存，与 data-* 属性没有直接关联。只有在你请求匹配到一个 data-* 属性的键时，data 才会从 data-* 属性中初始化它的信息缓存。

使用 data 来设置数据永远不会更新 data-* 属性。

当然可以使用 attr 来更新属性，你只需要保持一致即可：要么通过 attr 使用 属性 来获取和设置，要么通过 data 来获取和设置，因为它们管理的是不同的内容。

使用 attr 意味着你真正地更新了元素上的属性，这意味着你可以在选择器和 CSS/jQuery 中使用你设置的值，但也意味着你仅能获取和设置字符串类型的值。

使用 data 意味着你仅更新了数据缓存，而非元素本身，这意味着你无法在选择器和 CSS/jQuery 中使用这些值（因为它们未被存储在 DOM 中），但也意味着你可以获取和设置完整范围的 JavaScript 数据类型。

- T.J. Crowder