📌  相关文章
📜  jQuery | empty() 与示例(1)

📅  最后修改于: 2023-12-03 14:43:15.047000             🧑  作者: Mango

jQuery | empty() 函数介绍及示例

介绍

empty() 是 jQuery 中的一个函数，用于清空匹配元素的内容。它会移除元素内部的所有子节点，包括文本和元素节点。

语法
$(selector).empty()
示例代码

下面是一个示例代码，展示了如何使用 empty() 函数清空一个包含多个子元素的父元素。

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div id="parent">
    <p>这是一个段落</p>
    <ul>
      <li>列表项 1</li>
      <li>列表项 2</li>
      <li>列表项 3</li>
    </ul>
    <span>这是一个内联元素</span>
  </div>

  <script>
    $(document).ready(function(){
      $("#parent").empty();
    });
  </script>
</body>
</html>
解释

在上面的示例代码中，我们首先引入了 jQuery 库，然后创建了一个包含多个子元素的父元素，其 id 为 "parent"。接下来，我们在 JavaScript 代码中使用 empty() 函数来清空该父元素的内容。

$(document).ready() 是 jQuery 的一个事件处理函数，用于在文档加载完成后执行指定的代码。在该函数内部，我们使用了选择器 $("#parent") 来选中 id 为 "parent" 的元素，并调用 empty() 函数来清空其内容。

效果

运行上述示例代码后，父元素的内容将被清空，结果如下：

<div id="parent"></div>

注意：父元素仍然存在，只是其内部不再包含任何子节点。

总结

empty() 函数是一个非常有用的 jQuery 函数，可以用于清空一个元素的内容。它可以帮助程序员简化操作，并提高开发效率。在项目开发中，若需要清空某个元素的内容，可以考虑使用 empty() 函数来实现。