详解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 相关文章推荐
使用ExtJS技术实现的拖动树结点
Aug 05 Javascript
php,js,css字符串截取的办法集锦
Sep 26 Javascript
yui3的AOP(面向切面编程)和OOP(面向对象编程)
May 01 Javascript
详解JavaScript数组和字符串中去除重复值的方法
Mar 07 Javascript
BootStrap智能表单实战系列(九)表单图片上传的支持
Jun 13 Javascript
BootStrap学习笔记之nav导航栏和面包屑导航
Jan 03 Javascript
jQuery validate 验证radio实例
Mar 01 Javascript
JavaScript中构造函数与原型链之间的关系详解
Feb 25 Javascript
浅谈目前可以使用ES10的5个新特性
Jun 25 Javascript
layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)
Sep 23 Javascript
JavaScript实现五子棋小游戏
Oct 26 Javascript
详解vue中v-for的key唯一性
May 15 Vue.js
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/04/16 PHP
php伪静态之APACHE篇
2014/06/02 PHP
php实现搜索类封装示例
2016/03/31 PHP
PHP实现的服务器一致性hash分布算法示例
2018/08/09 PHP
javascript prototype 原型链
2009/03/12 Javascript
jQuery 标题的自动翻转实现代码
2009/10/14 Javascript
基于jquery循环map功能的代码
2011/02/26 Javascript
js添加table的行和列 具体实现方法
2013/07/22 Javascript
js和php如何获取当前url的内容
2013/09/22 Javascript
jquery map方法使用示例
2014/04/23 Javascript
jQuery实用函数用法总结
2014/08/29 Javascript
jQuery找出网页上最高元素的方法
2015/03/20 Javascript
win7下安装配置node.js+express开发环境
2015/12/06 Javascript
javascript事件的传播基础实例讲解(35)
2017/02/14 Javascript
JavaScript中数组Array.sort()排序方法详解
2017/03/01 Javascript
JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)
2017/03/30 Javascript
Vue组件实例间的直接访问实现代码
2017/08/20 Javascript
webpack配置proxyTable时pathRewrite无效的解决方法
2018/12/13 Javascript
react组件从搭建脚手架到在npm发布的步骤实现
2019/01/09 Javascript
js中事件对象和事件委托的介绍
2019/01/21 Javascript
layui的表单提交以及验证和修改弹框的实例
2019/09/09 Javascript
微信小程序报错: thirdScriptError的错误问题
2020/06/19 Javascript
小程序实现列表倒计时功能
2021/01/29 Javascript
[57:55]完美世界DOTA2联赛PWL S3 Magma vs Phoenix 第二场 12.12
2020/12/16 DOTA
python备份文件以及mysql数据库的脚本代码
2013/06/10 Python
Python函数可变参数定义及其参数传递方式实例详解
2015/05/25 Python
Python数据可视化库seaborn的使用总结
2019/01/15 Python
django ManyToManyField多对多关系的实例详解
2019/08/09 Python
opencv转换颜色空间更改图片背景
2019/08/20 Python
教你一分钟在win10终端成功安装Pytorch的方法步骤
2021/01/28 Python
联想哥伦比亚网上商城:Lenovo Colombia
2017/01/10 全球购物
SmartBuyGlasses意大利:购买太阳镜、眼镜和隐形眼镜
2018/11/20 全球购物
Madewell澳大利亚官方网站:美国休闲服饰品牌
2019/07/18 全球购物
美国亚马逊旗下男装网站:East Dane(支持中文)
2019/09/25 全球购物
校三好学生主要事迹
2014/01/11 职场文书
使用 Apache Superset 可视化 ClickHouse 数据的两种方法
2021/07/07 Servers