La différence entre les opérations jQuery DOM detach() et remove()
JQuery est une bibliothèque d'outils très puissante. Dans le développement du travail, certaines méthodes sont ignorées par nous car elles ne sont pas couramment utilisées ou n'ont pas été remarquées.
remove() et detach() en font peut-être partie. Peut-être que nous utilisons davantage remove(), mais detach() peut être moins utilisé
Grace à un tableau de comparaison Pour expliquer la différence entre les deux méthodes
supprimer?: supprimer le n?ud
Aucun paramètre, supprimer l'intégralité du n?ud lui-même et tout ce qui se trouve à l'intérieur du n?ud Node, y compris les événements et les données sur le n?ud
Avec les paramètres, supprimez le n?ud filtré et tous les n?uds à l'intérieur du n?ud, y compris les événements et les données sur le n?ud
détacher?: supprimer le n?ud
Le traitement de la suppression est cohérent avec Remove
Différent de Remove(), tous les événements liés, les données supplémentaires, etc. seront conservés
Par exemple?: $(" p").detach() supprimera l'objet, mais l'effet d'affichage aura disparu. Mais il existe toujours en mémoire. Lorsque vous ajoutez, vous revenez au flux de documents. Il est réapparu.
Analysons-le en détail à travers des exemples?:
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css">
p{
border: 1px solid red;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<p>元素p1，同時綁定點擊事件</p>
<p>元素p2，同時綁定點擊事件</p>
<h3>通過點擊2個按鈕后觀察方法處理的區(qū)別</h3>
<button>點擊通過remove處理元素p1</button>
<button>點擊通過detach處理元素p2</button>
</body>
<script type="text/javascript">
//給頁面上2個p元素都綁定時間
$('p').click(function(e) {
alert(e.target.innerHTML)
})
$("button:first").click(function() {
var p = $("p:first").remove();
p.css('color','red').text('p1通過remove處理后,點擊該元素,事件丟失')
$("body").append(p);
});
$("button:last").click(function() {
var p = $("p:first").detach();
p.css('color','blue').text('p2通過detach處理后,點擊該元素事件存在')
$("body").append(p);
});
</script>
</script>
</html>
