Heim > Web-Frontend > js-Tutorial > Hauptteil

So verstehen Sie DOM copy clone()

一个新手
Freigeben: 2017-09-30 09:23:59
Original
1486 Leute haben es durchsucht

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


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

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) //结构、事件与数据都克隆
Nach dem Login kopieren

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>
Nach dem Login kopieren
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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!