差异 - jQuery的

136

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

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

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

要重新插入一个分离的元件到DOM，只需从detach()插入返回jQuery组：

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

... 

span.appendTo('body');

来源

2011-02-09 06:51:54

+7

与.clone结合（真），你可以使用detach进行廉价的模板，避免jquery现场活动：http://jsfiddle.net/b9chris/PNd2t/ –

+0

我还是没有看到区别。如果我用'remove'代替'detach'，这个例子仍然有效。 – comecme

+10

@comecme：如果你已经将一个事件像点击处理程序绑定到跨度，调用'remove（）'并重新附加它，绑定将消失，单击跨度将不会执行任何操作。如果您调用'detach（）'并重新附加，则绑定保持不变，点击处理程序继续工作。 – jpatokal

12

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

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

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

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

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

来源

2012-09-21 13:26:58 Kumar

11

在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>

这将导致与海文本DOM结构中删除：

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

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

卸下摆臂（）

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

注意

使用一个.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

来源

2014-03-28 11:27:30 Jason

32

试想一张纸上用铅笔写了一些笔记的表。

hide - >扔衣到它
empty - >删除用橡皮擦音符
detach - >抓住纸张在你手中，并保持它在那里任何未来计划
remove - >抓住纸并将其扔到垃圾箱

纸张表示元素，并且注释表示纸张的内容（子节点）元素。

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

来源

2015-12-11 08:08:27

0

<!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>

来源

2016-05-12 04:23:00

差异 - jQuery的

回答

相关问题