正文

学会用jQuery打造实用TodoList：从入门到实战，附源码解析

/0 浏览量
0609

引言

在Web开发中，TodoList是一个经典的项目，它可以帮助我们管理日常任务。使用jQuery来构建一个实用的TodoList不仅能够提升页面的交互性，还能加深我们对jQuery的理解。本文将带你从入门到实战，一步步打造一个功能完善的TodoList，并附上源码解析。

第一部分：jQuery基础

1.1 jQuery简介

jQuery是一个快速、小型且功能丰富的JavaScript库。它简化了HTML文档的遍历、事件处理、动画和AJAX操作。

1.2 jQuery选择器

jQuery选择器允许我们轻松地选取HTML元素。例如，$("#id")用于选取ID为id的元素，$(".class")用于选取所有具有class类的元素。

1.3 jQuery事件处理

jQuery提供了丰富的事件处理方法，如.click()、.hover()、.on()等。

第二部分：TodoList设计

2.1 功能需求

一个实用的TodoList通常需要以下功能：

  • 添加任务
  • 删除任务
  • 完成任务
  • 清空所有任务

2.2 数据结构

我们可以使用一个数组来存储任务数据，每个任务包含标题、状态等信息。

第三部分：实现TodoList

3.1 HTML结构

<div id="todo-list">
  <input type="text" id="new-task" placeholder="添加新任务">
  <button id="add-task">添加</button>
  <ul id="task-list"></ul>
</div>

3.2 CSS样式

#todo-list {
  width: 300px;
  margin: 0 auto;
}

#new-task {
  width: 200px;
  margin-bottom: 10px;
}

#task-list {
  list-style: none;
  padding: 0;
}

.task-item {
  margin-bottom: 10px;
  padding: 5px;
  background-color: #f0f0f0;
}

.task-completed {
  text-decoration: line-through;
}

3.3 JavaScript代码

$(document).ready(function() {
  var tasks = [];

  $('#add-task').click(function() {
    var task = $('#new-task').val();
    if (task.trim() !== '') {
      tasks.push(task);
      renderTasks();
      $('#new-task').val('');
    }
  });

  $('#task-list').on('click', '.delete-task', function() {
    var index = $(this).closest('.task-item').index();
    tasks.splice(index, 1);
    renderTasks();
  });

  $('#task-list').on('click', '.complete-task', function() {
    var index = $(this).closest('.task-item').index();
    tasks[index] = tasks[index] + ' (完成)';
    renderTasks();
  });

  function renderTasks() {
    var html = '';
    tasks.forEach(function(task, index) {
      html += '<li class="task-item' + (task.includes('(完成)') ? ' task-completed' : '') + '">' +
              task +
              '<button class="delete-task">删除</button>' +
              '<button class="complete-task">完成</button>' +
              '</li>';
    });
    $('#task-list').html(html);
  }
});

第四部分：源码解析

4.1 添加任务

当用户点击“添加”按钮时，会触发add-task事件。事件处理函数会获取输入框的值，并将其添加到任务数组中。然后，调用renderTasks函数重新渲染任务列表。

4.2 删除任务

当用户点击删除按钮时，会触发delete-task事件。事件处理函数会获取按钮所在的.task-item元素的索引，并将其从任务数组中删除。然后，重新渲染任务列表。

4.3 完成任务

当用户点击完成按钮时，会触发complete-task事件。事件处理函数会获取按钮所在的.task-item元素的索引，并将任务标记为完成。然后，重新渲染任务列表。

结语

通过本文的学习，你不仅可以掌握使用jQuery构建TodoList的方法，还能深入了解jQuery的选择器、事件处理和DOM操作。希望这篇文章能帮助你更好地掌握jQuery，并将其应用到实际项目中。

-- 展开阅读全文 --