JQuery 中的待办事项列表

简介

本文将介绍如何使用 JQuery 创建一个简单的待办事项列表。通过这个例子，你将学会如何使用 JQuery 来处理 DOM 元素，并实现各种交互功能。

准备工作

在开始之前，确保你已经安装了 JQuery，并通过 <script> 标签将其引入到你的 HTML 页面中。你可以从 JQuery 官方网站下载最新版本。同时，你也需要一个用于显示待办事项的 HTML 元素，比如一个无序列表。

步骤

1. 创建 HTML 结构

首先，我们需要在 HTML 中创建一个用于显示待办事项的元素，比如一个无序列表 <ul>。可以给这个列表添加一个 ID，以便我们在 JQuery 中通过 ID 找到这个元素。

<ul id="todo-list"></ul>

2. 添加样式

为待办事项列表添加一些样式，使其更加美观。你可以使用 CSS 来设置列表的样式，比如字体、颜色、间距等。

#todo-list {
  list-style-type: none;
  padding: 0;
}

.todo-item {
  margin-bottom: 10px;
}

3. 添加待办事项

使用 JQuery 的 append() 方法向待办事项列表中添加事项。你可以通过文本输入框获取用户输入的待办事项，并在用户点击添加按钮时将其添加到列表中。

$(document).ready(function() {
  $('#add-btn').click(function() {
    var todoItem = $('#todo-input').val();
    $('#todo-list').append('<li class="todo-item">' + todoItem + '</li>');
    $('#todo-input').val('');
  });
});

4. 删除待办事项

为每个待办事项添加一个删除按钮，并为按钮添加一个点击事件，以便在用户点击按钮时将其对应的事项从列表中删除。

$(document).ready(function() {
  $('#todo-list').on('click', '.delete-btn', function() {
    $(this).parent('.todo-item').remove();
  });
});

完整代码

$(document).ready(function() {
  $('#add-btn').click(function() {
    var todoItem = $('#todo-input').val();
    $('#todo-list').append('<li class="todo-item">' + todoItem + '</li>');
    $('#todo-input').val('');
  });

  $('#todo-list').on('click', '.delete-btn', function() {
    $(this).parent('.todo-item').remove();
  });
});

结论

通过这个简单的例子，你已经学会了如何使用 JQuery 来创建一个待办事项列表，并实现添加和删除功能。你可以根据自己的需求对代码进行扩展，比如添加编辑功能或增加其他交互特性。希望这个例子对你学习 JQuery 有所帮助！