文档

jQuery 动态 Todo 列表

目标

用 jQuery 实现经典 Todo 列表：添加/删除/标记完成，展示 jQuery 的 DOM 操作和事件处理能力。

完整代码

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>jQuery Todo</title>
  <style>
    body { font-family: system-ui; max-width: 500px; margin: 50px auto; background: #f0f4f8; }
    h1 { text-align: center; }
    .todo-form { display: flex; gap: 8px; margin-bottom: 20px; }
    .todo-form input { flex: 1; padding: 10px; border: 1px solid #ddd; border-radius: 6px; font-size: 16px; }
    .todo-form button { padding: 10px 20px; background: #3b82f6; color: white; border: none; border-radius: 6px; cursor: pointer; }
    .todo-list { list-style: none; padding: 0; }
    .todo-item { display: flex; align-items: center; gap: 10px; padding: 12px; background: white; border-radius: 8px; margin-bottom: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
    .todo-item.completed .todo-text { text-decoration: line-through; color: #999; }
    .todo-text { flex: 1; cursor: pointer; }
    .todo-delete { background: #ef4444; color: white; border: none; padding: 4px 10px; border-radius: 4px; cursor: pointer; }
    .stats { text-align: center; color: #666; margin-top: 10px; }
  </style>
</head>
<body>
  <h1>✅ jQuery Todo</h1>
  <div class="todo-form">
    <input type="text" id="todoInput" placeholder="输入待办事项...">
    <button id="addBtn">添加</button>
  </div>
  <ul class="todo-list" id="todoList"></ul>
  <div class="stats">
    共 <span id="totalCount">0</span> 项，
    已完成 <span id="doneCount">0</span> 项
  </div>

  <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
  <script>
    $(function() {
      let todos = [
        { id: 1, text: '完成毕设开题报告', done: false },
        { id: 2, text: '阅读参考文献', done: true },
      ];
      let nextId = 3;

      function render() {
        const $list = $('#todoList').empty();
        todos.forEach(t => {
          const $item = $(`
            <li class="todo-item ${t.done ? 'completed' : ''}" data-id="${t.id}">
              <span class="todo-text">${t.text}</span>
              <button class="todo-delete">删除</button>
            </li>
          `);
          $list.append($item);
        });

        $('#totalCount').text(todos.length);
        $('#doneCount').text(todos.filter(t => t.done).length);
      }

      // 添加
      $('#addBtn').on('click', function() {
        const text = $('#todoInput').val().trim();
        if (!text) return alert('请输入内容');
        todos.push({ id: nextId++, text, done: false });
        $('#todoInput').val('');
        render();
      });

      // 回车添加
      $('#todoInput').on('keypress', function(e) {
        if (e.which === 13) $('#addBtn').click();
      });

      // 切换完成状态（事件委托）
      $('#todoList').on('click', '.todo-text', function() {
        const id = $(this).closest('.todo-item').data('id');
        const todo = todos.find(t => t.id === id);
        if (todo) { todo.done = !todo.done; render(); }
      });

      // 删除（事件委托）
      $('#todoList').on('click', '.todo-delete', function() {
        const id = $(this).closest('.todo-item').data('id');
        todos = todos.filter(t => t.id !== id);
        render();
      });

      // 初始渲染
      render();
    });
  </script>
</body>
</html>

运行步骤

复制代码保存为 index.html
直接在浏览器中打开（无需服务器）
或用 npx serve . 启动本地服务器

预期输出

显示 2 条预置 Todo
输入文字 → 点击添加或回车 → 新 Todo 出现
点击 Todo 文字 → 切换完成/未完成（划线效果）
点击删除 → 移除该项
底部统计自动更新

信息

路径: /tech-stacks/jquery/examples/Hello World - 动态Todo列表.md
更新时间: 2026/5/30