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

ゝ一纸荒年。 2023-07-05 13:24 20阅读 0赞

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")的所有子节点，此刻，它等价于KaTeX parse error: Expected 'EOF', got '\#' at position 3: ("\#̲testOrder").chi…("\#testOrder").children()绑定。当KaTeX parse error: Expected 'EOF', got '\#' at position 3: ("\#̲testOrder")新增或移…("\#testOrder").children()方法，会重新获取最新的DOM子节点，但是，此时，hs这个变量对应的仍然是之前的h1,h2,h3。  
当h1的内容变化时，hs中的h1的内容也会变化，这说明变量中保存的具体的jQuery对象和相应的DOM节点是绑定的。

欢迎扫描下方二维码关注微信公众号【谈谈IT】，第一时间获取最新文章。  
![欢迎关注同名公众号][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6LCI6LCISVQ_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6LCI6LCISVQ_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]: https://img-blog.csdnimg.cn/1e8abcdc16fd4426bb4a9a2d27f75a1b.bmp?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA6LCI6LCISVQ=,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center