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!!