老生常谈jquery中detach()和remove()的区别

JQuery是一个很大强的工具库，在工作中开发中，可是有些方法还是因为不常用到，或是没有注意到而被我们而忽略。

remove()和detach()可能就是其中的一个，可能remove()我们用得比较多，而detach()就可能会很少了

通过一张对比表来解释2个方法之间的不同


方法名
参数
事件及数据是否也被移除
元素自身是否被移除

remove
支持选择器表达
是
是（无参数时），有参数时要根据参数所涉及的范围

detach
参数同remove
否
情况同remove

remove：移除节点

- 无参数，移除自身整个节点以及该节点的内部的所有节点，包括节点上事件与数据

- 有参数，移除筛选出的节点以及该节点的内部的所有节点，包括节点上事件与数据

detach：移除节点

- 移除的处理与remove一致

- 与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来

- 例如：$("p").detach()这一句会移除对象，仅仅是显示效果没有了。但是内存中还是存在的。当你append之后，又重新回到了文档流中。就又显示出来了。

eq：

<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>
<h3>给页面2个p元素节点绑定点击事件,点击后弹出自己本身的节点内容</h3>

<p>元素p1，同时绑定点击事件</p>

<p>元素p2，同时绑定点击事件</p>

<h3>通过点击2个按钮后观察方法处理的区别</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').html('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 >

以上这篇老生常谈jquery中detach()和remove()的区别就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • jQuery删除节点的三个方法即remove()detach()和empty()

    jQuery提供了三种删除节点的方法,即remove(),detach()和empty(). 测试所用HTML代码: 复制代码 代码如下: <p title="选择你最喜欢的水果?">你最喜欢的水果是?</p> <ul> <li title="苹果">苹果</li> <li title="橘子">橘子</li> <li title="菠萝"

  • jquery之empty()与remove()区别说明

    1.empty()是只移除了 指定元素中的所有子节点,拿$("p").empty()来说,他只是把<p>dsfsd</p>中的文本给移除了,而留下 了<p></p>,仍保留其在dom中所占的位置. 2.remove([expr])则是把其从dom中删除,而不会保留其所占的位置. 例:<p>Hello</p>World<p>welcome</p> 执行$("p").empt

  • jQuery remove()过滤被删除的元素（推荐）

    jQuery remove() 方法也可接受一个参数,允许您对被删元素进行过滤. 该参数可以是任何 jquery 选择器的语法. 下面的例子删除 class="italic" 的所有 <p> 元素: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.bootcss.com/jquery/

  • jQuery使用empty()方法删除元素及其所有子元素的方法

    本文实例讲述了jQuery使用empty()方法删除元素及其所有子元素的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function()

  • 浅谈java Iterator.remove()方法的用法(详解)

    实例如下: @Test public void tt(){ List<String> list = new ArrayList<String>(); list.add( "0" ); list.add( "1" ); list.add( "2" ); list.add( "3" ); list.add( "4" ); list.add( "5" ); list.a

  • 清空元素html("") innerHTML="" 与 empty()的区别和应用(推荐)

    一.清空元素的区别 1.错误做法一: $("#test").html("");//该做法会导致内存泄露   2.错误做法二: $("#test")[0].innerHTML="";  ;//该做法会导致内存泄露 3.正确做法:   //$("#test").empty();        二.原理: 在 jQuery 中用 innerHTML 的方法来清空元素,是必然会导致内存泄露的,由于 jquery 对

  • PHP isset()与empty()的使用区别详解

    PHP的isset()函数 一般用来检测变量是否设置 格式:bool isset ( mixed var [, mixed var [, ...]] ) 功能:检测变量是否设置 返回值: 若变量不存在则返回 FALSE 若变量存在且其值为NULL,也返回 FALSE 若变量存在且值不为NULL,则返回 TURE 同时检查多个变量时,每个单项都符合上一条要求时才返回 TRUE,否则结果为 FALSE 版本:PHP 3, PHP 4, PHP 5 更多说明: 使用 unset() 释放变量之后,它将

  • javascript Array.remove() 数组删除

    复制代码 代码如下: Array.prototype.remove = function(b) { var a = this.indexOf(b); if (a >= 0) { this.splice(a, 1); return true; } return false; }; 以后使用过程中,就可以直接利用这个函数,删除数组中的值了.

  • php empty,isset,is_null判断比较（差异与异同）

    php empty,isset,is_null判断比较（差异与异同）

    一.举例说明 A.一个变量没有定义,我们该怎么样去判断呢 复制代码 代码如下: <?php #不存在$test 变量 $isset= isset($test)?"test is define!":"test is undefine!"; echo "isset:$isset\r\n"; $empty=!empty($test)?"test is define!":"test is undefine!"

  • 老生常谈jquery中detach()和remove()的区别

    JQuery是一个很大强的工具库,在工作中开发中,可是有些方法还是因为不常用到,或是没有注意到而被我们而忽略. remove()和detach()可能就是其中的一个,可能remove()我们用得比较多,而detach()就可能会很少了 通过一张对比表来解释2个方法之间的不同 方法名 参数 事件及数据是否也被移除 元素自身是否被移除 remove 支持选择器表达 是 是(无参数时),有参数时要根据参数所涉及的范围 detach 参数同remove 否 情况同remove remove:移除节点 -

  • 浅谈jquery中next与siblings的区别

    siblings([expr]): 概述   取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合. [expr] :可以用可选的表达式进行筛选.用于筛选同辈元素的表达式 示例 找到每个div的所有同辈元素. HTML 代码: <p>Hello</p><div><span>Hello Again</span></div><p>And Again</p> jQuery 代码: $("div

  • jQuery中detach()方法用法实例

    本文实例讲述了jQuery中detach()方法用法.分享给大家供大家参考.具体分析如下: 此方法从DOM中删除所有匹配的元素. 说明:detach()方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素,与remove()不同的是,所有绑定的事件.附加的数据等都会保留下来. 语法结构: 复制代码 代码如下: $(selector).detach(expr) 参数列表: 参数 描述 expr 可选.用于筛选被删除元素的jQuery表达式. 实例代码: 实例一: 复制代

  • Jquery中offset()和position()的区别分析

    本文实例分析了Jquery中offset()和position()的区别.分享给大家供大家参考.具体分析如下: 一.Jquery中offset() 获取匹配元素在当前视口的相对偏移. 总是计算相对于文档的位置,无论元素的父元素或祖先元素的position属性是什么. 返回的对象包含两个整形属性:top 和 left.此方法只对可见元素有效.   例如: <!DOCTYPE html> <html> <head> <style> p { margin-left

  • jQuery中.attr()和.data()的区别分析

    $.attr()和$.data()本质上属于 DOM属性 和 Jquery对象属性 的区别. Jquery对象属性和DOM属性 一个简单的例子 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Jquery中.attr和.data的区别</title> </head> <body> <p id="app&q

  • jQuery中parents()和parent()的区别分析

    本文实例分析了jQuery中parents()和parent()的区别,分享给大家供大家参考.具体分析如下: 其实在jQuery中,函数或者选择器的概念都是很容易理解的,只要对API手册有足够的熟练就能够很容易分辨,标题中的函数其实也是如此,不过咱们这里还是做一些简单的介绍,毕竟这样可能更为方便一些. 一.parents()函数: 此函数能够获取匹配元素的所有父元素,代码示例: 复制代码 代码如下: $(".mayi").parents().css("color",

  • 实例讲解jquery中mouseleave和mouseout的区别

    本文详细的介绍了关于jQuery中mouseleave和mouseout的区别,分享给大家供大家参考,具体内容如下 很多人在使用jQuery实现鼠标悬停效果时,一般都会用到mouseover和mouseout这对事件.而在实现过程中,可能会出现一些不理想的状况. 先看下使用mouseout的效果: <p>先看下使用mouseout的效果:</p> <div id="container" style="width: 300px;">

  • 浅谈jQuery中hide和fadeOut的区别 show和fadeIn的区别

    hide和fadeOut 显示效果有什么区别? show和fadeIn显示效果都一样? 很多朋友在学习jQuery的时候 会遇到这个问题 ,hide和 fadeOut都可以带有参数: $(selector).hide(speed,callback); $(selector).fadeOut(speed,callback); 首先我们从名字上就可以看出 hide是隐藏而fadeOut是淡出,当然名字不能看出具体的区别,只能体现他们是不同的而已.但是当我们把参数 speed 设置稍微长一些就可以看出

  • 谈谈Jquery中的children find 的区别有哪些

    精华:find方法能找子孙,children方法只能找儿子 一.Jquery中children 语法 .children(selector) 说明 expr是表达式,可选参数,所有选择器中的表达式都可以用在这,比如按标签名"div",按类名".class",按序号":first"等等,如果表达式为空,那么返回的是所有的孩子,返回的结果仍为jQuery对象. 二.Jquery中find find() 方法获得当前元素集合中每个元素的后代,通过选择器

  • jQuery中serializeArray()与serialize()的区别实例分析

    jQuery中serializeArray()与serialize()的区别实例分析

    本文实例讲述了jQuery中serializeArray()与serialize()的区别.分享给大家供大家参考,具体如下: serialize()序列化表单元素为字符串,用于 Ajax 请求. serializeArray()序列化表单元素为JSON数据. 具体实例如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xht

随机推荐