jQuery .data() 和 setAttribute 之间的区别 [重复]答案

【问题标题】：Difference between jQuery .data() and setAttribute [duplicate]jQuery .data() 和 setAttribute 之间的区别 [重复]
【发布时间】：2014-12-13 23:01:37
【问题描述】：

1) 当设置用户数据（见Live demo）时：

  document.getElementById('myelement1').setAttribute('data-size', 20);

我可以在使用浏览器的检查器分析元素时看到这一点：

<div id="myelement1" data-size="20">Blah</div>

2) 使用 jQuery 设置用户数据时：

$('#myelement2').data('size', 20);

我可以在使用浏览器的检查器分析元素时看到这一点：

<div id="myelement2">Blah</div>

为什么元素存在于 1) 中的 DOM 中而不存在于 2) 中？

jQuery .data('size', 20) 是如何存储数据的，如果它不在 DOM 中，则存储在哪里？ （我在 JS 方面不够先进，无法在代码中找到执行此操作的确切位置）

【问题讨论】：

data() 存储在一个内部对象中，$.cache。

标签： javascript jquery

【解决方案1】：

jQuery 不会为元素附加物理属性。它保留了一个内部对象（称为cache），用于保存数据，并引用与其对应的元素 - 它不存储在 DOM 或属性中。

【讨论】：

【解决方案2】：

元素的数据存储在内部，即存储在 jQuery 代码本地的集合中。

来自data method的文档：

"data-属性在第一次拉取data属性时被访问，然后不再被访问或变异（所有数据然后将值存储在 jQuery 内部）。”

请注意，虽然data 方法不会更改数据属性，但设置数据属性会将其放入 DOM 并使用data 方法使其可用：

$('#myelement2').attr('data-size', 20);

console.log($('#myelement2').data('size')); // shows 20

演示：http://jsfiddle.net/kq93n878/

【讨论】：