📌  相关文章
📜  如何使用 jQuery 创建待办事项列表？(1)

📅  最后修改于: 2023-12-03 15:23:54.985000             🧑  作者: Mango

使用 jQuery 创建待办事项列表

如何使用 jQuery 创建待办事项列表？在这篇文章中，我们将介绍如何使用 jQuery 和一些基本的 HTML 和 CSS 样式来创建一个简洁的待办事项列表应用程序。

步骤
第 1 步：创建 HTML 基础结构

首先，我们需要创建一个基本的 HTML 结构来支持待办事项列表应用程序的所有元素。

<!DOCTYPE html>
<html>
  <head>
    <title>待办事项列表</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <h1>待办事项</h1>
      <form>
        <input type="text" id="new-item-text" />
        <button id="add-item-button">添加</button>
      </form>
      <ul id="item-list"></ul>
    </div>
    <script src="jquery.min.js"></script>
    <script src="script.js"></script>
  </body>
</html>

在上面的代码片段中，我们创建了一个包含所有元素的基本结构，包括一个标题 <h1>、一个表单 <form> 用于添加新的待办事项，一个文本输入框 <input>、一个添加按钮 <button>、以及一个无序列表 <ul> 用于显示所有待办事项。

第 2 步：编写 CSS 样式

接下来，我们需要编写一些基本的 CSS 样式来使我们的应用程序看起来更好。

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  background-color: #f5f5f5;
}

.container {
  max-width: 600px;
  margin: 0 auto;
  padding: 40px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
  margin-top: 0;
}

form {
  display: flex;
  margin-bottom: 20px;
}

input[type="text"] {
  flex: 1;
  padding: 10px;
  margin-right: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

button {
  padding: 10px;
  background-color: #007bff;
  color: #fff;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #0069d9;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

在上面的代码片段中，我们定义了所有需要的 CSS 样式，包括页面背景颜色、容器大小、标题、表单元素和列表元素。它们将使我们的应用程序看起来更棒。

第 3 步：编写 JavaScript 代码

好了，现在我们准备好编写一些 jQuery 代码来添加新的待办事项和删除现有的待办事项了。

$(document).ready(function () {
  // 当添加按钮被点击时
  $(document).on("click", "#add-item-button", function (e) {
    e.preventDefault();

    // 获取输入的文本
    var newItemText = $("#new-item-text").val();

    // 如果没有输入文本，则退出函数
    if (newItemText == "") {
      return;
    }

    // 创建新的列表项
    var newItem = $(
      '<li><input type="checkbox"><span>' +
        newItemText +
        '</span><button class="delete-item-button">删除</button></li>'
    );

    // 将新列表项添加到列表中
    $("#item-list").append(newItem);

    // 清除输入文本框
    $("#new-item-text").val("");
  });

  // 当删除按钮被点击时
  $(document).on("click", ".delete-item-button", function (e) {
    e.preventDefault();

    // 从 DOM 中删除列表项
    $(this).parent().remove();
  });
});

在上面的代码片段中，我们定义了两个事件处理程序，一个用于添加新的待办事项，另一个用于删除现有的待办事项。当添加按钮被点击时，我们获取输入文本，创建新的列表项，并将其添加到列表中。在删除按钮被点击时，我们找到相应的列表项并将其从 DOM 中删除。

总结

在本文中，我们介绍了如何使用 jQuery 和一些基本的 HTML 和 CSS 样式来创建一个简洁的待办事项列表应用程序。我们从创建基本的 HTML 结构开始，然后添加了一些基本的 CSS 样式，最终编写了一些 jQuery 代码来完成添加和删除列表项的操作。