老生常谈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()的区别就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

时间: 2017-02-27

浅谈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

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

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

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

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

javascript Array.remove() 数组删除

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

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

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

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() 释放变量之后,它将

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

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

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

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

PHP中empty,isset,is_null用法和区别

1.empty用法 bool empty ( mixed var) 如果 var 是非空或非零的值,则 empty() 返回 FALSE.换句话说,"".0."0".NULL.FALSE.array().var $var; 以及没有任何属性的对象都将被认为是空的,如果 var 为空,则返回 TRUE 2.isset() isset -- 检测变量是否设置 描述 bool isset ( mixed var [, mixed var [, ...]]) 如果 var

深入PHP empty(),isset(),is_null()的实例测试详解

有关 PHP 的 empty(),isset() 还有 is_null() 这三个函数的用法讨论得已经很多了,而且很多资料也未必能说得很清楚.这里再重复一次,但不是从概念去说,直接用程序例子来说话,应该记忆会比较深刻些. 测试的类型如下: <?php $a; $b = false; $c = ''; $d = 0; $e = null; $f = array(); ?> empty() 首先是empty的var_dump输出: <?php var_dump(empty($a)); var

php中is_null,empty,isset,unset 的区别详细介绍

is_null, empty, isset, unset 我们先来看看这4个函数的描述. isset 判断变量是否已存在(配置)unset 把变量删除(释放)掉empty 判断变量是否为空is_null 判断变量是否为NULLok,已经开始搞人了.那么开始,这4个函数中除了unset,其他3个都是判断函数,unset首先出局,因为他不会搞错,其次是is_null,我们可以把它看成是!isset,是isset的一个逆操作,下面一张表可以很清楚的说明他们之间的关系: 复制代码 代码如下: 变量   

基于empty函数的判断详解

$a = '';echo '1.-----------'.($a == '').'<br>';echo '2.-----------'.($a == null).'<br>';echo '3.-----------'.($a == false).'<br>';echo '4.-----------'.($a == '0').'<br>';echo '5.-----------'.($a == 0).'<br>';$a = null;echo '6

PHP中的empty、isset、isnull的区别与使用实例

做php开发时候,通常会用到empty,isset,is_null这几个函数,使用不当的话甚至给自己的程序带来一些安全隐患的bug.很多时候,对于isset,empty都认为差不多.因此开发时候,就没有注意,一段作为流程判断时候,就出现bug问题了.下面我们分别介绍一下这三个函数的区别和使用. empty 如果 变量 是非空或非零的值,则 empty() 返回 FALSE.换句话说,"".0."0″.NULL.FALSE.array().var $var.未定义;以及没有任何

一张表搞清楚php is_null、empty、isset的区别

isset 判断变量是否已存在 empty 判断变量是否为空或为0 is_null 判断变量是否为NULL 变量 empty is_null isset $a="" true false true $a=null true true false var $a true true false $a=array() true false true $a=false true false true $a=15 false false true $a=1 false false true $a

PHP中empty和isset对于参数结构的判断及empty()和isset()的区别

废话不多说了,直接给大家贴代码了. <?php class test{} $a1 = null; $a2 = ""; //$a3 = $a4 = 0; $a5 = '0'; $a6 = false; $a7 = array(); //var $a8; $a9 = new test(); for ($i=1; $i <=9 ; $i++) { $s = 'a'.$i; echo $i . ":"; var_dump(isset($$s)); echo '&

深入理解PHP中的empty和isset函数

近日被问到PHP中empty和isset函数时怎么判断变量的,刚开始我是一脸懵逼的,因为我自己也只是一知半解,为了弄懂其真正的原理,赶紧翻开源码研究研究.经过分析可发现两个函数调用的都是同一个函数,因此本文将对两个函数一起分析. 我在github有对PHP源码更详细的注解.感兴趣的可以围观一下,给个star.PHP5.4源码注解.可以通过commit记录查看已添加的注解. 函数使用格式 empty bool empty ( mixed $var ) 判断变量是否为空. isset bool is

php empty 函数判断结果为空但实际值却为非空的原因解析

最近我在一个项目中使用 empty 时获取到了一些意料之外的结果.下面是我处理后的调试记录,在这里与你分享了. var_dump( $person->firstName, empty($person->firstName) ); 它的结果是: string(5) "Freek" bool(true) 结果出人意料.为什么变量的值为字符串,但同时会是空值呢?让我们在 $person->firstName 变量上尝试使用其它一些函数来进行判断吧: var_dump( $p