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


Posted in Javascript onMarch 02, 2017

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()的区别就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript中yield实用简洁实现方式
Jun 12 Javascript
JS模块与命名空间的介绍
Mar 22 Javascript
简单的js表单验证函数
Oct 28 Javascript
jQuery基础语法实例入门
Dec 23 Javascript
javascript将异步校验表单改写为同步表单
Jan 27 Javascript
浅谈javascript中自定义模版
Jan 29 Javascript
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
Nov 23 Javascript
使用jQuery UI库开发Web界面的简单入门指引
Apr 22 Javascript
JavaScript数组去重由慢到快由繁到简(优化篇)
Aug 26 Javascript
微信小程序 swiper制作tab切换实现附源码
Jan 21 Javascript
Angular2使用Guard和Resolve进行验证和权限控制
Apr 24 Javascript
vue 循环加载数据并获取第一条记录的方法
Sep 26 Javascript
jQuery实用密码强度检测
Mar 02 #Javascript
通过npm引用的vue组件使用详解
Mar 02 #Javascript
完美解决spring websocket自动断开连接再创建引发的问题
Mar 02 #Javascript
vue-dialog的弹出层组件
May 25 #Javascript
在node.js中怎么屏蔽掉favicon.ico的请求
Mar 01 #Javascript
基于Bootstrap的网页设计实例
Mar 01 #Javascript
JS中的作用域链
Mar 01 #Javascript
You might like
PHP imagegrabscreen和imagegrabwindow(截取网站缩略图)的实例代码
2013/11/07 PHP
PHP动态柱状图实现方法
2015/03/30 PHP
IE FF OPERA都可用的弹出层实现代码
2009/09/29 Javascript
js将控件隐藏的方法及display属性介绍
2013/07/04 Javascript
node.js中的buffer.write方法使用说明
2014/12/10 Javascript
Angularjs基础知识及示例汇总
2015/01/22 Javascript
NodeJS Web应用监听sock文件实例
2015/02/18 NodeJs
js实现浮动在网页右侧的简洁QQ在线客服代码
2015/09/04 Javascript
JQuery 进入页面默认给已赋值的复选框打钩
2017/03/23 jQuery
JS中将多个逗号替换为一个逗号的实现代码
2017/06/23 Javascript
基于jQuery解决ios10以上版本缩放问题
2017/11/03 jQuery
Vue中的循环及修改差值表达式的方法
2019/08/29 Javascript
vue实现商城秒杀倒计时功能
2019/12/12 Javascript
[01:59][TI9趣味视频] 全明星赛奖励
2019/08/23 DOTA
Python验证企业工商注册码
2015/10/25 Python
Python MD5加密实例详解
2017/08/02 Python
Python实现连接两个无规则列表后删除重复元素并升序排序的方法
2018/02/05 Python
详解配置Django的Celery异步之路踩坑
2018/11/25 Python
css3 自定义字体font-face使用介绍
2014/05/14 HTML / CSS
用html5实现语音搜索框的方法
2014/03/18 HTML / CSS
HTML5移动端手机网站开发流程
2016/04/25 HTML / CSS
Original Penguin美国官网:布拉德皮特、强尼德普喜爱的服装品牌
2016/10/25 全球购物
澳大利亚领先的内衣店:Bendon Lingerie澳大利亚
2020/05/15 全球购物
大学校庆邀请函
2014/01/11 职场文书
万年牢教学反思
2014/02/15 职场文书
《商鞅南门立木》教学反思
2014/02/16 职场文书
英语老师推荐信
2014/02/26 职场文书
心理咨询专业自荐信
2014/07/07 职场文书
信访稳定工作汇报
2014/10/27 职场文书
评测 | 大屏显示带收音机的高端音箱,JBL TUNE2便携式插卡音箱实测
2021/04/24 无线电
使用ORM新增数据在Mysql中的操作步骤
2021/07/26 MySQL
详细聊聊MySQL中慢SQL优化的方向
2021/08/30 MySQL
斗罗大陆八大特殊魂兽,龙族始祖排榜首,第五最残忍(翠魔鸟)
2022/03/18 国漫
【海涛dota解说】一房久违的影魔魂守二连发
2022/04/01 DOTA
mysql性能优化以及配置连接参数设置
2022/05/06 MySQL
ubuntu如何搭建vsftpd服务器
2022/12/24 Servers