详解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一点特殊用法
May 28 Javascript
THREE.JS入门教程(3)着色器-下
Jan 24 Javascript
JS.elementGetStyle(element, style)应用示例
Sep 24 Javascript
jquery cookie的用法总结
Nov 18 Javascript
js获取当前页面的url网址信息
Jun 12 Javascript
jQuery实现异步获取json数据的2种方式
Aug 29 Javascript
微信小程序 出现错误:{&quot;baseresponse&quot;:{&quot;errcode&quot;:-80002,&quot;errmsg&quot;:&quot;&quot;}}解决办法
Feb 23 Javascript
浅谈Vue.js中ref ($refs)用法举例总结
Dec 19 Javascript
关于微信小程序登录的那些事
Jan 08 Javascript
js实现蒙版效果
Jan 11 Javascript
基于vue实现探探滑动组件功能
May 29 Javascript
Javascript 模拟mvc实现点餐程序案例详解
Dec 24 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开发负载均衡指南
2010/07/17 PHP
写出高质量的PHP程序
2012/02/04 PHP
php生成缩略图示例代码分享(使用gd库实现)
2014/01/20 PHP
PHP图像处理类库MagickWand用法实例分析
2015/05/21 PHP
PHP简单实现二维数组的矩阵转置操作示例
2017/11/24 PHP
javascript针对DOM的应用分析(三)
2012/04/15 Javascript
js闭包的用途详解
2014/11/09 Javascript
jQuery实现复选框成对选择及对应取消的方法
2015/03/03 Javascript
jquery通过closest选择器修改上级元素的方法
2015/03/17 Javascript
两款JS脚本判断手机浏览器类型跳转WAP手机网站
2015/10/16 Javascript
vue-cli 默认路由再子路由选中下的选中状态问题及解决代码
2018/09/06 Javascript
Vue.js特性Scoped Slots的浅析
2019/02/20 Javascript
JS实现数组深拷贝的方法分析
2019/03/06 Javascript
OpenLayer学习之自定义测量控件
2020/09/28 Javascript
[03:35]2018年度DOTA2最佳辅助位选手5号位-完美盛典
2018/12/17 DOTA
python如何使用正则表达式的前向、后向搜索及前向搜索否定模式详解
2017/11/08 Python
理解python中生成器用法
2017/12/20 Python
PHP实现发送和接收JSON请求
2018/06/07 Python
numpy中loadtxt 的用法详解
2018/08/03 Python
解决Python一行输出不显示的问题
2018/12/03 Python
Python 中的 global 标识对变量作用域的影响
2019/08/12 Python
python将字典列表导出为Excel文件的方法
2019/09/02 Python
python对批量WAV音频进行等长分割的方法实现
2020/09/25 Python
Python的scikit-image模块实例讲解
2020/12/30 Python
华为旗下电子商务平台:华为商城
2016/08/06 全球购物
英国信箱在线鲜花速递公司:Bloom & Wild
2019/03/10 全球购物
澳大利亚有机化妆品网上商店:The Well Store
2020/02/20 全球购物
英国森林假期:Forest Holidays
2021/01/01 全球购物
简短大学毕业感言
2014/01/18 职场文书
《雕塑之美》教学反思
2014/04/24 职场文书
药品营销专业毕业生自荐信
2014/07/02 职场文书
ktv好的活动方案
2014/08/17 职场文书
领导干部四风问题自我剖析材料
2014/09/25 职场文书
匿名信格式范文
2015/05/27 职场文书
nginx常用命令放入shell脚本详解
2021/03/31 Servers
Mysql效率优化定位较低sql的两种方式
2021/05/26 MySQL