jQuery 源碼解析(二十三) DOM操做模塊替換元素詳解

時間 2019-11-13

標籤 jquery 源碼解析二十三 dom 模塊替換元素詳解欄目 JQuery 简体版

原文原文鏈接

本節說一下DOM操做模塊裏的替換元素模塊，該模塊可將當前匹配的元素替換指定的DOM元素,有兩個方法，以下:html

replaceWith(value) ;使用提供的新內容來替換匹配元素集合中的每一個元素。value是新內容，能夠是html字符串、DOM元素、jQuery對象或返回新內容的函數。
replaceAll(value) ;使用匹配元素集合中的元素替換目標元素。內部執行.replaceWith(value)方法，只是語法順序上不一樣。相似於append()和appendTo()。

舉個栗子:jquery

writer by:大沙漠 QQ:22969969app

<!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 id="test"><i>Hello World!</i></div>
    <button id="b1">測試1</button>
    <button id="b2">測試2</button>
    <script>
        b1.onclick=function(){      //修改#test的內容，用replaceWith()方法
            $('#test').replaceWith('<h1 id="test">Hello jQuery!</h1>')
        }      
        b2.onclick=function(){      //修改#test的內容，用replaceAll()方法
            $('<p id="test">jQuery is Good!</p>').replaceAll('#test')
        }
    </script>
</body>
</html>

渲染以下:函數

當點擊測試1按鈕時，頁面渲染以下:源碼分析

當點擊測試2按鈕時，頁面變爲以下:測試

源碼分析this

replaceWith()的實現比較簡單，代碼以下:spa

jQuery.fn.extend({
    replaceWith: function( value ) {                 //使用提供的新內容來替換匹配元素集合中的每一個元素。value是新內容，能夠是html字符串、DOM元素、jQuery對象或返回新內容的函數。
        if ( this[0] && this[0].parentNode ) {             //若是至少有一個匹配元素，且該元素有父元素
            // Make sure that the elements are removed from the DOM before they are inserted
            // this can help fix replacing a parent with child elements
            if ( jQuery.isFunction( value ) ) {             //若是value是函數
                return this.each(function(i) {                    //遍歷匹配元素集合
                    var self = jQuery(this), old = self.html();
                    self.replaceWith( value.call( this, i, old ) );     //給每一個元素調用value函數，並用該函數的返回值迭代調用replaceWith()函數。
                });
            }

            if ( typeof value !== "string" ) {                //若是參數value不是字符串，則多是DOM元素或jQuery對象
                value = jQuery( value ).detach();                //先用value建立一個jQuery對象，再調用.detach()把參數從value文檔中刪除，保留關聯的數據和事件。
            }

            return this.each(function() {                    //遍歷當前匹配元素
                var next = this.nextSibling,                    //下一個元素節點引用
                    parent = this.parentNode;                    //上一個元素節點引用

                jQuery( this ).remove();                        //調用.remove()移除後代元素和當前元素關聯的數據和事件，以免內存泄漏。

                if ( next ) {                                    //若是有下一個元素
                    jQuery(next).before( value );                    //則調用$.fn.before()函數將新內容插入下一個兄弟元素以前;
                } else {    
                    jQuery(parent).append( value );                    //不然調用$.fn.append()函數則將新內容插入父元素末尾。
                }
            });
        } else {
            return this.length ?
                this.pushStack( jQuery(jQuery.isFunction(value) ? value() : value), "replaceWith", value ) :
                this;
        }
    },
})

比較簡單，就是先調用remove()移除當前以前，而後調用前一個節點的before()或父節點的append()方法插入新的節點便可，對於replaceAll()來講，它和插入元素那幾個方法同樣，是replaceWith()的另外一個寫法，能夠看這個連接:https://www.cnblogs.com/greatdesert/p/11732436.htmlcode