详解jQuery中的empty、remove和detach


Posted in Javascript onApril 11, 2016

 通过一张对比表来解释几个方法之间的不同

详解jQuery中的empty、remove和detach

三者都有把元素移除的作用,但细微的差别,造就了它们的使命不同。

最权威的解释当然是jQuery_API咯,下面是API中关于他三儿的部分截取。

一、empty:

This method removes not only child (and other descendant) elements, but also any text within the set of matched elements. This is because, according to the DOM specification, any string of text within an element is considered a child node of that element.To avoid memory leaks, jQuery removes other constructs such as data and event handlers from the child elements before removing the elements themselves. If you want to remove elements without destroying their data or event handlers (so they can be re-added later), use .detach() instead.

注意:加粗的部分,通过empty移除后代元素,会移除其事件的。

为什么呢?

防止内存泄露!!!

二、remove:

Similar to .empty(), the .remove() method takes elements out of the DOM. Use .remove() when you want to remove the element itself, as well as everything inside it. In addition to the elements themselves, all bound events and jQuery data associated with the elements are removed. To remove the elements without removing data and events, use .detach() instead.

remove和empty方法一样,都会移除元素的事件句柄,从而避免内存泄露。

区别:remove包含了移除事件本身,而empty是后代元素。

三、detach:

从empty和remove的介绍中(英文斜体部分),可以或多或少得知,detach是不会移除事件句柄的。

那么我们再来看看详细的API讲解:

The .detach() method is the same as .remove(), except that .detach() keeps all jQuery data associated with the removed elements. This method is useful when removed elements are to be reinserted into the DOM at a later time.

咦,什么意思?

看了detach的注解,不知道大家有没有眼前一亮,detach不能用来删除废弃的元素。

为什么呢?

因为它保留了事件驱动嘛,这样不就会造成内存泄露么。

所以要删除以后不再利用的元素时,使用empty或者remove。

那要detach有何用?

用处大了。

当我们要对一个元素进行大规模的增删改的时候,我们可以用detach将这个元素提取出来,然后在这个元素上进行操作,而不是在整个dom文档中进行操作。

好处就是:减少对整个dom文档的修改,从而减少页面重绘;而且对整个dom文档进行操作,在ie下还可能会造成内存泄露哦。所以稳妥起见,还是利用detach这一神器吧。

下面是一个demo,首先对#container元素绑定click事件(事件委托),然后利用detach将其脱离文档,然后再创建两个child元素,追加到#container元素中,最后将#container重新添加到body后。

<!DOCTYPE html> 
<head>
<title>jQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
div.monkey, #container {
width:120px;
height:120px;
line-height:60px;
}
div.monkey {
border:1px solid black;
} 
</style>
</head>
<body>
<div class="monkey"> </div>
<div id="container"> </div>
<script src="jquery-1.12.0.js"></script>
<script>
$(function(){
//事件代理
$('#container').on('click',function( event ){
console.log( $(event.target).text() );
});
//利用detach将container从dom文档中剥离开
var container = $('#container').detach();
var child1 = '<div>I am Monkey</div>';
var child2 = '<div>Monkey is me</div>';
//将child1、child2插入container中
$(container).append( child1 )
.append( child2 );
//将container重新插入body中 
$('body').append( container );
}); 
</script>
</body>
</html>

以上所述是小编给大家介绍的jQuery中的empty、remove和detach的区别,希望对大家有所帮助!

Javascript 相关文章推荐
js不完美解决click和dblclick事件冲突问题
Jul 16 Javascript
文字不间断滚动(上下左右)实例代码
Apr 21 Javascript
JS的事件绑定深入认识
Jun 26 Javascript
使用javascript实现雪花飘落的效果
Jan 13 Javascript
JS判断网页广告是否被浏览器拦截过滤的代码
Apr 05 Javascript
整理Javascript数组学习笔记
Nov 29 Javascript
使用vue如何构建一个自动建站项目
Feb 05 Javascript
JavaScript数据结构与算法之二叉树插入节点、生成二叉树示例
Feb 21 Javascript
Vue.js页面中有多个input搜索框如何实现防抖操作
Nov 04 Javascript
p5.js绘制创意自画像
Nov 04 Javascript
JS实现瀑布流效果
Mar 07 Javascript
JSON stringify方法原理及实例解析
Oct 23 Javascript
JQuery导航菜单选择特效
Apr 11 #Javascript
JavaScript实现图片自动加载的瀑布流效果
Apr 11 #Javascript
javascript冒泡排序小结
Apr 10 #Javascript
javascript原生ajax写法分享
Apr 10 #Javascript
Javascript实现苹果悬浮虚拟按钮
Apr 10 #Javascript
jQuery实现点击水纹波动动画
Apr 10 #Javascript
JavaScript数据绑定实现一个简单的 MVVM 库
Apr 08 #Javascript
You might like
PHP 高手之路(一)
2006/10/09 PHP
PHP基于mssql扩展远程连接MSSQL的简单实现方法
2016/10/08 PHP
PHP实现多关键字加亮功能
2016/10/21 PHP
在网页中控制wmplayer播放器
2006/07/01 Javascript
JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)
2010/02/15 Javascript
javascript实现的在当前窗口中漂浮框的代码
2010/03/15 Javascript
jquery 图片 上一张 下一张 链接效果(续篇)
2010/04/20 Javascript
ashx文件获取$.ajax()方法发送的数据
2016/05/26 Javascript
BootStrap tooltip提示框使用小结
2016/10/26 Javascript
利用BootStrap的Carousel.js实现轮播图动画效果
2016/12/21 Javascript
JS创建Tag标签的方法详解
2017/06/09 Javascript
JS实现的走迷宫小游戏完整实例
2017/07/19 Javascript
Node.js中使用mongoose操作mongodb数据库的方法
2017/09/12 Javascript
用js实现每隔一秒刷新时间的实例(含年月日时分秒)
2017/10/25 Javascript
NodeJS爬虫实例之糗事百科
2017/12/14 NodeJs
jQuery Dom元素操作技巧
2018/02/04 jQuery
vue单页应用在页面刷新时保留状态数据的方法
2018/09/21 Javascript
angular将html代码输出为内容的实例
2018/09/30 Javascript
微信小程序实现分页加载效果
2020/11/19 Javascript
Python实例之wxpython中Frame使用方法
2014/06/09 Python
Python中用memcached来减少数据库查询次数的教程
2015/04/07 Python
python的继承知识点总结
2018/12/10 Python
Python编程实现tail-n查看日志文件的方法
2019/07/08 Python
Django Rest framework权限的详细用法
2019/07/25 Python
python中的反斜杠问题深入讲解
2019/08/12 Python
python安装后的目录在哪里
2020/06/21 Python
H5 canvas实现贪吃蛇小游戏
2017/07/28 HTML / CSS
速比涛英国官网:Speedo英国
2019/07/15 全球购物
Linux面试题LINUX系统类
2014/11/19 面试题
九年级历史教学反思
2014/01/27 职场文书
物流专业求职信
2014/06/30 职场文书
违反交通法规检讨书
2014/09/10 职场文书
2014年十一国庆节爱国演讲稿
2014/09/23 职场文书
教师批评与自我批评总结
2014/10/16 职场文书
房屋租房协议书范本
2014/12/04 职场文书
自荐信怎么写
2015/03/04 职场文书