本節說一下DOM操作模塊里的洗掉元素模塊，該模塊用于洗掉DOM里的某個節點，也可以理解為將該節點從DOM樹中卸載掉，如果該節點有系結事件，我們可以選擇保留或洗掉這些事件，洗掉元素的介面有如下三個:
- empty() ;移除匹配元素的所有子元素， ;先移除所有后代元素關聯的資料和事件，以避免記憶體泄漏，然后移除子元素，
- remove(selector,keepData) ;從匹配元素中移除selector元素， ;selector是可選的選擇器運算式，如果未傳入則全部移除，否則只移除對應的匹配元素，keepData可選，表示是否保留匹配元素以及它的后代元素所關聯的資料和事件
- detach(selector) ;從檔案中移除匹配元素集合 ;但會保留后代元素和匹配元素關聯的資料和事件，常用于移除的元素稍后再次插入檔案的場景，
說直接一點，
- empty()會直接移除當前匹配的元素
- remove()會將當前匹配的元素中在匹配引數1selector里的元素，如果引數2keepData為true則保存該DOM節點的事件，否則移除事件
- detach()是呼叫remove()實作的，用于移除當前匹配的元素，但是會保留資料 ，它是呼叫remove(selector,true)來實作的
writer by:大沙漠 QQ:22969969
舉個栗子:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="http://libs.baidu.com/jquery/1.7.1/jquery.min.js"></script> </head> <body> <div> <h1>你好</h1> </div> <p>朋友</p> <button id="b1">測驗1</button> <button id="b2">測驗2</button> <button id="b3">測驗3</button> <script> $('h1').click(function(){console.log('h1 click')}); //給h1元素增加一個點擊事件 $('p').click(function(){console.log('p click')}); //給P元素增加一個點擊事件 //以下給三個按鈕都會實作將h1、p元素從DOM樹中移除，再插入body的子節點的前面，不同的地方是點擊子節點時的輸出資訊不同 b1.onclick=function(){$('h1,p').remove().prependTo('body')} //點擊測驗1按鈕后 h1和p元素都移動到了body子節點的最前面，但是再點擊h1和p元素都沒有反應 b2.onclick=function(){$('h1,p').remove('p').prependTo('body')} //點擊測驗1按鈕后 h1和p元素都移動到了body子節點的最前面，點擊h1有輸出，點擊p沒有輸出 b3.onclick=function(){$('h1,p').detach().prependTo('body')} //點擊測驗1按鈕后 h1和p元素都移動到了body子節點的最前面，點擊h1和p都有輸出 </script> </body> </html>
渲染如下:
對應的DOM樹如下:
我們給h1和p元素分別系結了一個事件，點擊分別輸出:h1 click和p click，，點擊輸出如下:
另外不管點擊測驗1、測驗2還是測驗3，都會將h1和p元素從DOM樹中卸載并插入到body子節點的最前面，如下:
此時再點擊h1和p元素就會有不同的輸出了:
- 對于測驗1按鈕來說 ;點擊h1和p沒有任何輸出 ;由于呼叫了remove()方法且未傳遞引數，所以所有匹配的元素的事件都會被洗掉掉
- 對于測驗2按鈕來說 ;點擊h1有輸出，點擊p沒有輸出 ;由于呼叫remove()方法時傳遞了p，所以把p元素的事件都洗掉了，而h1元素的事件并沒有被洗掉
- 對于測驗2按鈕來說 ;點擊h1和p沒有任何輸出 ;由于呼叫了detach()方法，所以所有元素的資料都被保留了，detach()內部時呼叫remove( selector, true )來實作的，也就是remove的引數2為true
原始碼分析
講解empty()、remove()和detach()之前先介紹一個jQuery的API，就是$.cleanData(elems),引數是DOM節點的集合(可以是document.getElementsByTagName的回傳值)，它用于移除一個DOM節點上系結的jQuery事件的，我們舉個栗子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://libs.baidu.com/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<p>Hello World</p>
<button>測驗</button>
<script>
$('p').click(function(){console.log('p click')}); //給P元素增加一個點擊事件
$('button').click(function(){
$.cleanData(document.getElementsByTagName('p')) //給button按鈕添加一個button事件，內部呼叫$.cleanData去清楚p元素上系結的事件
})
</script>
</body>
</html>
渲染如下:
初始化時我們點擊Hello World控制臺會輸出資訊，如果點擊按鈕后再點擊Hello World就不會輸出了，因為$.cleanData把該DOM元素的事件給卸載了，$.cleanData實作如下:
jQuery.extend({ cleanData: function( elems ) { //移除多個DOM元素的全部資料和事件， elems是待移除資料和事件的DOM元素陣列， var data, id, cache = jQuery.cache, special = jQuery.event.special, deleteExpando = jQuery.support.deleteExpando; for ( var i = 0, elem; (elem = elems[i]) != null; i++ ) { //遍歷每個匹配元素 if ( elem.nodeName && jQuery.noData[elem.nodeName.toLowerCase()] ) { //如果不支持設定屬性，則跳過本次回圈， jQuery.noData是一個陣列，保存了不支持擴展屬性的節點名稱， continue; } id = elem[ jQuery.expando ]; //屬性名,注1 if ( id ) { //如果該DOM物件有jQuery.expando屬性，則表示設定過資料， data =https://www.cnblogs.com/greatdesert/p/ cache[ id ]; if ( data && data.events ) { //如果DOM的關聯資料快取物件存在且含有events屬性，說明在該DOM上系結過事件，則移除 for ( var type in data.events ) { //data.events是DOM元素的事件快取物件，存盤了DOM元素的所有事件 if ( special[ type ] ) { jQuery.event.remove( elem, type ); // This is a shortcut to avoid jQuery.event.remove's overhead } else { jQuery.removeEvent( elem, type, data.handle ); } } // Null the DOM reference to avoid IE6/7/8 leak (#7054) if ( data.handle ) { data.handle.elem = null; } } if ( deleteExpando ) { //如果jQuery.support.deleteExpando;回傳ture，即瀏覽器支持洗掉DOM元素上的擴展屬性 delete elem[ jQuery.expando ]; //洗掉DOM元素的jQuery.expando屬性 } else if ( elem.removeAttribute ) { //如果瀏覽器不支持洗掉DOM元素上的擴展屬性，則呼叫removeAttribute洗掉屬性 elem.removeAttribute( jQuery.expando ); } delete cache[ id ]; //洗掉DOM元素的資料快取物件cache[id] } } } /*略*/ })
注1:jQuery系結的事件對應的資訊都存在$.cache里，鍵名是對應DOM物件的jQuery.expando,也就是這里的elem[ jQuery.expando ]，有疑問可以看看之前事件的講解:https://www.cnblogs.com/greatdesert/p/11679334.html
cleanData就是洗掉引數elems里所有DOM元素的事件，本節的empty()和remove()都是基于cleanData實作的，empty()實作如下:
jQuery.fn.extend({ empty: function() { //從檔案中移除匹配元素的所有子元素， for ( var i = 0, elem; (elem = this[i]) != null; i++ ) { //遍歷當前匹配的每個元素 // Remove element nodes and prevent memory leaks if ( elem.nodeType === 1 ) { jQuery.cleanData( elem.getElementsByTagName("*") ); ////先移除所有后代元素關聯的資料和事件，以避免記憶體泄漏 } // Remove any remaining nodes while ( elem.firstChild ) { //然后移除子元素， elem.removeChild( elem.firstChild ); } } return this; }, })
empty()內首先呼叫cleanData()移除所有子孫節點的資料和事件，然后通過一個while()回圈卸載掉每個DOM節點，比較好理解哈，對于remove()來說，實作如下:
jQuery.fn.extend({ remove: function( selector, keepData ) { //從匹配元素中移除selector元素，該方法會遍歷匹配元素集合，先洗掉后代元素和匹配元素的資料和事件，以避免記憶體泄漏，然后移除匹配元素， for ( var i = 0, elem; (elem = this[i]) != null; i++ ) { //遍歷當前匹配元素 if ( !selector || jQuery.filter( selector, [ elem ] ).length ) { //如果沒有傳入selector引數，或者傳入了selector引數，并且當前元素與之匹配 if ( !keepData && elem.nodeType === 1 ) { //如果沒有傳入keepData引數且elem是元素節點 jQuery.cleanData( elem.getElementsByTagName("*") ); //移除后代元素的全部資料和事件 jQuery.cleanData( [ elem ] ); //移除元素節點， } if ( elem.parentNode ) { //呼叫原生方法removeChild()移除節點， elem.parentNode.removeChild( elem ); } } } return this; }, detach: function( selector ) { return this.remove( selector, true ); //呼叫remove()來實作的，引數2傳入了true }, })
remove()方法會根據selector來選擇匹配元素，并將該匹配元素從DOM樹中卸載，如果有傳入keepData則保存資料，否則將資料洗掉，對于detach來說，就是呼叫remove()來實作的
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/31417.html
標籤：jQuery