通过一张对比表来解释几个方法之间的不同
方法名 |
参数 |
被移除的元素所绑定的事件及数据是否也被移除 |
元素自身是否被移除 |
empty |
无 |
是 |
否 |
remove |
选择器表达式,比如 remove(“.class”); remove(“#id”); remove(“tag”): |
是 |
是(无参数时),有参数时要根据参数所涉及的范围。 |
detach |
参数同remove |
否 |
情况同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 $p2=$("#p2"); $p2.data("value", 1); $("#detach").on("click", function() { $p2.detach(); }); $("#back").on("click", function() { $("#p1").append($p2); console.log($("#p2").data("value")); }); }); </script> </head> <body> <p id="p1"> <p id="p2"> p2 </p> <p id="p3"> p3 </p> </p> <input value="detach" id="detach" type="button" /> <input value="back" id="back" type="button" /> </body> </html>
直接运行结果如下:
点击detach运行结果如下:
点击back运行结果如图:
如果将detach改为remove,那么点击back之后,控制台显示为undefined。
以上是jQuery解读之empty、remove、detach区别的详细内容。更多信息请关注PHP中文网其他相关文章!