communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français

Opération jQuery DOM détacher ()

Si nous voulons supprimer temporairement un nœud sur la page, mais que nous ne voulons pas que les données et les événements sur le nœud soient perdus et que le nœud supprimé puisse être affiché sur la page au cours de la période suivante, nous pouvons utiliser la méthode de détachement pour le gérer

detach est facile à comprendre littéralement. Laissez un élément Web être hébergé. Autrement dit, l'élément est supprimé de la page actuelle, mais l'objet de modèle de mémoire de cet élément est conservé.

Jetons un coup d'œil à l'explication de la documentation officielle de jquery :

Cette méthode ne supprimera pas les éléments correspondants de l'objet jQuery, donc ces éléments correspondants pourront être réutilisés à l'avenir. Contrairement à Remove(), tous les événements liés, les données jointes, etc. seront conservés.
$("div").detach() supprimera l'objet, mais l'effet d'affichage disparaîtra. Mais il existe toujours en mémoire. Lorsque vous ajoutez, vous revenez au flux de documents. Il est réapparu.

Bien sûr, une attention particulière doit être portée ici. La méthode detach est unique à JQuery, elle ne peut donc traiter que les événements ou les données liés via les méthodes JQuery

Reportez-vous à la zone de code. à droite, via $("p").detach() supprime tous les éléments P, puis place les éléments p supprimés sur la page via append. En cliquant sur le texte, vous pouvez prouver que l'événement n'est pas perdu <🎜. >

Jetons un coup d'oeil ci-dessous Exemple de code : 

<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <style type="text/css">
    p {
        color: red;
    }
    </style>
</head>

<body>
    <p>P元素1，默认给绑定一个点击事件</p>
    <p>P元素2，默认给绑定一个点击事件</p>
    <button id="bt1">点击删除 p 元素</button>
    <button id="bt2">点击移动 p 元素</button>
    <script type="text/javascript">
    $('p').click(function(e) {
        alert(e.target.innerHTML)
    })
    var p;
    $("#bt1").click(function() {
        if (!$("p").length) return; //去重
        //通过detach方法删除元素
        //只是页面不可见，但是这个节点还是保存在内存中
        //数据与事件都不会丢失
        p = $("p").detach()
    });

    $("#bt2").click(function() {
        //把p元素在添加到页面中
        //事件还是存在
        $("body").append(p);
    });
    </script>
</body>

</html>


Formation continue
||
<html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> <style type="text/css"> p { color: red; } </style> </head> <body> <p>P元素1，默认给绑定一个点击事件</p> <p>P元素2，默认给绑定一个点击事件</p> <button id="bt1">点击删除 p 元素</button> <button id="bt2">点击移动 p 元素</button> <script type="text/javascript"> $('p').click(function(e) { alert(e.target.innerHTML) }) var p; $("#bt1").click(function() { if (!$("p").length) return; //去重 //通过detach方法删除元素 //只是页面不可见，但是这个节点还是保存在内存中 //数据与事件都不会丢失 p = $("p").detach() }); $("#bt2").click(function() { //把p元素在添加到页面中 //事件还是存在 $("body").append(p); }); </script> </body> </html>
soumettreRéinitialiser le code
Section précédente section suivante
Liste des didacticiels
obtenir de l'aide
  • Recommandations de cours
  • Téléchargement du didacticiel
Le didacticiel n'est pas disponible au téléchargement pour le moment. Le staff est actuellement en train de l'organiser. Veuillez prêter plus d'attention à ce cours à l'avenir ~

Les étudiants qui ont regardé ce cours apprennent également

Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)  492413 joue