jQuery基础应用之todoList

todoList的功能

todoList是一个简易方便的待办事项的便签，功能比较简单，适合用来熟悉和复习jQuery的基础操作。其主要的功能有：打开todoList会自动显示上一次使用完的结果；在输入框中输入内容，并按下enter键可以将内容添加到正在进行的事中，并且会将输入框清空，方便下一次的输入；将正在进行的事的前面的复选框打上勾，这件事会从正在进行的事中移除，并自动加入到已经完成的事中，而将已经完成的事的前面的复选框的勾去掉，它又会回到正在进行的事中；在每件事的后面都有一个删除按钮，点击它会删除这件事；在正在进行的事和已经完成的事的后面都有一个记录事件数量的数字；点击最下面的clear按钮会一键清空便签的内容。下面是页面截图。

相关功能的分析

复现功能

打开便签，它会直接复现上次的结果，那么相应的数据应该是直接存储到浏览器本地的，打开页面时，就会自动读取上次的数据，并且渲染到页面上。实际上，todoList里的功能都是对数据进行操作。

添加功能

添加功能主要是一个对数组的push操作的过程，首先获取本地数据，然后将获取到的文本框的内容添加到数据中，并保存到本地，最后是重新渲染页面。

标记功能

标记功能主要跟复选框的状态有关，根据复选框的状态动态修改数据，并保存到本地。

删除功能

删除功能主要是对数组的一个splice操作的过程，首先获取本地数据，然后获取点击了删除按钮的对应的事项的索引，根据索引删除数组里对应的数据，之后保存到本地，最后是重新渲染页面。

渲染（加载）功能

渲染功能的主流程是：获取并遍历数组，根据数组里面表示复选框的状态属性的值，来选择是在正在进行的事，还是在已经完成的事里面动态添加元素，与此同时对相应的事项进行计数。

代码的封装

我们发现，多个功能里面都有重复的流程，所以我们可以把这些流程封装成函数，在使用时直接调用即可。

完整的代码

话不多说，以下是完整的代码，因为本身是小白，所以有些错误也请谅解。

$(function() {
   
    //渲染页面,相当于自动读取记录，直接回到用户上次使用完的结果
    load();
    $(".todo").on("keydown", function(event) {
   
        //判断是否按下了enter键
        if (event.keyCode === 13) {
   
            //获取本地数据
            var local = getData();
            //从输入框中得到数据并更新数据，将数据存储为[{title: "xxx",done:false}]的形式
            local.push({
   
                title: $(this).val(),
                done: false