jQuery DOM節(jié)點(diǎn)的復(fù)制、替換

jindong 發(fā)布于2019-08-21 11:54 / 1233人閱讀

摘要：拷貝克隆節(jié)點(diǎn)是的常見操作，提供一個(gè)方法，專門用于處理的克隆方法深度復(fù)制所有匹配的元素集合，包括所有匹配元素匹配元素的下級(jí)元素文字節(jié)點(diǎn)。

拷貝clone()

克隆節(jié)點(diǎn)是DOM的常見操作，jQuery提供一個(gè)clone方法，專門用于處理dom的克隆

.clone()方法深度復(fù)制所有匹配的元素集合，包括所有匹配元素、匹配元素的下級(jí)元素、文字節(jié)點(diǎn)。

clone方法比較簡(jiǎn)單就是克隆節(jié)點(diǎn)，但是需要注意，如果節(jié)點(diǎn)有事件或者數(shù)據(jù)之類的其他處理，我們需要通過clone(ture)傳遞一個(gè)布爾值ture用來(lái)指定，這樣不僅僅只是克隆單純的節(jié)點(diǎn)結(jié)構(gòu)，還要把附帶的事件與數(shù)據(jù)給一并克隆

HTML部分


JavaScript部分
$("div").on("click", function() {//執(zhí)行操作})

//clone處理一
$("div").clone()        //只克隆了結(jié)構(gòu)，事件丟失

//clone處理二
$("div").clone(true)        //結(jié)構(gòu)、事件與數(shù)據(jù)都克隆

克隆額外細(xì)節(jié)

clone()方法時(shí)，在將它插入到文檔之前，我們可以修改克隆后的元素或者元素內(nèi)容，如下述代碼我 $(this).clone().css("color","red") 增加了一個(gè)顏色

通過傳遞true，將所有綁定在原始元素上的事件處理函數(shù)復(fù)制到克隆元素上

clone()方法是jQuery擴(kuò)展的，只能處理通過jQuery綁定的事件與數(shù)據(jù)

元素?cái)?shù)據(jù)（data）內(nèi)對(duì)象和數(shù)組不會(huì)被復(fù)制，將繼續(xù)被克隆元素和原始元素共享。深復(fù)制的所有數(shù)據(jù)，需要手動(dòng)復(fù)制每一個(gè)





    
    
    
    



    通過clone克隆元素
    
        點(diǎn)擊,clone淺拷貝
        點(diǎn)擊,clone深拷貝,可以繼續(xù)觸發(fā)創(chuàng)建

替換replaceWith()和replaceAll() .replaceWith( newContent )

用提供的內(nèi)容替換集合中所有匹配的元素并且返回被刪除元素的集合。簡(jiǎn)單來(lái)說(shuō)：用$()選擇節(jié)點(diǎn)A，調(diào)用replaceWith方法，傳入一個(gè)新的內(nèi)容B（HTML字符串，DOM元素，或者jQuery對(duì)象）用來(lái)替換選中的節(jié)點(diǎn)A

一段簡(jiǎn)單的HTML代碼例子：


    第一段
    第二段
    第三段

替換第二段的節(jié)點(diǎn)與內(nèi)容

$("p:eq(1)").replaceWith("替換第二段的內(nèi)容")

通過jQuery篩選出第二個(gè)p元素，調(diào)用replaceWith進(jìn)行替換，結(jié)果如下


    第一段
    替換第二段的內(nèi)容"
    第三段

.replaceAll( target )

用集合的匹配元素替換每個(gè)目標(biāo)元素
.replaceAll()和.replaceWith()功能類似，但是目標(biāo)和源相反，用上述的HTML結(jié)構(gòu)，我們用replaceAll處理

$("替換第二段的內(nèi)容").replaceAll("p:eq(1)")

總結(jié)

.replaceAll()和.replaceWith()功能類似，主要是目標(biāo)和源的位置區(qū)別

.replaceWith()與.replaceAll() 方法會(huì)刪除與節(jié)點(diǎn)相關(guān)聯(lián)的所有數(shù)據(jù)和事件處理程序

.replaceWith()方法，和大部分其他jQuery方法一樣，返回jQuery對(duì)象，所以可以和其他方法鏈接使用

.replaceWith()方法返回的jQuery對(duì)象引用的是替換前的節(jié)點(diǎn)，而不是通過replaceWith/replaceAll方法替換后的節(jié)點(diǎn)





    
    
    
    



    replaceWith()和replaceAll()
    
        
        
    
    
        
            第一段
            第二段
            第三段
        
        
            第四段
            第五段
            第六段

包裹wrap()方法

如果要將元素用其他元素包裹起來(lái)，也就是給它增加一個(gè)父元素，針對(duì)這樣的處理，JQuery提供了一個(gè)wrap方法

.wrap( wrappingElement )：在集合中匹配的每個(gè)元素周圍包裹一個(gè)HTML結(jié)構(gòu)

p元素
// 給p元素增加一個(gè)div包裹
$("p").wrap("")
// 最后的結(jié)構(gòu)，p元素增加了一個(gè)父div的結(jié)構(gòu)

    p元素

.wrap( function ) ：一個(gè)回調(diào)函數(shù)，返回用于包裹匹配元素的 HTML 內(nèi)容或 jQuery 對(duì)象

使用后的效果與直接傳遞參數(shù)是一樣，只不過可以把代碼寫在函數(shù)體內(nèi)部，寫法不同而已

$("p").wrap(function() {
    return "";   // 與第一種類似，只是寫法不一樣
})

注意
.wrap()函數(shù)可以接受任何字符串或?qū)ο螅梢詡鬟f給$()工廠函數(shù)來(lái)指定一個(gè)DOM結(jié)構(gòu)。這種結(jié)構(gòu)可以嵌套了好幾層深，但應(yīng)該只包含一個(gè)核心的元素。每個(gè)匹配的元素都會(huì)被這種結(jié)構(gòu)包裹。該方法返回原始的元素集，以便之后使用鏈?zhǔn)椒椒?/p>





    
    
    
    



    DOM包裹wrap()方法
    
        
        
    
    
        p元素
        p元素
    
    
        a元素
        a元素

包裹unwrap()方法

我們可以通過wrap方法給選中元素增加一個(gè)包裹的父元素。相反，如果刪除選中元素的父元素要如何處理 ?
jQuery提供了一個(gè)unwrap()方法，作用與wrap方法是相反的。將匹配元素集合的父級(jí)元素刪除，保留自身（和兄弟元素，如果存在）在原來(lái)的位置


    p元素

// 要?jiǎng)h除這段代碼中的div，一般常規(guī)的方法會(huì)直接通過remove或者empty方法
// $("div").remove();
// 但如果還保留內(nèi)部元素p，就意味著需要更多處理，unwrap方法則能很方便的處理了這個(gè)問題
$("p").unwrap();
//找到p元素，然后調(diào)用unwrap方法，這樣只會(huì)刪除父輩div元素了
//結(jié)果：p元素

包裹wrapAll()方法

wrap是針對(duì)單個(gè)dom元素處理，如果要將集合中的元素用其他元素包裹起來(lái)，也就是給他們?cè)黾右粋€(gè)父元素，針對(duì)這樣的處理，JQuery提供了一個(gè)wrapAll方法

.wrapAll( wrappingElement )：給集合中匹配的元素增加一個(gè)外面包裹HTML結(jié)構(gòu)

p元素
p元素
// 給所有p元素增加一個(gè)div包裹
$("p").wrapAll("")
//最后的結(jié)構(gòu)，2個(gè)P元素都增加了一個(gè)父div的結(jié)構(gòu)

    p元素
    p元素

.wrapAll( function ) ：一個(gè)回調(diào)函數(shù)，返回用于包裹匹配元素的 HTML 內(nèi)容或 jQuery 對(duì)象
通過回調(diào)的方式可以多帶帶處理每一個(gè)元素

$("p").wrapAll(function() {
    return ""; 
})

以上的寫法的結(jié)果如下，等同于warp的處理了


    p元素


    p元素

注意
.wrapAll()函數(shù)可以接受任何字符串或?qū)ο螅梢詡鬟f給$()工廠函數(shù)來(lái)指定一個(gè)DOM結(jié)構(gòu)。這種結(jié)構(gòu)可以嵌套多層，但是最內(nèi)層只能有一個(gè)元素。所有匹配元素將會(huì)被當(dāng)作是一個(gè)整體，在這個(gè)整體的外部用指定的 HTML 結(jié)構(gòu)進(jìn)行包裹

包裹wrapInner()方法

如果要將合集中的元素內(nèi)部所有的子元素用其他元素包裹起來(lái)，并當(dāng)作指定元素的子元素，針對(duì)這樣的處理，JQuery提供了一個(gè)wrapInner方法

.wrapInner( wrappingElement )：給集合中匹配的元素的內(nèi)部，增加包裹的HTML結(jié)構(gòu)

p元素
p元素
給所有元素增加一個(gè)p包裹
$("div").wrapInner("")
最后的結(jié)構(gòu)，匹配的di元素的內(nèi)部元素被p給包裹了

    p元素


    p元素

.wrapInner( function ) ：允許我們用一個(gè)callback函數(shù)做參數(shù)，每次遇到匹配元素時(shí)，該函數(shù)被執(zhí)行，返回一個(gè)DOM元素，jQuery對(duì)象，或者HTML片段，用來(lái)包住匹配元素的內(nèi)容

$("div").wrapInner(function() {
    return ""; 
})
// 以上的寫法的結(jié)果如下，等同于第一種處理了

    p元素


    p元素

注意
當(dāng)通過一個(gè)選擇器字符串傳遞給.wrapInner() 函數(shù)，其參數(shù)應(yīng)該是格式正確的 HTML，并且 HTML 標(biāo)簽應(yīng)該是被正確關(guān)閉的





    
    
    
    




    DOM包裹wrapInner()方法
    
        點(diǎn)擊,通過wrapInner方法給所有div元素增加內(nèi)部父容器p
        點(diǎn)擊,通過wrapInner的回調(diào)方法給每個(gè)div元素增加內(nèi)部父容器a
    
    
        p元素
        p元素
    
    
        a元素
        a元素