Le nœud Clone est une opération courante du DOM. jQuery fournit une méthode de clonage, spécialement utilisée pour gérer le clonage dom
.clone() copie en profondeur tous les éléments correspondants. ensembles, y compris tous les éléments correspondants, les éléments subordonnés des éléments correspondants et les nœuds de texte.
La méthode de clonage est relativement simple, il suffit de cloner le nœud, mais il convient de noter que si le nœud a d'autres traitements tels que des événements ou des données, nous devons transmettre une valeur booléenne ture via clone(ture) à spécifiez, il ne s'agit donc pas seulement de cloner une simple structure de nœuds, vous devez également cloner les événements et les données attachés ensemble
Par exemple :
HTML部分
<div></div>
JavaScript部分
$("div").on('click', function() {//执行操作})
//clone处理一
$("div").clone() //只克隆了结构，事件丢失
//clone处理二
$("div").clone(true) //结构、事件与数据都克隆 C'est si simple à utiliser. clonage, nous avons besoin de connaître des détails supplémentaires :
Lors de l'utilisation de la méthode clone(), avant de l'insérer dans le document, nous pouvons modifier l'élément cloné ou le contenu de l'élément, comme le code à droite : $( this).clone().css('color', 'red') ajoute une couleur
En passant true, tous les gestionnaires d'événements liés à l'élément d'origine sont copiés dans l'élément cloné
La méthode clone() est une extension jQuery. Ne peut gérer que les événements et les données liés via jQuery
Les objets et tableaux contenus dans les données des éléments (données) ne seront pas copiés et continueront à être partagés par les éléments clonés et les éléments originaux. . Pour copier en profondeur toutes les données, vous devez copier chacune manuellement
Écrivons un exemple :
<!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>Regardez le code ci-dessus, quand je clique sur le premier div, il est copié, mais lorsque vous cliquez pour le copier, cela n'a aucun effet. Vous pouvez l'essayer
.
section suivante