Question

（首先对不起我的英语）我可以理解分配JQuery选择器找到的JQuery对象，每次使用JQuery选择器时，变量具有更好的性能。我无法理解的部分是JQuery如何检测未被JQuery操纵的更改？这是一个例子：

<div id="divState">First State</div>

$(document).ready(function () {
     var testElement = $("#divState");
     alert(testElement.text());//alerts "First State".
     document.getElementById("divState").innerHTML = "Second State";//Div has changed outside of the JQuery object.
     alert(testElement.text());//alerts "Second State"??? How a variable detects changes.
});

Answer 1

嗯，它知道，但它不知道。。

正如 Blazemonger 所指出的，当你创建一个jQuery对象时，对象中的一个项本质上只是指向页面中实际DOM元素的指针。因此，就像您在示例中显示的那样，只要您检查该对象的属性，它就会检查该元素并向您显示它们当前的状态。如果他们在支票之间改变，你会看到差异。

然而，jQuery不是100％聪明。。。如果你要改变对选择器有用的东西，那么知道更新对象集合并不重新选择它们是不够智能的。例如，看看这个HTML：

<div id="container">
    <div class="similarDivs">Div 1</div>
    <div class="similarDivs">Div 2</div>
    <div class="similarDivs">Div 3</div>
</div>

如果您针对它运行以下代码：

var $mainGroup = $("#container");
var $subGroup = $mainGroup.find(".similarDivs");
console.log($subGroup);

。。。你的控制台会显示：Object[div.similarDivs, div.similarDivs, div.similarDivs]

但是，如果您要使用此代码进行操作：

$mainGroup.children(":eq(0)").removeClass("similarDivs");
console.log($subGroup);

。。。你的控制台会显示：Object[div, div.similarDivs, div.similarDivs]

很明智地看到第一个div不再标记为“similarDivs”类，但从技术上讲，它不够聪明，这意味着它不再是$subGroup选择组。同样，这是因为选择器创建了一堆jQuery对象，这些对象指向符合选择条件的所有DOM元素，在单个时间点。

让$subGroup反映其集合中的更改的唯一方法是重新运行选择器：

$subGroup = $mainGroup.find(".similarDivs");
console.log($subGroup);

。。。结果是：Object[div.similarDivs, div.similarDivs]

这是如此重要的一个最重要的原因（除了知道当你使用选择器:)），是因为Javascript NOT 的行为方式。。。如果你在JS中编写一组类似的功能，你会得到不同的结果：

var mainGroup = document.getElementById("container");
var subGroup = mainGroup.getElementsByClassName("similarDivs");
console.log(subGroup);
mainGroup.children[1].className = "";
console.log(subGroup);

该代码会给你：

HTMLCollection[div.25dd58, div.25dd58, div.25dd58]
HTMLCollection[div.25dd58, div.25dd58]

。。。无需“重新选择”元素（注意：它也返回HTMLCollection，而不是jQuery Object，这可以让您了解行为的差异）

Answer 2

据我所知，jQuery对象包含DOM节点，它本身就是一个活动对象。因此，更改DOM节点的属性会反映在jQuery对象中。

如果你是.clone() jQuery对象，你就会得到你期待的行为：

＆＃13;

$(document).ready(function() {
  var testElement = $("#divState").clone(); // copy the object and store it
  alert(testElement.text()); //alerts "First State".
  document.getElementById("divState").innerHTML = "Second State"; //Div has changed outside of the JQuery object.
  alert(testElement.text()); //alerts "First State" again
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="divState">First State</div>

＆＃13;

Answer 3

jQuery不是一种不同的编程语言。它是一个基于Javascript构建的库。

testElement.text()未检测到任何更改，只需选择testElement的文字并显示到alert

Answer 4

我相当确定testElement只是如何使用优秀的旧JavaScript找到DOM元素的指令，这比通过jQuery选择器找到它更快。因此，每次使用它时，它都会重新找到它。

如果我错了，请纠正我，这只是我基于经验而非知识的假设。

分配给变量的JQuery对象如何检测更改？

4 个答案: