Maison >interface Web >js tutoriel >Comment comprendre le clone de copie DOM()

Comment comprendre le clone de copie DOM()

一个新手original: 2017-09-30 09:23:591506parcourir

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()方法深度 复制所有匹配的元素集合，包括所有匹配元素、匹配元素的下级元素、文字节点。

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) pour spécifier, afin qu'il ne clone pas seulement le nœud. structure de nœud simple, mais combine également les événements attachés avec Les données sont clonées ensemble

Par exemple :

HTML部分<p></p>JavaScript部分
$("p").on(&#39;click&#39;, function() {//执行操作})

//clone处理一
$("p").clone()   //只克隆了结构，事件丢失

//clone处理二
$("p").clone(true) //结构、事件与数据都克隆

C'est si simple à utiliser. Détails supplémentaires que nous devons connaître lors de l'utilisation du clonage : 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 sur le right $(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 et ne peut gérer que les événements et les données liés via jQuery
Objets et tableaux à l'intérieur les données de l'élément (données) ne seront pas copiées et continueront à être partagées entre l'élément cloné et l'élément d'origine. Toutes les données en copie complète doivent être copiées manuellement pour chaque

Analyse de cas :

<!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 p,
    .right p {
        width: 100px;
        height: 90px;
        padding: 5px;
        margin: 5px;
        float: left;
        border: 1px solid #ccc;
        background: #bbffaa;
    }
    </style></head><body>
    <h2>通过clone克隆元素</h2>
    <p class="left">
        <p class="aaron1">点击,clone浅拷贝</p>
        <p class="aaron2">点击,clone深拷贝,可以继续触发创建</p>
    </p>
    <script type="text/javascript">
        //只克隆节点
        //不克隆事件        $(".aaron1").on(&#39;click&#39;, function() {
            $(".left").append( $(this).clone().css(&#39;color&#39;,&#39;red&#39;) )
        })    </script>

    <script type="text/javascript">
        //克隆节点
        //克隆事件        $(".aaron2").on(&#39;click&#39;, function() {
            console.log(1)
            $(".left").append( $(this).clone(true).css(&#39;color&#39;,&#39;blue&#39;) )
        })    </script></body></html>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Quels types de sélecteurs JQuery existe-t-il ?Article suivant：Quels types de sélecteurs JQuery existe-t-il ?

Articles Liés

Voir plus