详解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 相关文章推荐
javascript中clone对象详解
Dec 03 Javascript
jQuery+css实现百度百科的页面导航效果
Dec 16 Javascript
jQuery中:disabled选择器用法实例
Jan 04 Javascript
基于jquery插件实现拖拽删除图片功能
Aug 27 Javascript
Node.js配合node-http-proxy解决本地开发ajax跨域问题
Aug 31 Javascript
javascript实现页面滚屏效果
Jan 17 Javascript
详谈js遍历集合(Array,Map,Set)
Apr 06 Javascript
Javascript循环删除数组中元素的几种方法示例
May 18 Javascript
vue页面切换到滚动页面显示顶部的实例
Mar 13 Javascript
JavaScript数据结构与算法之检索算法示例【二分查找法、计算重复次数】
Feb 22 Javascript
javascript实现点击星星小游戏
Dec 24 Javascript
解决vue 退出动画无效的问题
Aug 09 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 addslashes 函数详细分析说明
2009/06/23 PHP
《PHP编程最快明白》第七讲:php图片验证码与缩略图
2010/11/01 PHP
php教程之phpize使用方法
2014/02/12 PHP
PHP学习笔记之字符串编码的转换和判断
2014/05/22 PHP
PHP框架Laravel插件Pagination实现自定义分页
2020/04/22 PHP
php 访问oracle 存储过程实例详解
2017/01/08 PHP
获取DOM对象的几种扩展及简写
2006/10/09 Javascript
setInterval 和 setTimeout会产生内存溢出
2008/02/15 Javascript
javascript setTimeout和setInterval计时的区别详解
2013/06/21 Javascript
jQuery学习笔记之jQuery动画效果
2013/09/09 Javascript
jquery自动切换tabs选项卡的具体实现
2013/12/24 Javascript
jquery引用方法时传递参数原理分析
2014/10/13 Javascript
JavaScript设计模式之抽象工厂模式介绍
2014/12/28 Javascript
jQuery匹配文档链接并添加class的方法
2015/06/26 Javascript
JS组件系列之Bootstrap table表格组件神器【终结篇】
2016/05/10 Javascript
JavaScript遍历求解数独问题的主要思路小结
2016/06/12 Javascript
用iframe实现不刷新整个页面上传图片的实例
2016/11/18 Javascript
Bootstrap基本样式学习笔记之图片(6)
2016/12/07 Javascript
手机端转换rem适应
2017/04/01 Javascript
12个非常有用的JavaScript技巧
2017/05/17 Javascript
react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面
2019/11/12 Javascript
vue引入静态js文件的方法
2020/06/20 Javascript
如何正确解决VuePress本地访问出现资源报错404的问题
2020/12/03 Vue.js
Python 执行字符串表达式函数(eval exec execfile)
2014/08/11 Python
python字符串string的内置方法实例详解
2018/05/14 Python
Python图像处理PIL各模块详细介绍(推荐)
2019/07/17 Python
python并发编程多进程之守护进程原理解析
2019/08/20 Python
在django admin详情表单显示中添加自定义控件的实现
2020/03/11 Python
如何在pycharm中安装第三方包
2020/10/27 Python
英国知名的皮手套品牌:Dents
2016/11/13 全球购物
Shell脚本如何向终端输出信息
2014/04/25 面试题
个人自我评价和职业目标
2014/01/24 职场文书
医疗器械售后服务承诺书
2014/05/21 职场文书
私用公车造成事故检讨书
2014/11/16 职场文书
复兴之路观后感
2015/06/02 职场文书
解决使用了nginx获取IP地址都是127.0.0.1 的问题
2021/09/25 Servers