详解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的区别，希望对大家有所帮助！
相关推荐
-
jQuery删除节点的三个方法即remove()detach()和empty()
jQuery提供了三种删除节点的方法,即remove(),detach()和empty(). 测试所用HTML代码: 复制代码 代码如下: <p title="选择你最喜欢的水果?">你最喜欢的水果是?</p> <ul> <li title="苹果">苹果</li> <li title="橘子">橘子</li> <li title="菠萝"
-
jQuery中remove()方法用法实例
本文实例讲述了jQuery中remove()方法用法.分享给大家供大家参考.具体分析如下: 此方法将会从DOM中删除所有匹配的元素. 说明:remove()方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素,不过除了这个元素本身得以保留之外,其他的比如绑定的事件,附加的数据等都会被移除. 语法结构: 复制代码 代码如下: $(selector).remove(expr) 参数列表: 参数 描述 expr 可选.用于筛选元素的jQuery表达式 实例代码: 实例一:
-
老生常谈jquery中detach()和remove()的区别
JQuery是一个很大强的工具库,在工作中开发中,可是有些方法还是因为不常用到,或是没有注意到而被我们而忽略. remove()和detach()可能就是其中的一个,可能remove()我们用得比较多,而detach()就可能会很少了 通过一张对比表来解释2个方法之间的不同 方法名 参数 事件及数据是否也被移除 元素自身是否被移除 remove 支持选择器表达 是 是(无参数时),有参数时要根据参数所涉及的范围 detach 参数同remove 否 情况同remove remove:移除节点 -
-
jquery之empty()与remove()区别说明
1.empty()是只移除了 指定元素中的所有子节点,拿$("p").empty()来说,他只是把<p>dsfsd</p>中的文本给移除了,而留下 了<p></p>,仍保留其在dom中所占的位置. 2.remove([expr])则是把其从dom中删除,而不会保留其所占的位置. 例:<p>Hello</p>World<p>welcome</p> 执行$("p").empt
-
jQuery中detach()方法用法实例
本文实例讲述了jQuery中detach()方法用法.分享给大家供大家参考.具体分析如下: 此方法从DOM中删除所有匹配的元素. 说明:detach()方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素,与remove()不同的是,所有绑定的事件.附加的数据等都会保留下来. 语法结构: 复制代码 代码如下: $(selector).detach(expr) 参数列表: 参数 描述 expr 可选.用于筛选被删除元素的jQuery表达式. 实例代码: 实例一: 复制代
-
详解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
-
详解jQuery中ajax.load()方法
jQuery load() 方法 jQuery load() 方法是简单但强大的 AJAX 方法. load() 方法从服务器加载数据,并把返回的数据放入被选元素中. 语法: $(selector).load(URL,data,callback); load()函数用于从服务器加载数据,并使用返回的html内容替换当前匹配元素的内容. load()函数默认使用GET方式,如果提供了对象形式的数据,则自动转为POST方式. 因为默认使用的是Get请求方式,所以我们也可以在url加数据进行提交. 例
-
详解jQuery中的DOM操作
大致介绍 jQuery作为JavaScript库,继承并发扬了JavaScript对DOM对象操作的特性,使开发人员能方便的操作DOM对象. jQuery中的DOM操作 看看DOM操作都有哪些 逐一来看 先写一份HTML代码,后面的代码将操作这份HTML代码 <p title="选择你最喜欢的水果">你最喜欢的水果?</p> <ul> <li title="苹果">苹果</li> <li title=
-
详解jQuery中的getAll()和cleanData()
前言: 看 jQuery 源码的一个痛点就是调用一个函数时,里面会调用 N 个其他函数,然后这 N 个函数里面又会调用 M 个其他其他函数.. 本篇文章主要是对detach()/empty()/remove()/unwrap()]() 中两个函数 getAll和cleanData() 进行解析. 一.getAll(context, tag) 作用: 用来获取 context 上的 tag 标签,或者是将 context 和 context 里的 tag 标签的元素合并 源码: //一般是传的no
-
详解jQuery中的元素的属性和相关操作
元素属性 元素的属性中可以包含很多有用的信息,所以如何设置或得到属性中的值,就显得非常重要. jQuery 的 $.fn.attr 方法可以作为 setter 和 getter 使用,用来设置或获取属性的值.和 $.fn.css 用法类似,$.fn.attr 既可一次性接受单个属性,也可以接受多个属性(对象) : $('a').attr('href', 'allMyHrefsAreTheSameNow.html'); $('a').attr({ 'title' : 'all titles are
-
详解jQuery中的事件
大致介绍 jQuery增加了并扩展了基本的事件处理机制,不但提供了更加优雅的事件处理语法,而且极大地增强了事件处理能力 jQuery中的事件 加载DOM 在jQuery中是用$(document).ready()方法来替代JavaScript中的window.onload方法的,但是他们也有一些不同点 1.执行时机 例如我们有一个有很多图片的网页 $(document).ready()方法是在这个网页的DOM树加载完就可以执行的,而window.onload方法必须在DOM树加载完和图片都加载完
-
详解jQuery中的deferred对象的使用（一）
deferred对象是jQuery对Promises接口的实现.它是非同步操作的通用接口,可以被看作是一个等待完成的任务,开发者通过一些通过的接口对其进行设置.事实上,它扮演代理人(proxy)的角色,将那些非同步操作包装成具有某些统一特性的对象,典型例子就是Ajax操作.网页动画.web worker等等. jQuery的所有Ajax操作函数,默认返回的就是一个deferred对象. 在jquery1.5之后的版本中,加入了一个deferred对象,也就是延迟对象,用来处理未来某一时间点发生的
-
详解jQuery中关于Ajax的几个常用的函数
一: AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. 什么是 AJAX ? AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面. 有很多使用 AJAX 的应用程序案例:新浪微博.Google 地图.开心网等等. 二:传
-
详解jQuery中基本的动画方法
大致介绍 通过jQuery中基本的动画方法,能够轻松地为网页添加非常精彩的视觉效果,给用户一种全新的体验 jQuery中的动画 show()和hide()方法 1.show()方法和hide()方法是jQuery中最基本的方法,hide()方法会将一个元素的display设置为"none": 2.show()方法和hide()方法会同时改变元素的宽度.高度和透明度 3.在一个元素使用hide()方法时会记录原先的display属性,当调用show()方法的时候会根据hide()方法记住
-
详解jQuery中的easyui
jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面.开发者不需要编写复杂的javascript,也不需要对css样式有深入的了解,开发者需要了解的只有一些简单的html标签. 一,easyui---datagrid绑定数据的简单测试: 1.数据库中的UserInfo表及数据测试: 2.DAL层: //分页,模糊查询(pageNum-1)*pageSize+1----从第几条数据开始,pa