jQuery_DOM学习之------clone()
clone()---节点克隆:
方法:
1.clone()只克隆结构,事件将被丢弃
2.clone(true)结构和事件都将被克隆
例子:
<!DOCTYPE html>
<html> <head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<style>
.ts1{
width:50px;
height:50px;
background:#F00;
float:left;
margin:10px;
}
.ts2{
width:50px;
height:50px;
background:#00f;
float:left;
margin:10px;
}
</style>
</head> <body>
<h5>使用.clone()只克隆结构,事件将被丢弃--红色小块的后代只克隆了结构,事件将会丢失</h5>
<h5>使用.clone(true)结构和事件都将被克隆--蓝色小块的后代同时克隆了结构和事件</h5>
<div class="rongqi">
<div class="ts1"></div>
<div class="ts2"></div>
</div>
<script type="text/javascript">
//只克隆节点
//不克隆事件
$(".ts1").on('click', function() {
$(".rongqi").append( $(this).clone().css('background','#f66') )
})
</script> <script type="text/javascript">
//克隆节点
//克隆事件
$(".ts2").on('click', function() {
$(".rongqi").append( $(this).clone(true).css('background','#66f') )
})
</script>
</body> </html>