jQuery删除与清空节点操作详解

"这篇资料是关于使用jQuery进行节点删除操作的课件，主要讲解了`remove()`和`empty()`两个方法。" 在jQuery中，删除DOM节点是非常常见的操作，本课件重点介绍了两种方法：`remove()`和`empty()`。 1. `remove()`方法： `remove()`用于从DOM树中彻底删除选择的元素。在案例中，当点击按钮`#btnRemove`时，所有`id`为`ulSite`的`ul`下的具有`testitem`样式的`li`元素会被移除。值得注意的是，`remove()`方法返回的是被删除的元素集合，这意味着你可以进一步处理这些元素，例如将它们添加到其他地方。例如： ```javascript var lis = $("#ulSite li").remove(); $("#ulSite2").append(lis); ``` 这段代码首先移除了`ulSite`下所有的`li`元素，然后将它们添加到了`ulSite2`下。此外，它还展示了如何从下拉列表`#select1`中移除选定选项，并将它们添加到`#select2`。 2. `empty()`方法： 相比于`remove()`，`empty()`方法不是删除元素本身，而是清空元素内部的所有内容，即移除其`innerHTML`。这意味着元素自身仍保留在DOM树中，只是不再包含任何子元素。例如，如果要实现一个选择球队的功能，可以监听表格行的点击事件，当点击某行时，将其从`#tableToSelect`移除并添加到`#tableSelected`： ```javascript $(function() { $("#tableToSelect tr").css("cursor", "pointer") .mouseover(function() { $(this).css("background", "red"); $(this).siblings().css("background", "white"); }) .click(function() { $(this).remove(); $("#tableSelected").append($(this)); }); }); ``` 在这个例子中，用户可以通过鼠标选择球队，被选中的球队行将从待选择的球队列表中移除，并添加到已选择的球队列表中。 jQuery是JavaScript的一个库，它通过提供简洁的API来简化DOM操作，包括选择元素、事件处理、动画效果以及AJAX交互等。jQuery的流行在于它的跨浏览器兼容性、丰富的插件生态系统以及高效性能。在Visual Studio中，jQuery的自动完成功能使得开发者编写代码更加便捷。 `remove()`和`empty()`是jQuery中处理DOM节点删除或清空的两个重要方法，它们提供了灵活的方式来进行页面动态更新和内容管理。掌握这些基本操作，可以帮助开发者更高效地构建动态交互的Web应用。