salinan operasi DOM jQuery
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() {//執(zhí)行操作})
//clone處理一
$("div").clone() //只克隆了結(jié)構(gòu)，事件丟失
//clone處理二
$("div").clone(true) //結(jié)構(gòu)、事件與數(shù)據(jù)都克隆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深拷貝,可以繼續(xù)觸發(fā)創(chuàng)建</div>
</div>
<script type="text/javascript">
//只克隆節(jié)點 //不克隆事件
$(".aaron1").on('click', function() {
$(".left").append( $(this).clone().css('color','red') )
})
</script>
<script type="text/javascript">
//克隆節(jié)點 //克隆事件
$(".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
