浅析 jquerydom操作方法--remove(),detach(),empty()
1. remove()，w3school标准定义：
语法：$(selector).remove()
定义：remove() 方法移除被选元素，包括所有文本和子节点。
该方法不会把匹配的元素从 jQuery 对象中删除，因而可以在将来再使用这些匹配的元素。
重点：但除了这个元素本身得以保留之外，remove() 不会保留元素的 jQuery 数据。其他的比如绑定的事件、附加的数据等都会被移除。这一点与 detach() 不同。
2.detach(),w3school标准定义：
语法：$(selector).detach()
定义：detach() 方法移除被选元素，包括所有文本和子节点。
这个方法会保留 jQuery 对象中的匹配的元素，因而可以在将来再使用这些匹配的元素。
重点：detach() 会保留所有绑定的事件、附加的数据，这一点与 remove() 不同。
3. empty(),w3school标准定义：
语法：$(selector).empty()
定义：empty() 方法从被选元素移除所有内容，包括所有文本和子节点。
4. hide(), jquery效果方法
语法：$(selector).hide(speed,callback)
实现原理： display: none;
定义：如果被选的元素已被显示，则隐藏该元素。
提示：如果元素已经是完全可见，则该效果不产生任何变化，除非规定了 callback 函数。
5. show(), jquery效果方法
语法：$(selector).hide(speed,callback)
实现原理： display: block;
定义：如果被选元素已被隐藏，则显示这些元素
提示：该效果适用于通过 jQuery 隐藏的元素，或在 CSS 中声明 display:none 的元素（但不适用于 visibility:hidden 的元素）。
特别注意一下： remove()和detach()方法
detach(),举一个栗子：
<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
var temp;
$(" .btn-remove").click(function(){
temp = $("p").detach();
});
$(".btn-add").click(function(){
$("body").append(temp);
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button class="btn-remove">Remove all p elements</button>
<button class="btn-add">add</button>
</body>
</html>
remove(),举一个栗子
<!DOCTYPE html> <html> <head> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ var temp; $(" .btn-remove").click(function(){ temp = $("p").remove(); }); $(".btn-add").click(function(){ $("body").append(temp); }); }); </script> </head> <body> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <button class="btn-remove">Remove all p elements</button> <button class="btn-add">add</button> </body> </html>
以上两段代码，执行的效果是一样的。
但是：一下代码则不一样了：
<!DOCTYPE html> <html> <head> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $(".happy").click(function(){ $(this).css('background','#abcdef'); }); var temp; $(" .btn-remove").click(function(){ temp = $("p").detach(); }); $(".btn-add").click(function(){ $("body").append(temp); }); }); </script> </head> <body> <p>This is a paragraph.</p> <p class="happy">This is another paragraph.</p> <button class="btn-remove">Remove all p elements</button> <button class="btn-add">add</button> </body> </html>
操作步骤：
1. 先移出，在添加， 再点击，绑在.happy上的方法还存在哦
<!DOCTYPE html> <html> <head> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $(".happy").click(function(){ $(this).css('background','#abcdef'); }); var temp; $(" .btn-remove").click(function(){ temp = $("p").remove(); }); $(".btn-add").click(function(){ $("body").append(temp); }); }); </script> </head> <body> <p>This is a paragraph.</p> <p class="happy">This is another paragraph.</p> <button class="btn-remove">Remove all p elements</button> <button class="btn-add">add</button> </body> </html>
操作步骤：
1 先删除，再添加，再点击，.happy的背景色根本就不会改变。因为用了remove（）,他已经将你删除的节点上的绑定事件等删除了。
那么什么时候，detach()这个方法会为我们带来好处呢？
我这里有一个表单，其中有一项是 注册码，就是每个信息都会有一个独立的注册码，没有注册码是不能注册成功的。我用的是jquery的控件 formValidator来进行验证的，这个控件大家都用过，他是在页面加载的时候，就开始验证了，而且对于css中的display和jquery里 的hide()方法，它是无视的。本来呢。这是没有问题，可是用户却提出了一个新的需求，就是加一个选项，用来判断是否显示这个注册码，如果不显示，那么 就不要对注册码文本框进行验证，无耻的需求。
在试用了css的display和jquery的hide()之后，我把目光放到了remove()中。它到是不验证了，可是我选择要验证的时候，被移除的内容加不回来了，所以我开始找能回来了的。这时候，发现了detach()。它的有什么好处呢。我下面放一代码出来
var p; function selectChange() { if (document.getElementById("ddl_schoolarea").value != "请选择") { p = $("#trlession").detach(); } else { //table1为一个table名字 $("#table1").append(p); } }
ok!!
