jQuery 是一种广泛使用的 JavaScript 类库，它能够简化针对 DOM 操作和事件处理等任务的编写。几乎每个 Web 开发者都或多或少地熟悉 jQuery，并且喜欢使用它来创建交互式网页。
动态 DOM 操作是一项非常强大的技术，它可以通过 JavaScript 和 jQuery 在运行时修改 HTML 页面的内容。在这篇文章中，我们将了解如何使用 jQuery 来动态地操作 DOM。
首先，我们需要在 HTML 文档中包含 jQuery 库。最常用的方式是从一个 CDN（内容分发网络）中加载该库，如下所示：
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>接下来，我们可以开始使用 jQuery 来动态更新页面。DOM 结构包括树形结构中的各种元素，例如段落、div、表格、列表，以及按钮和图片等。我们可以使用以下几种方法修改DOM 树中的元素：
要创建新的 HTML 元素，可以使用以下代码：
$(document).ready(function(){
var newElement = $("<p>New paragraph</p>");
$("body").append(newElement);
});我们可以使用 $() 函数来对 HTML 元素进行选择，然后使用 .append() 方法将新的元素添加到指定元素的末尾部分。在上面的示例中，我们创建一个 <p> 元素，并将其添加到主体元素末尾。
我们也可以在已有元素前或后添加一个新的元素。例如，如果要向 ID 为“myId”的 div 元素之前添加一个新的段落，我们可以使用以下代码：
$(document).ready(function(){
var newElement = $("<p>New paragraph</p>");
$("#myId").before(newElement);
});为了修改现有 HTML 元素的属性或内容，我们首先需要选择它。下面是一个例子：
$(document).ready(function(){
$("p").text("New text");
});该代码将选择所有的 <p> 元素，在其中设置文本内容为“New text”。同样地，我们可以选择所有的 <ul> 元素并通过 .css() 函数来修改它们的 CSS 样式：
$(document).ready(function(){
$("ul").css("background-color", "gray");
});在上面的代码中，我们选择所有的 <ul> 元素，并修改它们的背景颜色属性。
我们也可以使用 jQuery 来删除 HTML 元素。下面的代码将从文档中删除 ID 为“myId”的元素。
$(document).ready(function(){
$("#myId").remove();
});remove() 方法将从 DOM 树中完全删除元素，而 detach() 方法则仅从 DOM 树中移除元素（保留附加数据和事件状态），但还可以恢复插入点。
使用 jQuery 可以轻松操作 DOM 的内容和样式，还可以为页面中的各种元素添加事件处理程序。下面是一个例子：
$(document).ready(function(){
$("button").click(function(){
alert("Hello world!");
});
});在上方的代码当中，我们选择了所有 <button> 元素，并在点击事件发生时向用户显示一个弹出窗口, 显示“Hello world!”文本.
本文介绍了如何使用 jQuery来动态地修改 HTML 页面 – 创建新的元素、修改现有元素、删除元素和处理事件。jQuery中拥有很多构建DOM树，操作元素和事件监听等函数并且这里仅仅列出了一些例子。jQuery还支持AJAX操作请求数据加载等特性。熟悉jQuery 将会让您快速编写功能强大的 web 应用程序，并且可以帮助节省大量的时间和代码。但请记得，使用 jQuery 进行 DOM 操作时，也要遵守最佳实践，以确保代码安全和效率。