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