清空元素html("") innerHTML="" 與 empty()的區(qū)別和應(yīng)用(推薦)
一、清空元素的區(qū)別
1、錯誤做法一：
$("#test").html("");//該做法會導(dǎo)致內(nèi)存泄露
2、錯誤做法二：
$("#test")[0].innerHTML=""; ;//該做法會導(dǎo)致內(nèi)存泄露
3、正確做法：
//$("#test").empty();
二、原理：
在 jQuery 中用 innerHTML 的方法來清空元素，是必然會導(dǎo)致內(nèi)存泄露的，由于 jquery 對于同一元素多事件處理沒有直接采用瀏覽器事件模型，而是自己緩存事件，遍歷觸發(fā)，以及便于 trigger 程序觸發(fā) ：
// 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 方法，將一些數(shù)據(jù)關(guān)聯(lián)到了元素上面，上述事件即是采用該機(jī)制緩存事件監(jiān)聽器。
那么就可以知道，直接 innerHTML＝“” 而不通知 jquery 清空與將要刪除元素關(guān)聯(lián)的數(shù)據(jù)，那么這部分?jǐn)?shù)據(jù)就再也釋放不了了，即為內(nèi)存泄露。
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()的區(qū)別和應(yīng)用的全部內(nèi)容啦~希望能夠幫助到各位朋友~~
- PHP isset()與empty()的使用區(qū)別詳解
- jQuery刪除節(jié)點(diǎn)的三個方法即remove()detach()和empty()
- php empty,isset,is_null判斷比較（差異與異同）
- jQuery使用empty()方法刪除元素及其所有子元素的方法
- javascript Array.remove() 數(shù)組刪除
- jquery之empty()與remove()區(qū)別說明
- 淺談java Iterator.remove()方法的用法(詳解)
- 老生常談jquery中detach()和remove()的區(qū)別
- jQuery remove()過濾被刪除的元素（推薦）
相關(guān)文章
jQuery使用$.extend(true,object1, object2);實(shí)現(xiàn)深拷貝對象的方法分析
這篇文章主要介紹了jQuery使用$.extend(true,object1, object2);實(shí)現(xiàn)深拷貝對象的方法,結(jié)合實(shí)例形式分析了jQuery中$.extend(true,object1, object2);進(jìn)行深拷貝操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-03-03
JQuery的ajax基礎(chǔ)上的超強(qiáng)GridView展示
前面有個例子是使用jQuery的datatable插件來實(shí)現(xiàn)的能夠展開個詳細(xì)信息表的樣子。事實(shí)上.net的數(shù)據(jù)展示模式很好,如果配上jQuery的那些效果和AJAX功能是相當(dāng)?shù)貌诲e。2009-09-09
這篇文章主要介紹了jQuery超簡單遮罩層實(shí)現(xiàn)方法,結(jié)合實(shí)例形式詳細(xì)分析了jQuery遮罩層相關(guān)屬性樣式動態(tài)控制操作技巧,需要的朋友可以參考下2018-09-09
jQuery Chart圖表制作組件Highcharts用法詳解
這篇文章主要介紹了jQuery Chart圖表制作組件Highcharts用法,詳細(xì)分析了Highcharts插件的功能與具體使用技巧及相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-06-06
Jquery promise實(shí)現(xiàn)一張一張加載圖片
通過jquery promise實(shí)現(xiàn)一張一張的連續(xù)圖片的加載功能，當(dāng)圖片加載錯誤，超時后會顯示加載圖片加載失敗。對jquery promise實(shí)現(xiàn)加載圖片的相關(guān)資料感興趣的朋友參考下2015-11-11
jQuery 1.5.1 發(fā)布，全面支持IE9 修復(fù)大量bug
jQuery 1.5.1發(fā)布了！這是自jQuery1.5發(fā)布以來第一個小版本更新，并且解決了很多BUG。2011-02-02
基于jQuery使用Ajax動態(tài)執(zhí)行模糊查詢功能
這篇文章主要介紹了基于jQuery使用Ajax動態(tài)執(zhí)行模糊查詢功能,通過實(shí)例代碼相結(jié)合的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2018-07-07
本文主要介紹了jquery的代碼規(guī)范。具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
jquery焦點(diǎn)圖片切換(數(shù)字標(biāo)注/手動/自動播放/橫向滾動)
焦點(diǎn)圖片切換在網(wǎng)頁制作的商品展示中經(jīng)常會用到，這樣的效果可以給用戶帶來耳目一新的感覺同時也是用戶比較追捧的，本文也實(shí)現(xiàn)了一個這樣的焦點(diǎn)圖片切換效果,感興趣的你可以參考下啊，希望本文對你有所幫助2013-01-01
表單提交的時候 ，是根據(jù)元素的name這個屬性來的，只要不加name屬性 就不會提交，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下哈2013-05-05