Jquery empty() remove() detach() 方法的区别(2)_H5之家 - 中国HTML5教程资源分享第一站

[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test Jquery remove detach empty</title>
<style>
p {
    background:yellow;
    margin:6px 0;
}
p.off {
    background: black;
}
</style>
<script src="js/jquery-1.8.0.min.js"></script>
<script>
    $(document).ready(function(){

        // JQuery 为P标签动态绑定click事件
        $("p").click(function(){
            $(this).toggleClass("off");
        });

        var p;
        $("#button").click(function(){
              if ( p ) {
                p.appendTo("body");
                p = null;
              } else {
                p = $("p").detach();
            // p = $("p").remove();
            // p = $("p").empty();
              }
        });
    });
</script>
</head>

<body>
<p id="A">Hello <span>subNode</span></p>
how are
<p id="B">you? <span>subNode</span></p>

<input type="button" id="button" value="Attach/detach paragraphs" />

</body>
</html>
运行该页面，点击按钮，删除；再次点击按钮，删除的<p>标签，重新加入到body的底部，这里我们重点验证的是，重新加入后的绑定事件click是否有效【这里的click事件为，点击P标签，class在黄色和黑色之间切换】。

1) 验证detach方法

可以看到执行detach方法，重新添加之后，JQuery动态绑定的click事件，toggleClass生效，说明之前删除的时候没有把动态绑定的事件删除。

2) 验证remove方法
修改程序中以下部分：

[javascript]
// p = $("p").detach();
p = $("p").remove();
测试remove函数，同样是先删除在加入，执行完后的效果：

可以发现调用remove方法之后，再重新把删除的标签加入到body后时，发现JQuery动态绑定的事件，已经失效，点击P标签，class不能切换。说明在执行remove的时候，已经把JQuery动态绑定的事件删除了。

3) 验证empty方法：
要验证empty方法，要麻烦一点，在删除之后，重新加入之后，text为空，不能够点击测试click事件，因此我们需要新增一个按钮，为这种情况增加text，便于测试click事件。

代码如下：

[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test Jquery remove detach empty</title>
<style>
p {
    background:yellow;
    margin:6px 0;
}
p.off {
    background: black;
}
</style>
<script src="js/jquery-1.8.0.min.js"></script>
<script>
    $(document).ready(function(){

        // JQuery 为P标签动态绑定click事件
        $("p").click(function(){
            $(this).toggleClass("off");
        });

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

        // 为删除之后重新加入的p标签加入text
        $("#buttonA").click(function(){
            $("#A").text("Hello");
            $("#B").text("you?");
        });
    });
</script>
</head>

<body>
<p id="A">Hello <span>subNode</span></p>
how are
<p id="B">you? <span>subNode</span></p>

<input type="button" id="button" value="Attach/detach paragraphs" /> <br/>
<input type="button" id="buttonA" value="addTextA" /> <br/>

</body>
</html>
执行效果如图：

可以发现empty方法，没有删除动态绑定事件。

4) 补充讲解：
为了更好的理解这里所说的绑定事件是JQuery的动态绑定事件，我们修改一下程序，使用onclick属性，把click事件作为一个属性值，来静态绑定。

修改后的程序如下：