Maison > Article > interface Web > Jquery a-t-il une méthode de clonage ?

Jquery a-t-il une méthode de clonage ?

青灯夜游original: 2020-11-19 10:14:521803parcourir

jquery a une méthode de clonage, la méthode clone(). La méthode clone() est spécialement utilisée pour traiter les clones dom. Elle peut générer une copie de l'élément sélectionné, y compris les nœuds enfants, le texte et les attributs ; la syntaxe est "$(selector).clone(true|false)", true précise ; ce traitement des événements de copie est un programme requis.

Recommandations associées : "vidéo jq"

Le nœud de clonage est une opération courante du DOM, jQuery fournit un clone méthode , la méthode clone

.clone() spécialement utilisée pour traiter le DOM copie en profondeur l'ensemble de tous les éléments correspondants, 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, qui consiste à 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 passer une valeur booléenne via clone(ture) pour spécifier, donc non seulement cloner la structure de nœud simple, mais également cloner les événements et les données qui l'accompagnent.

Syntaxe

$(selector).clone(true|false)

Paramètres :

true spécifie que le gestionnaire d'événements doit être copié.
faux Par défaut. Spécifie que les gestionnaires d'événements ne sont pas copiés.

Par exemple :

Partie HTML

<div></div>

Partie JavaScript

$("div").on(&#39;click&#39;, function() {//执行操作})

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

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

C'est si simple à utiliser. Lors de l'utilisation de clone, 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 fichier. document, on peut modifier l'élément cloné ou le contenu de l'élément. Par exemple, dans le code de droite, je $(this).clone().css('color','red') ajoute une couleur
en passant true, copie toutes les fonctions de gestion d'événements liées à l'élément d'origine vers l'élément cloné
La méthode clone() est une extension jQuery et ne peut gérer que événements liés via jQuery. Les objets et tableaux de l'élément data
ne seront pas copiés et continueront à être partagés 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

<!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>
    <h2>通过clone克隆元素</h2>
    <div class="left">
        <div class="aaron1">点击,clone浅拷贝</div>
        <div class="aaron2">点击,clone深拷贝,可以继续触发创建</div>
    </div>
    <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>

Pour plus de connaissances liées à la programmation, veuillez visiter : Cours de programmation ! !

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!

JavaScript jquery css html 对象事件 dom this

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：Quelle est la différence entre on() et click() dans jquery ?Article suivant：Quelle est la différence entre on() et click() dans jquery ?

Articles Liés

Voir plus