老生常谈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 相关文章推荐
jQuery 隐藏和显示 input 默认值示例
Jun 03 Javascript
js实现仿阿里巴巴城市选择框效果实例
Jun 24 Javascript
JQuery+EasyUI轻松实现步骤条效果
Feb 22 Javascript
AngularJS 路由和模板实例及路由地址简化方法(必看)
Jun 24 Javascript
JS实现给对象动态添加属性的方法
Jan 05 Javascript
简单实现bootstrap选项卡效果
Feb 08 Javascript
angularjs实现的前端分页控件示例
Feb 10 Javascript
微信小程序自定义单项选择器样式
Jul 25 Javascript
layui的表单提交以及验证和修改弹框的实例
Sep 09 Javascript
Vue微信公众号网页分享的示例代码
May 28 Javascript
微信小程序地图实现展示线路
Jul 29 Javascript
手写Vue2.0 数据劫持的示例
Mar 04 Vue.js
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执行速度全攻略(上)
2006/10/09 PHP
php数组合并array_merge()函数使用注意事项
2014/06/19 PHP
PHP函数引用返回的实例详解
2016/09/11 PHP
PHP rmdir()函数的用法总结
2019/07/02 PHP
Laravel框架实现抢红包功能示例
2019/10/31 PHP
jquery 最简单的属性菜单
2009/10/08 Javascript
通过javascript设置css属性的代码
2009/12/28 Javascript
JQuery插件Style定制化方法的分析与比较
2012/05/03 Javascript
基于jquery实现的一个选择中国大学的弹框 (数据、步骤、代码)
2012/07/26 Javascript
js浮动图片的动态效果
2013/07/10 Javascript
jQuery双向列表选择器DIV模拟版
2016/11/01 Javascript
JQuery Ajax WebService传递参数的简单实例
2016/11/02 Javascript
AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法
2017/01/04 Javascript
深入理解nodejs搭建静态服务器(实现命令行)
2019/02/05 NodeJs
基于vue+axios+lrz.js微信端图片压缩上传方法
2019/06/25 Javascript
Vue.js标签页组件使用方法详解
2019/10/19 Javascript
angular中的post请求处理示例详解
2020/06/30 Javascript
vue实现购物车列表
2020/06/30 Javascript
js+canvas实现画板功能
2020/09/13 Javascript
浅谈Django REST Framework限速
2017/12/12 Python
python爬虫实例详解
2018/06/19 Python
详解python中的Turtle函数库
2018/11/19 Python
Pytorch释放显存占用方式
2020/01/13 Python
在jupyter notebook中调用.ipynb文件方式
2020/04/14 Python
教你如何一步一步用Canvas写一个贪吃蛇
2018/10/22 HTML / CSS
Html5 Geolocation获取地理位置信息实例
2016/12/09 HTML / CSS
AmazeUI在模态框中嵌入表单形成模态输入框
2020/08/20 HTML / CSS
北京麒麟网信息技术有限公司网络游戏测试面试题
2013/09/28 面试题
医学生自荐信范文
2013/12/03 职场文书
工作时间上网检讨书
2014/02/03 职场文书
本科毕业生求职自荐信
2014/04/09 职场文书
2015大学生党员自我评价范文
2015/03/03 职场文书
总经理聘用协议书
2015/09/21 职场文书
《当代神农氏》教学反思
2016/02/23 职场文书
go使用Gin框架利用阿里云实现短信验证码功能
2021/08/04 Golang
一文搞懂Python Sklearn库使用
2021/08/23 Python