清空元素html("")、innerHTML="" 与 empty()的区别

一、清空元素的区别
     1、错误做法一:
           $("#test").html("");//该做法会导致内存泄露

     2、错误做法二:
           $("#test")[0].innerHTML="";  ;//该做法会导致内存泄露
     3、正确做法:
	       //$("#test").empty();

二、原理:

在 jquery 中用 innerHTML 的方法来清空元素,是必然会导致内存泄露的,由于 jquery 对于同一元素多事件处理没有直接采用浏览器事件模型,而是自己缓存事件,遍历触发,以及便于 trigger 程序触发 :

  1. // Init the element's event structure
  2. var events = jQuery.data(elem, "events") || jQuery.data(elem, "events", {}),
  3. handle = jQuery.data(elem, "handle") || jQuery.data(elem, "handle", function(){
  4. // Handle the second event of a trigger and when
  5. // an event is called after a page has unloaded
  6. return typeof jQuery !== "undefined" && !jQuery.event.triggered ?
  7. jQuery.event.handle.apply(arguments.callee.elem, arguments) :
  8. undefined;
  9. });

采用 data 方法,将一些数据关联到了元素上面,上述事件即是采用该机制缓存事件监听器。

那么就可以知道,直接 innerHTML=“” 而不通知 jquery 清空与将要删除元素关联的数据,那么这部分数据就再也释放不了了,即为内存泄露。

  1. remove: function( selector ) {
  2. if ( !selector || jQuery.filter( selector, [ this ] ).length ) {
  3. // Prevent memory leaks
  4. jQuery( "*", this ).add([this]).each(function(){
  5. jQuery.event.remove(this);
  6. jQuery.removeData(this);
  7. });
  8. if (this.parentNode)
  9. this.parentNode.removeChild( this );
  10. }
  11. },
  12. empty: function() {
  13. // Remove element nodes and prevent memory leaks
  14. jQuery(this).children().remove();
  15. // Remove any remaining nodes
  16. while ( this.firstChild )
  17. this.removeChild( this.firstChild );
  18. }

三、要用到移除指定元素的时候,发现empty()与remove([expr])都可以用来实现。可仔细观察效果的话就可以发现。empty()是只移除了 指定元素中的所有子节点,拿$("p").empty()来说,他只是把<p>dsfsd</p>中的文本给移除了,而留下 了<p></p>,仍保留其在dom中所占的位置。
remove([expr])则是把其从dom中删除,而不会保留其所占的位置。‘

例:
<p>Hello</p>
World
<p>welcome</p>
执行$("p").empty()其结果是
<p></p>
World
<p></p>

执行$("p").remove()其结果是
World

[JS][jQuery]清空元素html("")、innerHTML="" 与 empty()的区别 、remove()区别的更多相关文章

  1. [JS][jQuery]清空元素html(&quot;&quot;)、innerHTML=&quot;&quot; 与 empty()的差别:关于内容泄露问题

    清空元素html("").innerHTML="" 与 empty()的差别 一.清空元素的差别      1.错误做法一:            $(&quo ...

  2. js jquery 获取元素(父节点,子节点,兄弟节点),元素筛选

    转载:https://www.cnblogs.com/ooo0/p/6278102.html js jquery 获取元素(父节点,子节点,兄弟节点) 一,js 获取元素(父节点,子节点,兄弟节点) ...

  3. js jquery 判断元素是否在数组内

    js jquery 判断元素是否在数组内 一,js方法 var arr = ["a", "b", "c"]; // js arr.index ...

  4. js/jquery获取元素,元素筛选器

    1.js获取元素 var test = document.getElementById("test"); var parent = test.parentNode; // 父节点 ...

  5. jQuery清空元素和克隆元素

    1.清空 $(function () { $('#btn').click(function () { $('#ul1').html('') $('#ul1').empty() $('#ul1').re ...

  6. 记一次使用jQuery清空元素

    缘由: 数据量比较大,分页显示,页码是自己写的,动态创建页码,创建元素时会绑定元素的click事件,每次显示五个页码(1,2,3,4,5),点击2—4不换,点5,页码变成3,4,5,6,7. 遇到的问 ...

  7. js+jquery创建元素

    例:创建如下标签: <a id="baidu" class="link" name="baidu">这是一个链接</a&g ...

  8. js jquery 判断元素是否在数组内(转)

    一,js方法 var arr = ["a", "b", "c"]; // js arr.indexOf("c") var ...

  9. js JQuery 获取元素和遍历

    用户名<input class="yonghu" type="text" id="user" name="u" / ...

随机推荐

  1. PHP安装插件方式

    PHP安装插件方法主要有两种: 1.先安装相关的库,zlib.curl.xml等,然后在安装 php 时的 ./configure 中设置 --with-xxx(你需要的插件),三部曲安装即可. 2. ...

  2. python继承的实例

    class SchoolMember(object):#定义学校 member=0#默认成员为0个 amount=0#默认学费为0元 def __init__(self,name,age,sex):# ...

  3. MySQL show status命令参数

    Aborted_clients         由于客户没有正确关闭连接已经死掉,已经放弃的连接数量.   Aborted_connects 尝试已经失败的MySQL服务器的连接的次数.   Binl ...

  4. 理解javascript函数的重载

        javascript其实是不支持重载的,这篇文章会和java语言函数的重载对比来加深对javascript函数重载的理解.       以下我会假设读者不了解什么是重载所以会有一些很基础的概念 ...

  5. iOS8 UISearchViewController搜索功能讲解 分类: ios技术 2015-07-14 10:23 76人阅读 评论(0) 收藏

    在iOS8以前我们实现搜索功能需要用到UISearchbar和UISearchDisplayController, 在iOS8之后呢, UISearchController配合UITableView的 ...

  6. 【转】HashMap实现原理分析

    1. HashMap的数据结构 数据结构中有数组和链表来实现对数据的存储,但这两者基本上是两个极端. 数组 数组存储区间是连续的,占用内存严重,故空间复杂的很大.但数组的二分查找时间复杂度小,为O(1 ...

  7. Memcached源码分析之memcached.c

    memcached.c 由于代码太多,在此省略了部分代码,例如UPD连接,二进制协议,某些错误输出和调试输出等,建议从main函数开始看起. #include "memcached.h&qu ...

  8. 安装ARM交叉编译器

    1.开发平台 虚拟机:VMware 12 操作系统:Ubuntu 14.04 64bit 2.准备ARM交叉编译工具包 编译uboot和linux kernel都需要ARM交叉工具链支持,这里使用Li ...

  9. GitHub优秀的Android 开源项目

    GitHub上优秀Android开源项目 转载自 : http://my.eoe.cn/sisuer/archive/3348.html http://my.eoe.cn/sisuer/archive ...

  10. Ubuntu切换默认语言

    不得不说,从Ubuntu到Debian,又到CentOS 7,我胡汉三又回来了... 然后又装了个中文版的Ubuntu16.04LTS,不得不说,Ubuntu对中文的支持真的很好 不过,还是不太习惯, ...