Heim >Web-Frontend >js-Tutorial >So verstehen Sie DOM copy clone()

So verstehen Sie DOM copy clone()

一个新手Original: 2017-09-30 09:23:591509Durchsuche

Klonenknoten ist eine häufige Operation von DOM. jQuery bietet eine Klonmethode, die speziell für das Klonen von Doms verwendet wird:

.clone()方法深度 复制所有匹配的元素集合，包括所有匹配元素、匹配元素的下级元素、文字节点。

Die Klonmethode ist Relativ einfach: Klonen Sie einfach den Knoten. Beachten Sie jedoch, dass wir, wenn der Knoten über andere Verarbeitungsvorgänge wie Ereignisse oder Daten verfügt, einen booleschen Wert über clone(ture) übergeben müssen, um ihn nicht nur zu klonen einfache Knotenstruktur, kombiniert aber auch die angehängten Ereignisse mit Die Daten werden zusammen geklont

Zum Beispiel:

HTML部分<p></p>JavaScript部分
$("p").on(&#39;click&#39;, function() {//执行操作})

//clone处理一
$("p").clone()   //只克隆了结构，事件丢失

//clone处理二
$("p").clone(true) //结构、事件与数据都克隆

Es ist so einfach zu verwenden. Zusätzliche Details, die wir bei der Verwendung des Klonens wissen müssen:

clone()-Methode, bevor wir sie in das Dokument einfügen, können wir das geklonte Element oder den Elementinhalt ändern, z. B. den Code auf dem rechts $(this).clone().css( 'color','red') fügt eine Farbe hinzu
Durch die Übergabe von true werden alle an das ursprüngliche Element gebundenen Event-Handler kopiert das geklonte Element
Die Methode clone() ist eine jQuery-Erweiterung und kann nur Ereignisse und Daten verarbeiten, die über jQuery
Objekte und Arrays darin gebunden sind Elementdaten (Daten) werden nicht kopiert und werden weiterhin zwischen dem geklonten Element und dem ursprünglichen Element gemeinsam genutzt. Alle Daten in Deep Copy müssen für jede

Fallanalyse:

<!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 p,
    .right p {
        width: 100px;
        height: 90px;
        padding: 5px;
        margin: 5px;
        float: left;
        border: 1px solid #ccc;
        background: #bbffaa;
    }
    </style></head><body>
    <h2>通过clone克隆元素</h2>
    <p class="left">
        <p class="aaron1">点击,clone浅拷贝</p>
        <p class="aaron2">点击,clone深拷贝,可以继续触发创建</p>
    </p>
    <script type="text/javascript">
        //只克隆节点
        //不克隆事件        $(".aaron1").on(&#39;click&#39;, function() {
            $(".left").append( $(this).clone().css(&#39;color&#39;,&#39;red&#39;) )
        })    </script>

    <script type="text/javascript">
        //克隆节点
        //克隆事件        $(".aaron2").on(&#39;click&#39;, function() {
            console.log(1)
            $(".left").append( $(this).clone(true).css(&#39;color&#39;,&#39;blue&#39;) )
        })    </script></body></html>

manuell kopiert werden

Das obige ist der detaillierte Inhalt vonSo verstehen Sie DOM copy clone(). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Welche Arten von JQuery-Selektoren gibt es?Nächster Artikel：Welche Arten von JQuery-Selektoren gibt es?

In Verbindung stehende Artikel

Mehr sehen