详解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和HTML5利用canvas构建猜牌游戏实现算法
Jul 17 Javascript
jquery validation验证身份证号,护照,电话号码,email(实例代码)
Nov 06 Javascript
js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动
Apr 29 Javascript
原生javascript实现拖动元素示例代码
Sep 01 Javascript
AngularJS 遇到的小坑与技巧小结
Jun 07 Javascript
BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
Dec 01 Javascript
如何使用bootstrap框架 bootstrap入门必看!
Apr 13 Javascript
微信小程序之网络请求简单封装实例详解
Jun 28 Javascript
vue组件实现弹出框点击显示隐藏效果
Oct 26 Javascript
Nginx设置为Node.js的前端服务器方法总结
Mar 27 Javascript
浅谈javascript中的prototype和__proto__的理解
Apr 07 Javascript
Vue filter 过滤当前时间 实现实时更新效果
Dec 20 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数组编码转换示例详解
2014/03/11 PHP
php常用数学函数汇总
2014/11/21 PHP
PHP框架性能测试报告
2016/05/08 PHP
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
PHP PDOStatement::closeCursor讲解
2019/01/30 PHP
IE无法设置短域名下Cookie
2010/09/23 Javascript
jquery操作下拉列表、文本框、复选框、单选框集合(收藏)
2014/01/08 Javascript
js或jquery实现页面打印可局部打印
2014/03/27 Javascript
javascript事件冒泡和事件捕获详解
2015/05/26 Javascript
jQuery实现弹出窗口中切换登录与注册表单
2015/06/05 Javascript
Backbone.js框架中Model与Collection的使用实例
2016/05/07 Javascript
js中获取键盘事件的简单实现方法
2016/10/10 Javascript
简单几步实现返回顶部效果
2016/12/05 Javascript
微信公众号开发 实现点击返回按钮就返回到聊天界面
2016/12/15 Javascript
微信小程序 css使用技巧总结
2017/01/09 Javascript
多个上传文件用js验证文件的格式和大小的方法(推荐)
2017/03/09 Javascript
浅谈vue的踩坑路
2017/08/31 Javascript
捕获未处理的Promise错误方法
2017/10/13 Javascript
vue引入新版 vue-awesome-swiper插件填坑问题
2018/01/25 Javascript
通过jquery.cookie.js实现记住用户名、密码登录功能
2018/06/20 jQuery
Ant Design Pro 下实现文件下载的实现代码
2019/12/03 Javascript
Flask框架中密码的加盐哈希加密和验证功能的用法详解
2016/06/07 Python
Python实现可获取网易页面所有文本信息的网易网络爬虫功能示例
2018/01/15 Python
Python基于多线程实现抓取数据存入数据库的方法
2018/06/22 Python
基于DataFrame改变列类型的方法
2018/07/25 Python
python 读取数据库并绘图的实例
2019/12/03 Python
python实现计算器简易版
2020/12/17 Python
李维斯牛仔裤荷兰官方网站:Levi’s NL
2020/08/23 全球购物
群众路线教育实践活动个人对照检查材料
2014/09/22 职场文书
三严三实民主生活会发言稿
2014/10/13 职场文书
关于有小孩的离婚协议书
2014/10/26 职场文书
2014年售票员工作总结
2014/11/19 职场文书
2014年出纳工作总结与计划
2014/12/09 职场文书
情感电台广播稿
2015/08/18 职场文书
2015年度个人工作总结报告
2015/10/24 职场文书
医院中层管理人员培训心得体会
2016/01/11 职场文书