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

字数476 大约花费2分钟

目录

  1. 1. 修改 DOM 节点内容
  2. 2. 总结
1
2
3
4
5
<div id="testOrder">
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
</div>
1
2
3
4
5
6
7
8
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 节点内容

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

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

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

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

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

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

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

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

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

重新赋值后,再执行

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

结果变成”newh1h2h4”了。

总结

执行

1
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 节点是绑定的。

谈谈 IT的文章均为原创或翻译(翻译会注明外文来源),转载请以链接形式标明本文地址: http://tantanit.com/qian-tan-bian-liang-dui-jquery-dui-xiang-ji-de-yin-yong/

谈谈IT

欢迎关注官方微信公众号获取最新原创文章