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('click', 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('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>
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!