jQuery .data（）和setAttribute 之间的区别

1）在设置用户数据时 （参见实时演示 ）：

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

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

 
Blah 

---

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

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

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

 
Blah 

---

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

jQuery .data('size', 20)存储数据，以及它在DOM中的位置？ （我在JS中不够先进，无法在代码中找到确切的位置）

Answer 1

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

Answer 2

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

从data方法的文档：

“数据属性在第一次访问数据属性时被拉出，然后不再被访问或变异（然后所有数据值都在内部存储在jQuery中）。”

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

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

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