javascript - jQuery 缓存选定的元素？

Question

所以我使用这段代码来:

$('.something').on('click', function () {
  console.log($(this).data('id'));
}

并且出于某种原因，如果我使用检查器修改数据 ID，jQuery 仍然会看到开始时存在的 ID。但是，我使用 JS 尝试了同样的事情，它确实看到了变化。这让我想知道 jQuery 是否以某种方式缓存所选元素并使用它们而不是实际的 DOM。

谁能解释一下发生了什么以及 jQuery 如何在后台进行事件绑定(bind)？

稍后编辑:我想说明我说的是我放在 HTML 中的“data-”属性，而不是 jQuery 提供的“.data()”。不确定是否是同一件事。

Answer 1

jQuery caches elements selected?

没有。但是 data 管理的数据存储在由 jQuery 维护的对象缓存中，由 jQuery 添加到元素的唯一标识符作为键(以便它可以查找数据)。 data 仅从 data-* 属性初始化，它不是它们的访问器。它既多又少。

---

如果您有兴趣，您可以将其视为元素实例上的“expando”属性，它将以“jquery”开头并附有一个长数字(目前；它没有记录——对于很好的理由——所以这可能会改变):

var foo = $("#foo");
console.log(foo.data("info")); // hi there
console.log("Expando name: " + Object.getOwnPropertyNames(foo[0]).find(name => name.startsWith("jQuery")));

<div id="foo" data-info="hi there"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>