Nod klon ialah operasi biasa DOM jQuery menyediakan kaedah klon, yang digunakan khas untuk menangani kaedah pengklonan dom
.clone() menyalin secara mendalam semua elemen padanan. set, termasuk Semua elemen padanan, unsur subordinat unsur padanan dan nod teks.
Kaedah klon adalah agak mudah, hanya mengklonkan nod, tetapi perlu diperhatikan bahawa jika nod mempunyai pemprosesan lain seperti peristiwa atau data, kita perlu menghantar ture nilai Boolean melalui klon(ture) kepada nyatakan, jadi bukan sahaja Untuk mengklon struktur nod ringkas, anda juga perlu mengklonkan peristiwa dan data yang dilampirkan bersama
Contohnya:
HTML部分
<div></div>
JavaScript部分
$("div").on('click', function() {//执行操作})
//clone处理一
$("div").clone() //只克隆了结构，事件丢失
//clone处理二
$("div").clone(true) //结构、事件与数据都克隆 Ia sangat mudah untuk digunakan pengklonan, kita perlu mengetahui butiran tambahan:
Apabila menggunakan kaedah klon(), sebelum memasukkannya ke dalam dokumen, kita boleh mengubah suai unsur klon atau kandungan unsur, seperti kod di sebelah kanan: $( this).clone().css('color', 'red') menambah warna
Dengan menghantar benar, semua pengendali acara yang terikat pada elemen asal disalin ke elemen klon
Kaedah klon() ialah sambungan jQuery hanya boleh mengendalikan peristiwa dan data yang terikat melalui jQuery
Objek dan tatasusunan dalam data elemen (data) tidak akan disalin dan akan terus dikongsi oleh elemen klon dan elemen asal. . Untuk menyalin dalam semua data, anda perlu menyalin setiap satu secara manual
Mari tulis contoh:
<!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>
<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>Lihat kod di atas, apabila saya mengklik pada div pertama, ia disalin, tetapi apabila anda klik untuk menyalinnya, anda boleh mencubanya
bahagian seterusnya