博客

如何使用jQuery创建待办事项列表

  • Post category:jquery

创建待办事项列表是常见的Web开发需求，jQuery为此提供了很好的支持，下面是如何使用jQuery创建待办事项列表的完整攻略。

步骤一：创建HTML结构

首先，需要在HTML文档中创建一个待办事项容器，可以使用 div 元素来实现。

<div id="todo-container">
    <h1>待办事项列表</h1>
    <ul id="todo-list">
        <!-- 待办事项会被添加到这里 -->
    </ul>
    <input type="text" id="todo-input" />
    <button id="add-button">添加</button>
</div>

在上述结构中，#todo-container是待办事项容器，#todo-list是待办事项列表，#todo-input是文本输入框，#add-button是添加按钮。

步骤二：添加样式

为待办事项容器添加样式，使其看起来更美观。

#todo-container {
  margin: 20px auto;
  width: 400px;
  border: 1px solid #ddd;
  padding: 10px;
  font-family: 'Helvetica Neue', sans-serif;
  text-align: center;
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
}
#todo-container h1 {
  margin-top: 0px;
}
#todo-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: left;
}
#todo-list li {
  background: #fafafa;
  margin: 5px 0;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
#todo-input {
  width: 200px;
  font-size: 16px;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 5px;
  margin-right: 5px;
}
#add-button {
  font-size: 16px;
  padding: 8px 12px;
  border: none;
  background: #4CAF50;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
}

步骤三：使用jQuery添加待办事项

使用 jQuery 代码，可以方便地向待办事项列表中添加新的待办事项。

$(document).ready(function() {
    // 添加待办事项
    $('#add-button').click(function() {
        var todoText = $('#todo-input').val();
        if (todoText) {
            $('#todo-list').append('<li>' + todoText + '</li>');
            $('#todo-input').val('');
        }
    });
});

上述代码创建了一个点击事件处理程序，当用户单击“添加”按钮时，将获取输入框中的文本，并将其添加到待办事项列表中。

步骤四：完整代码示例

在这里是完整的使用jQuery创建待办事项列表的示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>待办事项列表</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    #todo-container {
      margin: 20px auto;
      width: 400px;
      border: 1px solid #ddd;
      padding: 10px;
      font-family: 'Helvetica Neue', sans-serif;
      text-align: center;
      box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
    }
    #todo-container h1 {
      margin-top: 0px;
    }
    #todo-list {
      list-style-type: none;
      margin: 0;
      padding: 0;
      text-align: left;
    }
    #todo-list li {
      background: #fafafa;
      margin: 5px 0;
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 5px;
    }
    #todo-input {
      width: 200px;
      font-size: 16px;
      padding: 8px;
      border: 1px solid #ddd;
      border-radius: 5px;
      margin-right: 5px;
    }
    #add-button {
      font-size: 16px;
      padding: 8px 12px;
      border: none;
      background: #4CAF50;
      color: #fff;
      border-radius: 5px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="todo-container">
    <h1>待办事项列表</h1>
    <ul id="todo-list">
      <!-- 待办事项会被添加到这里 -->
    </ul>
    <input type="text" id="todo-input" />
    <button id="add-button">添加</button>
  </div>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function() {
        // 添加待办事项
        $('#add-button').click(function() {
            var todoText = $('#todo-input').val();
            if (todoText) {
                $('#todo-list').append('<li>' + todoText + '</li>');
                $('#todo-input').val('');
            }
        });
    });
  </script>
</body>
</html>

示例1：

用户在输入框中输入文字“学习jQuery”，然后单击“添加”按钮，待办事项列表将添加一个新的待办事项，显示“学习jQuery”。

示例2：

用户在输入框中输入了一个空字符串，然后单击“添加”按钮，待办事项列表不会添加新的待办事项，因为输入文本为空。

Tags: