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

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

</head>

<body>

    <div id="box1">box1</div>

    <button id="btn1">btn1</button>

    <div id="box2">box2</div>

    <button id="btn2">btn2</button>

    <script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.3.min.js"></script>

    <script>

        $('#box1').click(function() {

            console.log('box1')

        })

        $('#box2').click(function() {

            console.log('box2')

        })

        $('#box1').data('key1', 'value1')

        $('#box2').data('key2', 'value2')

        var $box1

        var $box2

        $('#btn1').click(function() {

            console.log($('#box1').data('key1'))

            if ($box1) {

                $('#btn1').before($box1)

                $box1 = null

            } else {

                $box1 = $('#box1').detach()

            }

        })

        $('#btn2').click(function() {

            console.log($('#box2').data('key2'))

            if ($box2) {

                $('#btn2').before($box2)

                $box2 = null

            } else {

                $box2 = $('#box2').remove()

            }

        })

    </script>

</body>

</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. Java基础知识强化13：Java中单例模式案例使用（懒汉式）

    1.古往今来历史上皇帝通常只有一人.为了保证其唯一性,古人采用增加"防伪标识"的办法,如玉玺.更为简单的办法就是限制皇帝的创建.本案例中就是使用单例模式从而保证皇帝的唯一性.实例运 ...

  2. Visual Studio中Js使用智能感知

    使用了第三方的JS库或框架,在VS中编写JS代码,发现真是个悲剧,完全只能手打,智能感知没了,这不符合VS的一贯做风只要在写代码的JS文件加上以下代码,就可以有智能感知了 ///<referen ...

  3. c# 操作.config中AppSettings配置节

    ConfigurationSettings.AppSettings[key].ToString(); 这种方式很眼熟吧? 不过这种方式基本过时了,虽然还能用. 微软建议采用ConfigurationM ...

  4. 枚举，Enum，常规使用demo记录

    using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Mv ...

  5. linq学习笔记：将List<T> 转换为 Dictionary<T Key,T Value>

    运用Linq,将List<T> 转换为 Dictionary<T Key,T Value> 即:List<T>  ToDictionary<T Key,T V ...

  6. C#获取类中所有方法

    var t = typeof(HomeController); //获取所有方法 System.Reflection.MethodInfo[] methods = t.GetMethods(); // ...

  7. 解决js浮点数计算bug

    1.加 function add(a, b) { var c, d, e; try { c = a.toString().split(".")[1].length; } catch ...

  8. Java中实现对象的比较：Comparable接口和Comparator接口

    在实际应用中,我们往往有需要比较两个自定义对象大小的地方.而这些自定义对象的比较,就不像简单的整型数据那么简单,它们往往包含有许多的属性,我们一般都是根据这些属性对自定义对象进行比较的.所以Java中 ...

  9. 怎么去掉iframe的滚动条？

    <iframe name="123" src="YNJD/ynjd.htm" frameborder="0" width=" ...

  10. spring Mvc json返回json的日期格式问题

    (一)输出json数据 springmvc中使用jackson-mapper-asl即可进行json输出,在配置上有几点: 1.使用mvc:annotation-driven 2.在依赖管理中添加ja ...