Question

这三种jQuery方法之间的功能差异是什么：

分离（）
隐藏（）
删除（）

Answer 1

hide()将匹配元素的CSS display属性设置为none。

remove()完全从DOM中删除匹配的元素。

detach()与remove()类似，但保留与匹配元素关联的存储数据和事件。

要将分离的元素重新插入DOM，只需从jQuery插入返回的detach()集：

var span = $('span').detach();

...

span.appendTo('body');

Answer 2

想象一张桌子上的一张纸，上面写着用铅笔写的一些笔记。

hide - ＆gt;扔上衣服
empty - ＆gt;用橡皮擦删除笔记
detach - ＆gt;抓住手中的纸张并将其保留在那里，以便将来的计划
remove - ＆gt;抓住纸张扔到垃圾箱

纸张代表元素，而笔记代表元素的内容（子节点）。

有点简化但不完全准确，但易于理解。

Answer 3

hide()将匹配元素的显示设置为无。

detach()删除匹配的元素，包括所有文本和子节点。

此方法存储与元素关联的所有数据，因此可用于恢复元素的数据以及事件处理程序。

remove()还会删除匹配的元素，包括所有文本和子节点。

但是，在这种情况下，只能恢复元素的数据，而不能恢复其事件处理程序。

Answer 4

在jQuery中，有三种方法可以从DOM中删除元素。这三种方法是.empty()，.remove()和.detach()。所有这些方法都用于从DOM中删除元素，但它们都是不同的。

<强> .hide（）

隐藏匹配的元素。如果没有参数，.hide（）方法是隐藏HTML元素的最简单方法：

$(".box").hide();

<强> .empty（）

.empty（）方法从所选元素中删除所有子节点和内容。此方法不会删除元素本身或其属性。

注意

.empty（）方法不接受任何参数以避免内存泄漏。在删除元素本身之前，jQuery会从子元素中删除其他构造，例如数据和事件处理程序。

示例

<div class="content"> <div class="hai">Hai</div> <div class="goodevening">good evening</div> </div> <script> $("div.hai").empty(); </script>

这将导致删除Hai文本的DOM结构：

<div class="content"> <div class="hai"></div> <div class="goodevening">good evening</div> </div>

如果<div class="hai">中有任意数量的嵌套元素，它们也会被删除。

.remove（）

.remove（）方法删除所选元素，包括所有文本和子节点。此方法还会删除所选元素的数据和事件。

注意

如果要删除元素本身及其中的所有内容，请使用.remove（）。除此之外，还删除了与元素关联的所有绑定事件和jQuery数据。

示例

考虑以下html：

<div class="content"> <div class="hai">Hai</div> <div class="goodevening">good evening</div> </div> <script> $("div.hai").remove(); </script>

这将导致删除<div>元素的DOM结构：

<div class="content"> <div class="goodevening">good evening</div> </div

如果我们在<div class="hai">中有任意数量的嵌套元素，它们也会被删除。其他jQuery构造（例如数据或事件处理程序）也会被删除。

<强> .detach（）

.detach（）方法删除所选元素，包括所有文本和子节点。但是，它会保留数据和事件。此方法还保留已删除元素的副本，以便稍后重新插入。

注意

当删除的元素稍后要重新插入DOM时，.detach（）方法很有用。

示例

<!doctype html> <html> <head> <script src="//code.jquery.com/jquery-1.10.2.js"></script> </head> <body> <p>Hai!</p>Good <p>Afternoo</p> <button>Attach/detach paragraphs</button> <script> $( "p" ).click(function() { $( this ).toggleClass( "off" ); }); var p; $( "button" ).click(function() { if ( p ) { p.appendTo( "body" ); p = null; } else { p = $( "p" ).detach(); } }); </script> </body> </html>

有关详细信息，请访问：http://www.scriptcafe.in/2014/03/what-is-difference-between-jquery_15.html

Answer 5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>
<body>
    <script>
        $(document).ready(function(){
            var $span;
            $span = $("<span>");
            $span.text("Ngoc Xuan");
            function addEvent() {
                $span.on("click",function(){
                    alert("I'm Span");
                });
            }
            function addSpan() {

                $span.appendTo("body");
            }
           function addButton(name) {
               var $btn = $("<input>");
               $btn.attr({value:name,
                       type:'submit'});
               if(name=="remove"){
                   $btn.on("click",function(){
                       $("body").find("span").remove();
                   })
               }else if(name=="detach"){
                   $btn.on("click",function(){
                       $("body").find("span").detach();
                   })
               }else if(name=="Add") {
                   $btn.on("click",function(){
                       addSpan();
                   })
               }else if(name=="Event"){
                   $btn.on("click",function(){
                       addEvent();
                   })
               }else if (name == "Hide") {
                   $btn.on("click",function(){
                       if($span.text()!= '')
                           $span.hide();
                   })
               }else {
                   $btn.on("click",function(){
                       $span.show();
                   })
               }
               $btn.appendTo("body");
           }
            (function () {
                addButton("remove");
                addButton("detach");
                addButton("Add");
                addButton("Event");
                addButton("Hide");
                addButton("Show");
            })();
        });
    </script>
</body>
</html>

detach（），hide（）和remove（）之间的区别 - jQuery

5 个答案: