jQuery 实现动态操作 DOM：打造可增删任务的待办事项列表应用

好的，我可以帮助你创建一个简单的待办事项列表应用程序，使用 jQuery 来动态操作 DOM 元素。以下是完整的 HTML 和 jQuery 代码： HTML ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>待办事项列表</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>待办事项列表</h1> <div id="todo-app"> <input type="text" id="todo-input" placeholder="输入任务"> <button id="add-button">添加</button> <ul id="todo-list"></ul> </div> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="script.js"></script> </body> </html> ``` CSS (styles.css) ```css body { font-family: Arial, sans-serif; margin: 20px; } #todo-app { max-width: 400px; margin: 0 auto; } #todo-input { width: 100%; padding: 10px; margin-bottom: 10px; box-sizing: border-box; } #add-button { padding: 10px 20px; background-color: #4CAF50; color: white; border: none; cursor: pointer; } #add-button:hover { background-color: #45a049; } #todo-list { list-style-type: none; padding: 0; } #todo-list li { background-color: #f9f9f9; margin-bottom: 10px; padding: 10px; border: 1px solid #ddd; position: relative; } #todo-list li button { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background-color: red; color: white; border: none; cursor: pointer; padding: 5px 10px; } #todo-list li button:hover { background-color: #d9534f; } ``` jQuery (script.js) ```javascript $(document).ready(function() { $('#add-button').click(function() { var taskText = $('#todo-input').val().trim(); if (taskText !== '') { var $listItem = $('<li></li>').text(taskText); var $deleteButton = $('<button>删除</button>'); $deleteButton.click(function() { $(this).parent().remove(); }); $listItem.append($deleteButton); $('#todo-list').append($listItem); $('#todo-input').val(''); // 清空输入框 } }); // 可选：按下回车键时添加任务 $('#todo-input').keypress(function(event) { if (event.which == 13) { // 13 是回车键的键码 $('#add-button').click(); } }); }); ``` 解释 1. HTML: 包含一个输入框、一个“添加”按钮和一个用于显示任务列表的无序列表。 2. CSS: 用于美化界面，包括输入框、按钮和任务列表的样式。 3. jQuery: - 监听“添加”按钮的点击事件，获取输入框中的值并添加到列表中。 - 为每个任务项创建一个删除按钮，并监听其点击事件以删除对应的任务项。 - 可选：监听输入框的回车键事件，按下回车键时触发“添加”按钮的点击事件。将这些代码分别保存到 `index.html`、`styles.css` 和 `script.js` 文件中，然后在浏览器中打开 `index.html` 文件即可运行该应用程序。 ######[AI写代码神器 | 1015点数解答 | 2024-10-26 23:41:22]

服务商

更多选项

快捷项

自定义