清空元素html("") innerHTML="" 与 empty()的区别和应用(推荐)
更新时间：2017年08月14日 16:57:45 作者：逐浪_一生悬命
这篇文章主要介绍了清空元素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 );
}
以上就是小编为大家整理的清空元素html("")、innerHTML="" 与 empty()的区别和应用的全部内容啦~希望能够帮助到各位朋友~~
相关文章
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
这篇文章主要介绍了jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法,结合实例形式分析了jQuery中$.extend(true,object1, object2);进行深拷贝操作相关实现技巧,需要的朋友可以参考下2019-03-03
前面有个例子是使用jQuery的datatable插件来实现的能够展开个详细信息表的样子。事实上.net的数据展示模式很好,如果配上jQuery的那些效果和AJAX功能是相当得不错。2009-09-09
这篇文章主要介绍了jQuery超简单遮罩层实现方法,结合实例形式详细分析了jQuery遮罩层相关属性样式动态控制操作技巧,需要的朋友可以参考下2018-09-09
jQuery Chart图表制作组件Highcharts用法详解
这篇文章主要介绍了jQuery Chart图表制作组件Highcharts用法,详细分析了Highcharts插件的功能与具体使用技巧及相关注意事项,需要的朋友可以参考下2016-06-06
通过jquery promise实现一张一张的连续图片的加载功能，当图片加载错误，超时后会显示加载图片加载失败。对jquery promise实现加载图片的相关资料感兴趣的朋友参考下2015-11-11
jQuery 1.5.1 发布，全面支持IE9 修复大量bug
jQuery 1.5.1发布了！这是自jQuery1.5发布以来第一个小版本更新，并且解决了很多BUG。2011-02-02
这篇文章主要介绍了基于jQuery使用Ajax动态执行模糊查询功能,通过实例代码相结合的形式给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2018-07-07
本文主要介绍了jquery的代码规范。具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
焦点图片切换在网页制作的商品展示中经常会用到，这样的效果可以给用户带来耳目一新的感觉同时也是用户比较追捧的，本文也实现了一个这样的焦点图片切换效果,感兴趣的你可以参考下啊，希望本文对你有所帮助2013-01-01
表单提交的时候 ，是根据元素的name这个属性来的，只要不加name属性 就不会提交，具体实现如下，感兴趣的朋友可以参考下哈2013-05-05
最新评论