jQuery 实现动态操作 DOM：打造带添加与删除功能的待办事项列表应用

当然！下面是一个完整的 jQuery 示例，用于创建一个待办事项列表应用程序。这个应用程序包含一个文本框、一个“添加”按钮，以及每个任务的“删除”按钮。 ```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.0.min.js"></script> <style> body { font-family: Arial, sans-serif; } .task { margin-bottom: 10px; } .delete-btn { margin-left: 10px; cursor: pointer; } </style> </head> <body> <h1>待办事项列表</h1> <input type="text" id="taskInput" placeholder="输入新任务"> <button id="addbtn">添加</button> <ul id="taskList"></ul> <script> $(document).ready(function() { $("#addbtn").click(function() { var taskText = $("#taskInput").val().trim(); if (taskText !== "") { var taskItem = $("<li>").addClass("task").text(taskText); var deleteBtn = $("<span>").addClass("delete-btn").text("删除"); deleteBtn.click(function() { $(this).parent().remove(); }); taskItem.append(deleteBtn); $("#taskList").append(taskItem); $("#taskInput").val(""); } else { alert("请输入任务内容"); } }); // 为动态生成的删除按钮绑定事件 $(document).on("click", ".delete-btn", function() { $(this).parent().remove(); }); }); </script> </body> </html> ``` 解释 1. HTML 结构: - 一个 `input` 文本框用于输入任务。 - 一个 `button` 按钮用于添加任务。 - 一个 `ul` 列表用于显示任务。 2. CSS 样式: - 基本的样式设置，使页面看起来更整洁。 3. jQuery 逻辑: - 使用 `$(document).ready` 确保 DOM 完全加载后再执行脚本。 - 当点击“添加”按钮时，获取文本框中的值，并检查是否为空。 - 如果不为空，创建一个新的 `li` 元素，并为其添加任务文本和“删除”按钮。 - 将“删除”按钮的点击事件绑定到删除对应任务的功能。 - 将新的任务项添加到 `ul` 列表中，并清空文本框。 - 使用 `$(document).on` 方法为动态生成的删除按钮绑定事件，确保即使在页面加载后添加的新按钮也能正常工作。这样，你就可以创建一个简单的待办事项列表应用程序了。用户可以输入任务并点击“添加”按钮将其添加到列表中，同时每个任务都有一个“删除”按钮，点击后可以删除对应的任务。 ######[AI写代码神器 | 687点数解答 | 2024-10-29 09:25:06]

服务商

更多选项

快捷项

自定义