Jquery empty() remove() detach() 方法的区别

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title></title>
  6. </head>
  7. <body>
  8.     <div id="box1">box1</div>
  9.     <button id="btn1">btn1</button>
  10.     <div id="box2">box2</div>
  11.     <button id="btn2">btn2</button>
  12.     <script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.3.min.js"></script>
  13.     <script>
  14.         $('#box1').click(function() {
  15.             console.log('box1')
  16.         })
  17.         $('#box2').click(function() {
  18.             console.log('box2')
  19.         })
  20.         $('#box1').data('key1', 'value1')
  21.         $('#box2').data('key2', 'value2')
  22.         var $box1
  23.         var $box2
  24.         $('#btn1').click(function() {
  25.             console.log($('#box1').data('key1'))
  26.             if ($box1) {
  27.                 $('#btn1').before($box1)
  28.                 $box1 = null
  29.             } else {
  30.                 $box1 = $('#box1').detach()
  31.             }
  32.         })
  33.         $('#btn2').click(function() {
  34.             console.log($('#box2').data('key2'))
  35.             if ($box2) {
  36.                 $('#btn2').before($box2)
  37.                 $box2 = null
  38.             } else {
  39.                 $box2 = $('#box2').remove()
  40.             }
  41.         })
  42.     </script>
  43. </body>
  44. </html>

♫【jQuery】detach的更多相关文章

  1. 【jQuery】使用JQ来编写面板的淡入淡出效果

    本文与上一篇的<[jQuery]使用JQ来编写最主要的淡入淡出效果>(点击打开链接)为姊妹篇. 但上一篇仅仅是对文本的基本控制,本篇则是对面板元素进行控制. 尽管功能上很类似,可是所用到的 ...

  2. 【jQuery】复选框的全选、反选，推断哪些复选框被选中

    本文与<[JavaScript]复选框的全选.反选.推断哪些复选框被选中>(点击打开链接)为姊妹篇,把里面内容再与jQuery框架中实现一次,相同做到例如以下的效果: 布局还是相同的布局, ...

  3. js【jquery】 - DOM操作

    1.修改元素样式 js方式: var div2 = document.getElementById("") div2.style.width = '200px'; div2.cla ...

  4. 【jQuery】 实用 js

    [jQuery] 实用 js 1. int 处理 parseInt(") // int 转换 isNaN(page) // 判断是否是int类型 2. string 处理 // C# str ...

  5. 【jQuery】 Ajax

    [jQuery] Ajax $.ajax({ type: "Post", // 发包方式 cache: false, // 是否缓存 contentType: "appl ...

  6. 【jQuery】 常用函数

    [jQuery] 常用函数 html() : 获取设置元素内的 html,包含标签 text() : 获取设置元素内的文本, 不包含标签 val() : 获取设置 value 值 attr() : 获 ...

  7. 【jQuery】 资料

    [jQuery] 资料 1. 选择器 http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp 2. 事件 http://www.w3sch ...

  8. 【jQuery】 效果

    [jQuery] 效果 资料 http://www.w3school.com.cn/jquery/jquery_ref_effects.asp 1. 显示隐藏 hide(); 隐藏 show(): 显 ...

  9. 【jQuery】 选择器

    [jQuery] 选择器 资料: w3school  http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp 1. 标签选择器 : $(& ...

随机推荐

  1. jersey + tomcat 实现restful风格

    本文参考 http://www.cnblogs.com/bluesfeng/archive/2010/10/28/1863816.html 环境: idea 15.0.2 jersey 1.3 tom ...

  2. 10.18 noip模拟试题

    分火腿 (hdogs.pas/.c/.cpp) 时间限制:1s:内存限制 64MB 题目描述: 小月言要过四岁生日了,她的妈妈为她准备了n根火腿,她想将这些火腿均分给m位小朋友,所以她可能需要切火腿. ...

  3. PL/SQL 批量SQL

    批量SQL包括: FORALL语句 BULK COLLECT子句 FORALL语句 FORALL具有如下结构: FORALL loop_counter IN bounds_clause [SAVE E ...

  4. html 新元素

    html5新元素 html5语义元素 <header> 定义了文档或者文档的一部分区域的页眉 <nav> 定义了导航链接的部分 <section> 定义了文档的某个 ...

  5. bootstrap3学习1：响应式布局layout

    在去年的这个时候写过关于bootstrap的相关文章(见:bootstrap2学习1:基本CSS样式),然后就搁置了,原因是因为当时对bootstrap的了解不深,并且当时v2版本对响应式设计的不是非 ...

  6. 1.PhotoShop缩小图片的三种方式

    先声明,本人不是高前端的,若有不当或者不合理的地方,还望前端爱好者多多指教.此处只是留作个人记录备忘. PS中有三种缩小 1.视图缩小,那方法很多缩放工具.Ctrl+"-",导航器 ...

  7. System.Data.DbType的字符串和数据库中字符串类型对应关系

    前两天项目中因为历史原因数据库中的一个字段是varchar类型,在做SQL参数化处理时候默认都是DbType.String, 免得查询出现数据转换,于是做类型一致,搜了下对应关系还没找到,只好自己打开 ...

  8. 【转】 iOS KVO KVC

    原文: http://www.cocoachina.com/industry/20140224/7866.html Key Value Coding Key Value Coding是cocoa的一个 ...

  9. 十、C# 异常处理

    1.多异常类型 2.捕捉异常 3.常规catch块 4.异常处理的指导原则 5.定义自定义异常   1.多异常类型 代码要引发任何异常,只需为要引发的异常实例实例附加关键字throw作为前缀.具体选择 ...

  10. java基础易错点总结（一）

    子类继承父类表示子类比他的父类包含更多的信息和方法 子类调用重载的构造方法时会调用父类的构造方法,super();一般如果不写的话会隐式的调用,而且每次调用都在所有语句之前. 在函数中,使用父类的地方 ...