jQuery data（）使实际的HTML保持不变

Question

假设有一个最初设置了data属性的元素：

<div id="mydiv" data-foo="bar"></div>

当我使用jQuery更改此数据键（$('#mydiv').data('foo','baz')）页面的值时，HTML保持不变，$('#mydiv').data('foo')正确返回新值。这应该是这样吗？

Answer 1

是的，它应该以这种方式工作。如果要更改HTML上的实际属性，请使用.setAttribute()或jQuery的.attr()。

.data()的要点是提供一个与DOM对象的属性类似的接口，但没有实际属性可能存在的一些问题。因此，.data()从DOM对象的属性获取其初始值（如果存在匹配的属性），之后，所有操作都与实际的DOM对象分开。新值的存储在纯javascript中，而不是DOM对象上的属性。

.data()的步骤看起来像这样：

var x = $(elem).data("test");

1. 获取elem DOM对象的唯一标识符（DOM对象上的属性）。
2. 如果没有唯一标识符，请创建一个并将其放在DOM对象上以供将来参考。
3. 检查jQuery存储，看是否有该标识符的存储对象。
4. 如果没有存储对象，则检查对象是否有名为"data-test"的属性，并返回其标准化值（如果存在）。
5. 如果存在存储对象，则查看是否存在"test"属性并返回其标准化值。

.data()还会将值规范化为javascript类型，以便"true"或"false"或数字在对象属性时全部存储为字符串变为布尔值或实际数字时您使用.data()阅读它们，从而简化了对它们的使用。

Answer 2

您在源代码html中看到的值不是DOM的确切值，而是初始值正在分配，这是正常行为。数据会更改DOM中的值，但不会更改源html中的值。

Answer 3

试试这个工作 -

 alert($('#mydiv').data('foo'));
   $('#mydiv').attr('data-foo','some');

但警惕它仍然显示BAR

Answer 4

这只会像这样工作。 如果你想改变div的内容，你可以这样做，

$('#mydiv').html('baz');