在前端开发的舞台上，DOM（文档对象模型）是我们与网页内容互动的关键。而JQuery作为一个轻量级的JavaScript库，为我们提供了便捷而强大的DOM操作工具。在本篇博客中，我们将深入探讨JQuery的DOM内容操作，揭开这段神奇的前端魔法。
JQuery的魅力
首先，让我们回顾一下JQuery的魅力。JQuery以其简洁、高效的语法，成为前端开发者的得力工具。它简化了许多繁琐的操作，让我们可以更专注于实现功能而不是纠结于代码的细枝末节。
轻松引入JQuery
在使用JQuery之前，我们需要引入JQuery库。可以通过在HTML文件中添加以下代码来获取JQuery：
<!-- 引入JQuery -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
现在，我们已经为页面引入了JQuery，可以开始探索DOM的奇妙世界。
DOM操作基础
在开始DOM内容操作之前，让我们先了解一下DOM的基础知识。DOM是一种将HTML文档以树形结构呈现的模型，每个HTML元素都是树中的一个节点。这种结构使得我们能够通过JavaScript（或JQuery）轻松地操作、创建、删除和替换HTML元素。
选取元素
在JQuery中，选择器是我们选取DOM元素的利器。通过选择器，我们可以准确地找到页面上的元素，并对其进行操作。选择器以$()的形式出现，括号中传入选择器字符串。
// 通过ID选择器选取元素
var myElement = $("#myId");
// 通过类选择器选取元素
var elementsWithClass = $(".myClass");
// 通过标签选择器选取元素
var allParagraphs = $("p");
操作元素内容
DOM内容操作的核心就是对元素的内容进行增删改查。JQuery提供了丰富的方法来实现这些操作。
获取和设置元素文本内容
通过text()方法，我们可以获取或设置元素的文本内容。
// 获取元素文本内容
var textContent = $("#myElement").text();
// 设置元素文本内容
$("#myElement").text("新的文本内容");
获取和设置元素HTML内容
通过html()方法，我们可以获取或设置元素的HTML内容，这允许我们插入HTML标记。
// 获取元素HTML内容
var htmlContent = $("#myElement").html();
// 设置元素HTML内容
$("#myElement").html("<p>新的HTML内容</p>");
追加和插入内容
通过append()和prepend()方法，我们可以在元素内部的末尾或开头追加内容。
// 在元素末尾追加内容
$("#myElement").append("<p>追加的内容</p>");
// 在元素开头插入内容
$("#myElement").prepend("<p>插入的内容</p>");
删除元素内容
通过empty()方法，我们可以清空元素的内容。
// 清空元素内容
$("#myElement").empty();
示例：创建一个待办事项列表
让我们通过一个实际的示例来演示JQuery DOM内容操作的强大之处。假设我们要创建一个简单的待办事项列表，用户可以通过表单添加新的待办事项，同时可以删除已完成的事项。
<!-- HTML代码示例：待办事项列表 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>待办事项列表</title>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>
<h2>待办事项列表</h2>
<form id="todoForm">
<input type="text" id="newTodo" placeholder="添加新的待办事项">
<button type="button" onclick="addTodo()">添加</button>
</form>
<ul id="todoList">
<!-- 待办事项将在这里显示 -->
</ul>
<script src="app.js"></script>
</body>
</html>
现在，我们来编写JavaScript文件app.js，实现待办事项的添加和删除功能。
// JavaScript代码示例：待办事项列表的逻辑
// app.js
// 添加新的待办事项
function addTodo() {
var newTodoText = $("#newTodo").val();
if (newTodoText !== "") {
$("#todoList").append("<li>" + newTodoText + " <button οnclick='removeTodo(this)'>删除</button></li>");
$("#newTodo").val(""); // 清空输入框
}
}
// 删除已完成的待办事项
function removeTodo(button) {
$(button).parent().remove();
}
这段代码通过JQuery实现了一个简单的待办事项列表。用户可以在输入框中输入新的待办事项，点击"添加"按钮后，新的事项会被追加到列表中。每个事项后面都有一个"删除"按钮，点击它可以删除相应的事项。这个示例展示了JQuery DOM操作的简便性和灵活性，使得前端开发变得更加轻松有趣。
结语
通过本篇博客，我们深入探讨了JQuery的DOM内容操作，了解了如何通过JQuery轻松驾驭网页内容的魔法。DOM操作是前端开发中的核心技能之一，它使得我们能够通过JavaScript（或JQuery）对页面进行精准、灵活的控制。通过实际示例，我们看到了DOM操作在创建交互性强、用户体验良好的网页中的实际应用。
无论是初学者还是有一定经验的开发者，都可以通过学习和实践DOM操作，逐渐掌握前端开发的精髓。JQuery作为一个优秀的工具，为我们提供了更高效的DOM操作方式，使得前端开发更加愉快。让我们继续探索前端的奇妙世界，创造出更出色的用户体验！
| 作者信息 作者 ： 繁依Fanyi CSDN： https://techfanyi.blog.csdn.net 掘金：https://juejin.cn/user/4154386571867191 |
