jQuery DOM節點的複製、替換

時間 2019-11-16

標籤 jquery dom 節點複製替換欄目 JQuery 简体版

原文原文鏈接

拷貝clone()

克隆節點是DOM的常見操做，jQuery提供一個clone方法，專門用於處理dom的克隆javascript

.clone()方法深度複製全部匹配的元素集合，包括全部匹配元素、匹配元素的下級元素、文字節點。

clone方法比較簡單就是克隆節點，可是須要注意，若是節點有事件或者數據之類的其餘處理，咱們須要經過clone(ture)傳遞一個布爾值ture用來指定，這樣不單單只是克隆單純的節點結構，還要把附帶的事件與數據給一併克隆css

HTML部分
<div></div>

JavaScript部分
$("div").on('click', function() {//執行操做})

//clone處理一
$("div").clone()        //只克隆告終構，事件丟失

//clone處理二
$("div").clone(true)        //結構、事件與數據都克隆

克隆額外細節html

clone()方法時，在將它插入到文檔以前，咱們能夠修改克隆後的元素或者元素內容，以下述代碼我 $(this).clone().css('color','red') 增長了一個顏色java
經過傳遞true，將全部綁定在原始元素上的事件處理函數複製到克隆元素上jquery
clone()方法是jQuery擴展的，只能處理經過jQuery綁定的事件與數據數組
元素數據（data）內對象和數組不會被複制，將繼續被克隆元素和原始元素共享。深複製的全部數據，須要手動複製每個app

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <style>
    .left,
    .right {
        width: 300px;
        height: 120px;
    }
    
    .left div,
    .right div {
        width: 100px;
        height: 90px;
        padding: 5px;
        margin: 5px;
        float: left;
        border: 1px solid #ccc;
        background: #bbffaa;
    }
    </style>
</head>

<body>
    <h2>經過clone克隆元素</h2>
    <div class="left">
        <div class="aaron1">點擊,clone淺拷貝</div>
        <div class="aaron2">點擊,clone深拷貝,能夠繼續觸發建立</div>
    </div>
    <script type="text/javascript">
        //只克隆節點
        //不克隆事件
        $(".aaron1").on('click', function() {
            $(".left").append( $(this).clone().css('color','red') )
        })
    </script>

    <script type="text/javascript">
        //克隆節點
        //克隆事件
        $(".aaron2").on('click', function() {
            console.log(1)
            $(".left").append( $(this).clone(true).css('color','blue') )
        })
    </script>
</body>

</html>

替換replaceWith()和replaceAll()

.replaceWith( newContent )

用提供的內容替換集合中全部匹配的元素而且返回被刪除元素的集合。簡單來講：用$()選擇節點A，調用replaceWith方法，傳入一個新的內容B（HTML字符串，DOM元素，或者jQuery對象）用來替換選中的節點Adom

一段簡單的HTML代碼例子：函數

<div>
    <p>第一段</p>
    <p>第二段</p>
    <p>第三段</p>
</div>

替換第二段的節點與內容ui

$("p:eq(1)").replaceWith('<a style="color:red">替換第二段的內容</a>')

經過jQuery篩選出第二個p元素，調用replaceWith進行替換，結果以下

<div>
    <p>第一段</p>
    <a style="color:red">替換第二段的內容</a>'
    <p>第三段</p>
</div>

.replaceAll( target )

用集合的匹配元素替換每一個目標元素
.replaceAll()和.replaceWith()功能相似，可是目標和源相反，用上述的HTML結構，咱們用replaceAll處理

$('<a style="color:red">替換第二段的內容</a>').replaceAll('p:eq(1)')

總結

.replaceAll()和.replaceWith()功能相似，主要是目標和源的位置區別
.replaceWith()與.replaceAll() 方法會刪除與節點相關聯的全部數據和事件處理程序
.replaceWith()方法，和大部分其餘jQuery方法同樣，返回jQuery對象，因此能夠和其餘方法連接使用
.replaceWith()方法返回的jQuery對象引用的是替換前的節點，而不是經過replaceWith/replaceAll方法替換後的節點

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
    <style>

    .right div {
        background: yellow;
    }
    </style>
</head>

<body>
    <h2>replaceWith()和replaceAll()</h2>
    <div class="left">
        <button class="bt1">點擊,經過replaceWith替換內容</button>
        <button class="bt2">點擊,經過rreplaceAll替換內容</button>
    </div>
    <div class="right">
        <div>
            <p>第一段</p>
            <p>第二段</p>
            <p>第三段</p>
        </div>
        <div>
            <p>第四段</p>
            <p>第五段</p>
            <p>第六段</p>
        </div>
    </div>
    <script type="text/javascript">
    //只克隆節點
    //不克隆事件
    $(".bt1").on('click', function() {
        //找到內容爲第二段的p元素
        //經過replaceWith刪除並替換這個節點
        $(".right > div:first p:eq(1)").replaceWith('<a style="color:red">replaceWith替換第二段的內容</a>')
    })
    </script>
    <script type="text/javascript">
    //找到內容爲第六段的p元素
    //經過replaceAll刪除並替換這個節點
    $(".bt2").on('click', function() {
        $('<a style="color:red">replaceAll替換第六段的內容</a>').replaceAll('.right > div:last p:last');
    })
    </script>
</body>

</html>

包裹wrap()方法

若是要將元素用其餘元素包裹起來，也就是給它增長一個父元素，針對這樣的處理，JQuery提供了一個wrap方法

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

<p>p元素</p>
// 給p元素增長一個div包裹
$('p').wrap('<div></div>')
// 最後的結構，p元素增長了一個父div的結構
<div>
    <p>p元素</p>
</div>

.wrap( function ) ：一個回調函數，返回用於包裹匹配元素的 HTML 內容或 jQuery 對象

使用後的效果與直接傳遞參數是同樣，只不過能夠把代碼寫在函數體內部，寫法不一樣而已

$('p').wrap(function() {
    return '<div></div>';   // 與第一種相似，只是寫法不同
})

注意
.wrap()函數能夠接受任何字符串或對象，能夠傳遞給$()工廠函數來指定一個DOM結構。這種結構能夠嵌套了好幾層深，但應該只包含一個核心的元素。每一個匹配的元素都會被這種結構包裹。該方法返回原始的元素集，以便以後使用鏈式方法

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <style>
    .left div,
    .right div {
        width: 100px;
        padding: 5px;
        margin: 5px;
        float: left;
        border: 1px solid #ccc;
        background: #bbffaa;
    }
    
    .right div {
        background: yellow;
    }
    
    p {
        border: 1px solid red;
    }
    
    a {
        border: 1px solid blue;
    }
    </style>
</head>

<body>
    <h2>DOM包裹wrap()方法</h2>
    <div class="left">
        <button class="aaron1">點擊,經過wrap方法給p元素增長父容器div</button>
        <button class="aaron2">點擊,經過wrap的回調方法給a元素增長父容器div</button>
    </div>
    <div class="right">
        <p>p元素</p>
        <p>p元素</p>
    </div>
    <div class="left">
        <a>a元素</a>
        <a>a元素</a>
    </div>
    <script type="text/javascript">
    $(".aaron1").on('click', function() {
        //給全部p元素，增長父容器div
        $('p').wrap('<div></div>')
    })
    </script>
    <script type="text/javascript">
    $(".aaron2").on('click', function() {
        $('a').wrap(function() {
            return '<div class="' + $(this).text() + '" />';
        })
    })
    </script>
</body>

</html>

包裹unwrap()方法

咱們能夠經過wrap方法給選中元素增長一個包裹的父元素。相反，若是刪除選中元素的父元素要如何處理 ?
jQuery提供了一個unwrap()方法，做用與wrap方法是相反的。將匹配元素集合的父級元素刪除，保留自身（和兄弟元素，若是存在）在原來的位置

<div>
    <p>p元素</p>
</div>
// 要刪除這段代碼中的div，通常常規的方法會直接經過remove或者empty方法
// $('div').remove();
// 但若是還保留內部元素p，就意味着須要更多處理，unwrap方法則能很方便的處理了這個問題
$('p').unwrap();
//找到p元素，而後調用unwrap方法，這樣只會刪除父輩div元素了
//結果：<p>p元素</p>

包裹wrapAll()方法

wrap是針對單個dom元素處理，若是要將集合中的元素用其餘元素包裹起來，也就是給他們增長一個父元素，針對這樣的處理，JQuery提供了一個wrapAll方法

.wrapAll( wrappingElement )：給集合中匹配的元素增長一個外面包裹HTML結構

<p>p元素</p>
<p>p元素</p>
// 給全部p元素增長一個div包裹
$('p').wrapAll('<div></div>')
//最後的結構，2個P元素都增長了一個父div的結構
<div>
    <p>p元素</p>
    <p>p元素</p>
</div>

.wrapAll( function ) ：一個回調函數，返回用於包裹匹配元素的 HTML 內容或 jQuery 對象
經過回調的方式能夠單獨處理每個元素

$('p').wrapAll(function() {
    return '<div><div/>'; 
})

以上的寫法的結果以下，等同於warp的處理了

<div>
    <p>p元素</p>
</div>
<div>
    <p>p元素</p>
</div>

注意
.wrapAll()函數能夠接受任何字符串或對象，能夠傳遞給$()工廠函數來指定一個DOM結構。這種結構能夠嵌套多層，可是最內層只能有一個元素。全部匹配元素將會被看成是一個總體，在這個總體的外部用指定的 HTML 結構進行包裹

包裹wrapInner()方法

若是要將合集中的元素內部全部的子元素用其餘元素包裹起來，並看成指定元素的子元素，針對這樣的處理，JQuery提供了一個wrapInner方法

.wrapInner( wrappingElement )：給集合中匹配的元素的內部，增長包裹的HTML結構

<div>p元素</div>
<div>p元素</div>
給全部元素增長一個p包裹
$('div').wrapInner('<p></p>')
最後的結構，匹配的di元素的內部元素被p給包裹了
<div>
    <p>p元素</p>
</div>
<div>
    <p>p元素</p>
</div>

.wrapInner( function ) ：容許咱們用一個callback函數作參數，每次遇到匹配元素時，該函數被執行，返回一個DOM元素，jQuery對象，或者HTML片斷，用來包住匹配元素的內容

$('div').wrapInner(function() {
    return '<p></p>'; 
})
// 以上的寫法的結果以下，等同於第一種處理了
<div>
    <p>p元素</p>
</div>
<div>
    <p>p元素</p>
</div>

注意
當經過一個選擇器字符串傳遞給.wrapInner() 函數，其參數應該是格式正確的 HTML，而且 HTML 標籤應該是被正確關閉的

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
    <style>
    .left,
    .right {
        width: 250px;
        height: 130px;
    }
    
    .left div,
    .right div {
        width: 100px;
        padding: 5px;
        margin: 5px;
        float: left;
        border: 1px solid #ccc;
        background: #bbffaa;
    }
    
    .right div {
        background: yellow;
    }
    p {
        border: 1px solid red;
    }
    
    a {
        border: 1px solid blue;
    }
    </style>
</head>


<body>
    <h2>DOM包裹wrapInner()方法</h2>
    <div class="left">
        <div class="aaron1">點擊,經過wrapInner方法給全部div元素增長內部父容器p</div>
        <div class="aaron2">點擊,經過wrapInner的回調方法給每一個div元素增長內部父容器a</div>
    </div>
    <div class="right">
        <div class="right1">p元素</div>
        <div class="right1">p元素</div>
    </div>
    <div class="left">
        <div class="left1">a元素</div>
        <div class="left1">a元素</div>
    </div>


    <script type="text/javascript">
    $(".aaron1").on('click', function() {
        //給全部class=right1的div元素，增長內部包裹父容器p
       $('.right1').wrapInner('<p></p>');
    })
    </script>
    <script type="text/javascript">
    $(".aaron2").on('click', function() {
        //wrapInner接受一個回調函數
        //每一次遍歷this都指向了合集中每個class=left1的div元素
        $('.left1').wrapInner(function() {
            return '<a></a>'
        })
    })
    </script>
</body>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。