JQuery---DOM修炼盛典 - Go语言中文社区

JQuery---DOM修炼盛典


1.DOM节点的删除

(1)empty()的基本用法

如果我们通过empty方法移除里面div的所有元素,它只是清空内部的html代码,但是标记仍然留在DOM中。

<div class="hello"><p>慕课网</p></div> //通过empty处理 $('.hello').empty() //结果:<p>慕课网</p>被移除 <div class="hello"></div>

(2)remove()的有参用法和无参用法

remove与empty一样,都是移除元素的方法,但是remove会将元素自身移除,同时也会移除元素内部的一切,包括绑定的事件及与该元素相关的jQuery数据。

<div class="hello"><p>慕课网</p></div> $('.hello').on("click",fn)

//通过remove处理 $('.hello').remove() //结果:<div class="hello"><p>慕课网</p></div> 全部被移除 //节点不存在了,同事事件也会被销毁

(3)保留数据的删除操作detach()

如果我们希望临时删除页面上的节点,但是又不希望节点上的数据与事件丢失,并且能在下一个时间段让这个删除的节点显示到页面,这时候就可以使用detach方法来处理。

让一个web元素托管。即从当前页面中移除该元素,但保留这个元素的内存模型对象。

$('p').click(function(e){
        alert(e.target.innerHTML);
    });
    var p;
    $("#bt1").click(function(){
        if(!$("p").length){
            return;
        }
        p = $("p").detach();
    });
    $("bt2").click(function(){
        $("body").append(p);
    });

(4)detach()和remove()区别

204506_4SBO_2624589.png

 

 

 

 

 

 

 

 

转载于:https://my.oschina.net/huangsuhong/blog/675207

版权声明:本文来源CSDN,感谢博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
原文链接:https://blog.csdn.net/weixin_34234829/article/details/92568487
站方申明:本站部分内容来自社区用户分享,若涉及侵权,请联系站方删除。
  • 发表于 2020-03-07 17:30:19
  • 阅读 ( 1146 )
  • 分类:前端

0 条评论

请先 登录 后评论

官方社群

GO教程

猜你喜欢