Question

在页面加载时，我存储对字段的引用：

var firstNameField = $('input[name=firstName]');

在任何情况下，该引用都将变为“陈旧的”，这意味着DOM中该输入元素的属性或属性可能会更改，并且引用该元素的jQuery元素不再具有正确的值？

换句话说，在什么情况下，与基础jQuery元素变化有关，我需要重新初始化DOM对象？

Answer 1

在任何情况下，该引用都将变为“陈旧”，这意味着DOM中该输入元素的属性或属性可能会发生变化，而引用该元素的jQuery元素将不再具有正确的值？

那件事不会发生，不。 jQuery仅包含一组处理元素。这些是实际的元素，因此，如果它们的状态发生变化（例如，属性已更改等），当您从jQuery集合中获取该状态信息时，它将进入实际的DOM元素，因此获取当前信息。例如：

const d = $("#target");
console.log("before", d.attr("data-example")); // undefined
// Change it without using jQuery
document.getElementById("target").setAttribute("data-example", "updated");
console.log("after ", d.attr("data-example")); // "updated"

<div id="target"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

可能会发生，但更罕见的是，可以使用不同的元素替换。在这种情况下，jQuery将引用 old 元素，而不是新元素：

const s = $("#wrapper span");
console.log("before", s.text()); // "This is the initial span"
// Completely replace that span with a different element
$("#wrapper").html("<span>This is the new span</span>");
// The jQuery set is still referring to the old span element
console.log("before", s.text()); // "This is the initial span"

<div id="wrapper">
    <span>This is the initial span</span>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

这不是特定于jQuery的，如果您也直接直接使用该元素，则为true：

const s = document.querySelector("#wrapper span");
console.log("before", s.textContent); // "This is the initial span"
// Completely replace that span with a different element
document.getElementById("wrapper").innerHTML = "<span>This is the new span</span>";
// `s` is still referring to the old span element
console.log("before", s.textContent); // "This is the initial span"

<div id="wrapper">
    <span>This is the initial span</span>
</div>

（IE在这方面有一些怪异的行为，因为它会清除掉旧的文本元素，但是严重是非标准的，IE越来越过时了。）

DOM确实提供了一些 live 集合，只要您返回到该元素的集合，就会得到新的集合：

const wrapper = document.getElementById("wrapper");
const col = wrapper.getElementsByTagName("span"); // Live collection
console.log("before", col[0].textContent); // "This is the initial span"
// Completely replace that span with a different element
wrapper.innerHTML = "<span>This is the new span</span>";
// `col`'s contents are updated dynamically when the DOM changes
console.log("before", col[0].textContent); // "This is the new span"

<div id="wrapper">
    <span>This is the initial span</span>
</div>

您从NodeList获得的集合（querySelectorAll）是快照，大多数是实时集合，例如getElementsByTagName，getElementsByClassName或{元素等的{1}}或children属性。

Answer 2

jQuery将保留对实际HTMLElement的引用。只要此元素在DOM中，它就会有效。如果您以某种方式删除了元素（或者由于var firstNameField = $('input[name=firstName]');之后插入了元素，例如由于Ajax），则需要“重新初始化”。

当然，您可以做类似firstNameField[0] = null这样的愚蠢的事情，并覆盖对该元素的引用。

什么时候需要重新初始化jQuery元素

2 个答案: