zoukankan      html  css  js  c++  java
  • PHP remove,empty和detach区别

    empty:

    把所有段落的子元素(包括文本节点)删除

    HTML 代码:
    <p>Hello, <span>Person</span> <a href="#">and person</a></p>
    jQuery 代码:
    $("p").empty();
    结果:
    <p></p>


    remove:

    从DOM中删除所有匹配的元素。

    这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外,其他的比如绑定的事件,附加的数据等都会被移除

    就是说empty保留了自身,而remove则会移除自己

    detach:

    从DOM中删除所有匹配的元素。

    这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素。与remove()不同的是,所有绑定的事件、附加的数据等都会保留下来

    下面着重就detach不移除元素绑定的事件及数据这一特性来举个例子。

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title></title>
            <script type="text/javascript" src="jquery-1.11.0.js" ></script>
            <script type="text/javascript">
                $(function() {
                    var $div2=$("#div2");
                    $div2.data("value", 1);
                    $("#detach").on("click", function() {
                        $div2.detach();
                    });
    
                    $("#back").on("click", function() {
                        $("#div1").append($div2);
                        console.log($("#div2").data("value"));
                    });
                });
            </script>
        </head>
        <body>
            <div id="div1">
                <div id="div2">
                    div2
                </div>
                <div id="div3">
                    div3
                </div>
            </div>
            <input value="detach" id="detach" type="button" />
            <input value="back" id="back" type="button" />
        </body>
    </html>

    如果将detach改为remove,那么点击back之后,控制台显示为undefined。

    注意detach的返回值,返回被detach的元素

    var p;
    $( "button" ).click(function() {
    if ( p ) {
    p.appendTo( "body" );
    p = null;
    } else {
    p = $( "p" ).detach();
    }
    });

    参考:http://blog.csdn.net/qinshenxue/article/details/23832221

  • 相关阅读:
    Docker技术入门之---Docker核心概念:镜像、容器、仓库(2)
    Docker技术入门之---Docker安装(1)
    微信小程序自定义组件
    vue项目优化--使用CDN和Gzip
    小程序分包
    VUE--- browserHistory 和 hashHistory。
    vue-生成的css文件中背景url()图片路径问题
    vue异步组件
    Vue双向绑定原理及实现
    web-view小程序转发功能,web-view和小程序之间传参
  • 原文地址:https://www.cnblogs.com/youxin/p/3885737.html
Copyright © 2011-2022 走看看