copie de l'opération jQuery DOM

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

Formation continue

nouveau fichier

<!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>

soumettre Réinitialiser le code

Opération automatique

copie de l'opération jQuery DOM

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]