浅谈变量对jQuery对象集的引用

<div id="testOrder">
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
</div>

var hs=$("#testOrder").children();
document.getElementsByTagName('h1')[0].innerHTML="newh1";
alert($(hs).text());
$("#testOrder").append("<h4>h4</h4>");
$("h3").remove();
alert($(hs).text());
hs=$("#testOrder").children();
alert($(hs).text());

使用变量hs代表testOrder的子节点对应的jQuery对象集，在赋值时，包含h1,h2,h3三个节点。

修改DOM节点内容

document.getElementsByTagName('h1')[0].innerHTML="newh1";

这里特意使用一个原生的javascript方法来改变DOM元素，将h1的文本改为newh1；
此时执行

alert($(hs).text());

结果为”newh1h2h3”，说明hs所代表的jQuery对象集中，h1对应的jQuery对象的内容变了。
此时，执行

$("#testOrder").append("<h4>h4</h4>");
$("h3").remove();

为testOrder新增一个子节点h4，并移除一个子节点h3，此时，再次执行

alert($(hs).text());

结果仍然是”newh1h2h3”，说明hs所代表的jQuery对象集，仍然只包含h1,h2,h3对应的jQuery对象，并没有添加h4对应的jQuery对象。
通过

hs=$("#testOrder").children();

重新赋值后，再执行

alert($(hs).text());

结果变成”newh1h2h4”了。

总结

执行

var hs=$("#testOrder").children();

之后，hs保存了(“#testOrder”)的所有子节点，此刻，它等价于$(“#testOrder”).children()，保存了h1,h2,h3对应的jQuery对象。但是它并没有和$(“#testOrder”).children()绑定。当$(“#testOrder”)新增或移除了节点时，这时候，调用$(“#testOrder”).children()方法，会重新获取最新的DOM子节点，但是，此时，hs这个变量对应的仍然是之前的h1,h2,h3。
当h1的内容变化时，hs中的h1的内容也会变化，这说明变量中保存的具体的jQuery对象和相应的DOM节点是绑定的。