jQuery DOM operation copy
Clone node is a common operation of DOM. jQuery provides a clone method, which is specially used to deal with dom cloning.
.clone() method deeply copies all matching element sets, including All matching elements, subordinate elements of matching elements, and text nodes.
The clone method is relatively simple, just clone the node, but it should be noted that if the node has other processing such as events or data, we need to pass a Boolean value ture through clone(ture) to specify, so that it is not just To clone a simple node structure, you also need to clone the accompanying events and data.
For example:
HTML部分
<div></div>
JavaScript部分
$("div").on('click', function() {//執(zhí)行操作})
//clone處理一
$("div").clone() //只克隆了結(jié)構(gòu)，事件丟失
//clone處理二
$("div").clone(true) //結(jié)構(gòu)、事件與數(shù)據(jù)都克隆It is so simple to use. When using cloning, we need to know additional details:
When using the clone() method, we can modify the cloned element or element content before inserting it into the document, such as the code on the right: $(this).clone().css('color', 'red') adds a color
By passing true, all event handlers bound to the original element are copied to the cloned element
The clone() method is a jQuery extension. Can only handle events and data bound through jQuery
Objects and arrays within element data (data) will not be copied and will continue to be shared by cloned elements and original elements. All data for deep copying needs to be copied manually.
Let’s write an example below:
<!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>Look at the above code, when I click on the first div, it is copied. , but when you click to copy it, it has no effect. You can try it
