[JS][jQuery]清空元素html("")、innerHTM

页面导航:首页 > 网络编程 > JavaScript > [JS][jQuery]清空元素html("")、innerHTM

[JS][jQuery]清空元素html("")、innerHTM

来源: 作者: 时间:2016-02-19 09:19 【

清空元素html( )、innerHTML= 与 empty()的区别一、清空元素的区别 1、错误做法一: $( test ) html( ); 该做法会导致内存泄露 2、错误做法二:

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


一、清空元素的区别
     1、错误做法一:
           $("#test").html("");//该做法会导致内存泄露
     2、错误做法二:
           $("#test")[0].innerHTML="";  ;//该做法会导致内存泄露
     3、正确做法:
	       //$("#test").empty();        


二、原理:

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

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

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


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


      remove: function( selector ) { if ( !selector || jQuery.filter( selector, [ this ] ).length ) { // Prevent memory leaks jQuery( "*", this ).add([this]).each(function(){ jQuery.event.remove(this); jQuery.removeData(this); }); if (this.parentNode) this.parentNode.removeChild( this ); } }, empty: function() { // Remove element nodes and prevent memory leaks jQuery(this).children().remove(); // Remove any remaining nodes while ( this.firstChild ) this.removeChild( this.firstChild ); }

Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<