jQuery 打造实用待办事项列表：输入添加、点击删除一步到位！

要使用 jQuery 创建一个简单的待办事项列表应用程序，你可以按照以下步骤进行： 1. HTML 结构：创建基本的 HTML 结构，包括文本框、按钮和显示任务的列表。 2. CSS 样式：简单地美化一下界面。 3. jQuery 逻辑：编写 jQuery 代码来处理添加和删除任务的功能。 HTML 结构 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>待办事项列表</title> <link rel="stylesheet" href="styles.css"> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <div class="container"> <h1>待办事项列表</h1> <div class="input-group"> <input type="text" id="taskInput" placeholder="输入新的任务"> <button id="addTask">添加</button> </div> <ul id="taskList"></ul> </div> <script src="script.js"></script> </body> </html> ``` CSS 样式 ```css /* styles.css */ body { font-family: Arial, sans-serif; background-color: #f4f4f4; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .container { background: white; padding: 20px; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); width: 300px; } h1 { text-align: center; } .input-group { display: flex; justify-content: space-between; margin-bottom: 20px; } #taskInput { flex: 1; padding: 10px; border: 1px solid #ccc; border-radius: 3px; margin-right: 10px; } #addTask { padding: 10px 20px; border: none; background-color: #28a745; color: white; border-radius: 3px; cursor: pointer; } #addTask:hover { background-color: #218838; } #taskList { list-style-type: none; padding: 0; } .task-item { display: flex; justify-content: space-between; align-items: center; padding: 10px; border-bottom: 1px solid #ddd; } .task-item:last-child { border-bottom: none; } .delete-btn { background-color: #dc3545; color: white; border: none; padding: 5px 10px; border-radius: 3px; cursor: pointer; } .delete-btn:hover { background-color: #c82333; } ``` jQuery 逻辑 ```javascript // script.js $(document).ready(function() { // 添加任务 $('#addTask').click(function() { var taskText = $('#taskInput').val().trim(); if (taskText !== '') { addTask(taskText); $('#taskInput').val(''); } }); // 按下回车键添加任务 $('#taskInput').keypress(function(e) { if (e.which === 13) { // 回车键的键码是 13 $('#addTask').click(); } }); // 删除任务 $(document).on('click', '.delete-btn', function() { $(this).closest('.task-item').remove(); }); function addTask(taskText) { var taskItem = $('<li class="task-item"></li>'); taskItem.append('<span>' + taskText + '</span>'); taskItem.append('<button class="delete-btn">删除</button>'); $('#taskList').append(taskItem); } }); ``` 解释 1. HTML 结构： - `input` 用于输入新的任务。 - `button` 用于添加任务。 - `ul` 用于显示任务列表。 2. CSS 样式： - 基本的样式使页面看起来更美观。 3. jQuery 逻辑： - `$('#addTask').click`：当点击“添加”按钮时，获取输入框中的文本并调用 `addTask` 函数。 - `$('#taskInput').keypress`：当在输入框中按下回车键时，触发“添加”按钮的点击事件。 - `$(document).on('click', '.delete-btn'`：为每个“删除”按钮绑定点击事件，删除对应的任务项。 - `addTask` 函数：创建一个新的任务项并添加到任务列表中。这样，你就有了一个简单的待办事项列表应用程序。用户可以输入任务并将其添加到列表中，也可以通过点击“删除”按钮来删除任务。 ######[AI写代码神器 | 1139点数解答 | 2024-10-29 08:44:48]

服务商

更多选项

快捷项

自定义