📅 最后修改于: 2023-12-03 14:51:57.979000 🧑 作者: Mango
在本文中，我们将学习如何使用 jQuery 创建待办事项列表。jQuery 是一种流行的 JavaScript 库，它简化了 JavaScript 编程，并提供了许多可重用的代码。我们将使用 jQuery 创建一个简单的待办事项列表，其中用户可以添加和删除条目。
首先，我们需要创建一个 HTML 页面，该页面包含待办事项列表的基本布局。以下是一个示例 HTML 代码：
<!DOCTYPE html>
<html>
<head>
<title>待办事项列表</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<h1>我的待办事项列表</h1>
<form>
<input type="text" id="new-item" placeholder="添加新事项">
<button type="button" id="add-btn">添加</button>
</form>
<ul id="todo-list">
<!-- 待办事项将在这里显示 -->
</ul>
<script src="app.js"></script>
</body>
</html>
在此 HTML 代码中，我们创建一个表单用于添加新的待办事项。表单包括一个文本输入框和一个“添加”按钮。我们还创建了一个用于显示待办事项的无序列表。
注意，我们在
元素中包含了 jQuery 库。这是为了在后续步骤中使用 jQuery。接下来，我们需要编写一些 JavaScript 代码来处理用户添加和删除待办事项。以下是我们将使用的 JavaScript 代码：
$(document).ready(function() {
// 当点击“添加”按钮时，添加新的待办事项
$("#add-btn").click(function() {
var newItem = $("#new-item").val();
if (newItem !== "") {
$("#todo-list").append("<li>" + newItem + " <button class='delete-btn'>删除</button></li>");
$("#new-item").val("");
}
});
// 当点击“删除”按钮时，删除相应的待办事项
$("#todo-list").on("click", ".delete-btn", function() {
$(this).parent().remove();
});
});
在此 JavaScript 代码中，我们使用 jQuery 选择器选择了“添加”按钮和文本输入框。当用户点击“添加”按钮时，我们从输入框中获取新事项的文本。如果文本不为空，我们使用 jQuery 的.append()方法将新事项添加到待办事项列表中。我们还重置了文本输入框。
当用户点击列表中的“删除”按钮时，我们使用 jQuery 的.remove()方法删除相应的待办事项。
现在我们可以测试我们的应用程序了。在浏览器中打开 HTML 文件，并尝试添加和删除一些待办事项。如果一切正常，您应该可以看到待办事项列表在添加和删除事项时正确更新。
在本文中，我们介绍了如何使用 jQuery 创建待办事项列表。我们编写了 HTML 代码和 JavaScript 代码，并演示了如何使用 jQuery 选择器和方法来处理用户添加和删除待办事项。现在，您可以根据自己的需求定制此应用程序，如添加其他功能或更改样式。