克隆
克隆:是英文"clone"或"cloning"的音譯;克隆是指生物體通過體細胞進行的無性繁殖,以及由無性繁殖形成的基因型完全相同的后代個體。
克隆也可以理解為復制、拷貝和翻倍,就是從原型中產生出同樣的復制品,它的外表及遺傳基因與原型完全相同,但大多行為 思想不同。
JQ的clone()方法名稱個人感覺就是蹭熱點名詞;其作用就是復制。
clone()
?克隆節點是Dom的常見操作,JQ提供一個clone方法,專門用于處理dom的克隆。
clone()方法是克隆匹配的Dom元素;可以生成被選元素的副本,包含子節點,文本與屬性。
clone()方法使用格式:$(selector).clone(true|false)?。
深/淺克隆的區別在于方法的參數是true(深克隆)或false(或者沒有)是淺克隆。
- 淺克隆:只復制副本,不會克隆節點的事件。
- 深克隆:不止復制副本,還會復制節點的JQ事件。
頁面示例代碼：
<style type="text/css">
div {
border: 1px solid #000;
margin: 10px 10px;
background-color: #0095ff;
width: 200px;
height: 100px;
}
</style>
<input type="button" value="JQ淺克隆" id="c1" />
<input type="button" value="JQ深克隆" id="c2" />
<div id="dv1">
<span>用戶名：</span><input type="text" />
</div>
為dv1分別注冊Dom的0級/2級事件/JQ事件的單擊事件;使用colone()方法克隆出新的div,在克隆的div中追加一個p元素其文本用于標示深/淺克隆的div。
深/淺克隆事件
$(function () {
//注冊dom的0級單擊事件
var dv1 = document.getElementById("dv1");
dv1.onclick = function () {
console.log("dom 0級事件");
};
//注冊dom的2級單擊事件
dv1.addEventListener("click", function () {
console.log("dom 2級事件");
});
//注冊JQ的單擊事件
//$("#dv1").click(function () { console.log("我是dv1"); });
$(dv1).click(function () { console.log("我是dv1"); });
//01.淺克隆 不會復制事件
//包括 0級/2級dom事件與JQ的事件 都不會被復制
$("#c1").click(function () {
//$newDiv克隆出來的新div
var $newDiv = $("#dv1").clone();
//在克隆的div追加一個p元素
//用于標示新div是淺克隆出來的
$newDiv.append('<p>淺克隆</p>');
//將克隆的div插入到$("#dv1")的后面
$newDiv.insertAfter($("#dv1"));
});
//02.深克隆 會復制事件
//注意：jq事件 會復制，
//0級/2級dom事件 不會被復制
$("#c2").click(function () {
var $newDiv = $("#dv1").clone(true);
//用于標示新div是深克隆出來的
$newDiv.append('<p>深克隆</p>');
$newDiv.insertAfter($("#dv1"));
});
});小結
深/淺克隆的區別：
1、方法參數
2、針對事件
- 淺克隆 0級/2級/JQ事件都不會被克隆。
- 深克隆只會克隆JQ事件,0級/2級事件也不會被克隆。
