empty(),remove()和detach()的区别
empty():清空匹配的元素集合中所有的子节点,自身节点和事件都未被删除。
remove():这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外,其他的比如绑定的事件,附加的数据等都会被移除。
detach():这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素。与remove()不同的是,所有绑定的事件、附加的数据等都会保留下来。
举个栗子 :
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>empty(),remove()和detach()的区别</title> <style type="text/css"> div{ width:200px; height:200px; border:5px solid green; } </style> <script typet="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript"> $(function () { $("#first").hover(function () { $(this).text("我是hover"); }); //使用 remove() hover()事件也会被删除 // apple = $("#first").remove(); //使用detach() hover()事件会保存下来 // apple = $("#first").detach(); // 使用empty只是清空了div的内容,节点和事件都未被删除 apple = $("#first").empty(); $("body").append(apple);//将id为"first"的div插入到body中。 $("#btn").click(function(){ var a=$("div"); alert(a.length);//结果始终是2。 }) }); </script> </head> <body> <div id="first">我是第一</div> <div id="second">我是第二</div> <button id="btn">查看div的数量</button> </body> </html>