基于jquery开发的todolist待办事列表清单项目

前提：

这里只介绍jquery所实现的操作部分，页面的html和css部分这里就不在详细介绍，需要看源码的伙伴可以到底部中的项目仓库链接中获取。

一、项目介绍：

1. 文本框里面输入内容，按下回车，就可以生成待办事项。
2. 点击待办事项复选框，就可以把当前数据添加到已完成事项里面。
3. 点击已完成事项复选框，就可以把当前数据添加到待办事项里面。
4. 但是本页面内容刷新页面不会丢失。

项目完成图：

二、todolist项目分析

1.核心思路： 不管是按下回车发布信息还是点击复选框，都是先要获取本地存储，然后操作修改，保存所修改的数据到本地存储中，最后再重新加载到页面，这样保证重新刷新页面不会丢失。
2.核心功能：
(1) todolist把新数据添加在本地存储中
(2) todolist本地存储中的数据渲染加载到页面
(3) 删除todolist中的不需要的项目
(4) 实现todolist已完成和未完成的功能
(5) 统计todolist中已完成和未完成的个数
3. 项目中所需要的封装函数：
(1) 用于获取本地存储的 getData()函数;
(2) 保存数据到本地存储的 saveData()函数；
(3) 渲染加载数据到页面中的 load()函数；

三、todolist核心功能实现

1. todlist把新数据添加在本地存储中：
   思路：
   (1)用jquery的方法绑定输入框中的id=title,使用事件on中的keydown来触发事件。
   (2)在函数方法中，通过按键是否按下回车(Ascall码值为13)来判断
   (3)如果文本框中输入的值为空则跳出allert()来提示其填写信息
   (4)不为空则获取本地存储的数据，通过我们自己封装getData()函数
   (5)把新添加的数据通过push函数加入数组中，加入的数据的格式为：var todolist = [{title: "xxx", done: false}] 这种形式。
   (6) 保存数据到本地存储中，使用封装函数saveData();
   (7)重新渲染加载页面,使用封装函数load();

   代码展示：

 //核心功能1：添加toDoList事件
    //  按下回车 把完整数据 存储到本地存储里面
    // 存储的数据格式  var todolist = [{title: "xxx", done: false}]
 $("#title").on("keydown", function (event) {

        //如果按下回车后（回车的ASCLL码值为13）将信息进行发布
        if (event.keyCode === 13) {

            if ($(this).val() === "") {
                alert("请输入您要的操作");
            } else {

                //1.获取本地数据,用getData（）函数来表示
                var local = getData();
                //2.把新添加的任务加入到本地数据，用var todolist = [{title: "xxx", done: false}]这种形式
                local.push({ title: $(this).val(), done: false })
                //3.保存加载的数据到本地中,用saveData(data)函数
                saveData(local);
                //4.渲染保存的数据到页面
                load();
                $(this).val("");
            }

        }

    });

所封装的函数getData,saveData,和load函数(load为第二个核心功能，这里不展示，下面会详细介绍):

 //getData函数，用来获取本地存储localStorage
    function getData() {
        //将获取的对象存储到data中进行判断
        var data = localStorage.getItem("todolist");
        //判断数据是否为空并输出数据
        if (data !== null) { //判断对象是否为空
            return JSON.parse(data);    //对象不为空则返回对象中的JSON字符串形式解析出来
        } else {
            return [];      //否则返回空对象
        }
    }

    //saveData函数，用来保存本地存储
    function saveData(data) {
        localStorage.setItem("todolist", JSON.stringify(data));
    }

2. todolist本地存储中的数据渲染加载到页面
   (1)先读取本地存储
   (2)每次渲染前先调用清空函数empty清空，否则会重复渲染多次本地存储
   (3)之后遍历这个数据（$.each()），有几条数据，就生成几个小li 添加到 ol 里面。

 //load函数，将数据渲染到页面
 function load() {
        var data = getData();   //获取本地数据

        $("ol,ul").empty();     //遍历前先清空ol和ul的数据
       
        //用来遍历data对象中的数据,其中i为索引值，n为遍历的数据值
        $.each(data, function (i, n) {
            
                $("ol").prepend("<li><input type='checkbox' > <p>" + n.title + "</p> <a href='javascript:;' id=" + i + " ></a></li>");
               
            }
        });       
    }

3. 删除todolist中的不需要的项目
   (1)获取本地存储内容
   (2)我们可以给链接自定义属性记录当前的索引号,获得需要删除的li的索引值
   (3)根据这个索引号删除相关的数据----数组的splice(i, 1)方法
   (4)存储修改后的数据，然后存储给本地存储
   (5)重新渲染加载数据列表

//核心功能2：删除toDoList事件
$("ul,ol").on("click", "a", function (event) {

        //1.获取localstage中的数据
        var data = getData();
        //2.获取li中a的自定义索引id,用来标记要删除的li
        var index = $(this).attr("id");
        //3.用splice函数删除当前的小li
        data.splice(index, 1);
        //4.保存当前的数据到localstage中
        saveData(data);
        //5.重新渲染数据到网页上
        load();

    });

4.实现todolist已完成和未完成的功能 和 统计todolist中已完成和未完成的个数
(1)当我们点击了小的复选框，修改本地存储数据，再重新渲染数据列表。
(2)点击之后，获取本地存储数据。
(3)修改对应数据属性 done 为当前复选框的checked状态。
(4)之后保存数据到本地存储
(5)重新渲染加载数据列表
(6)load 加载函数里面，新增一个条件,如果当前数据的done为true 就是已经完成的，就把列表渲染加载到 ul 里面。如果当前数据的done 为false， 则是待办事项，就把列表渲染加载到 ol 里面
(7)并且在load函数中声明2个变量 ：todoCount 待办个数 doneCount 已完成个数，当进行遍历本地存储数据的时候， 如果 数据done为 false， 则 todoCount++, 否则 doneCount++，最后修改相应的元素 text()来表示事件的个数。

 //核心功能3：修改checkbox中的check属性，通过判断是否打勾来将已完成和未完成分配到不同的区域中
    $("ul,ol").on("click", "input", function () {
        //1.获取本地存储数据
        var data = getData();
        //2.从li中的结构内容中可知，可以通过获取其兄弟a的索引来获取checkbox的索引
        var index = $(this).siblings("a").attr("id");
        //3.修改对应数据属性 done 为当前复选框的checked状态。
        data[index].done = $(this).prop("checked");
        console.log(data);
        //4.保存本地存储
        saveData(data);
        //5.重新渲染
        load();
    });

//load函数，将数据渲染到页面
    function load() {
        var data = getData();   //获取本地数据

        $("ol,ul").empty();     //遍历前先清空ol和ul的数据
        var todoCount = 0;      //待办事项
        var doneCount = 0;      //已办事项


        //用来遍历data对象中的数据,其中i为索引值，n为遍历的数据值
        $.each(data, function (i, n) {
            if (n.done) {       //如果done为true的话，表示已经完成事件，将数据添加到完成的那部分
                $("ul").prepend("<li><input type='checkbox' checked ='checked'> <p>" + n.title + "</p> <a href='javascript:;'id=" + i + " ></a></li>")

                doneCount++;    //每办完一件事则加一
            } else {
                $("ol").prepend("<li><input type='checkbox' > <p>" + n.title + "</p> <a href='javascript:;' id=" + i + " ></a></li>");
                todoCount++;    //每添加一件事则加一
            }

        });

        //todolist右上角的事件个数
        $("#todocount").text(todoCount);
        $("#donecount").text(doneCount);
    }

四、完整的jquery代码：

$(function () {

    //核心功能1：添加toDoList事件
    //  按下回车 把完整数据 存储到本地存储里面
    // 存储的数据格式  var todolist = [{title: "xxx", done: false}]
    
    load();//在项目开始前需要在jquery上先加上load()渲染数据在网页上，否则页面一刷新时数据将不显示在页面中。
    $("#title").on("keydown", function (event) {

        //如果按下回车后（回车的ASCLL码值为13）将信息进行发布
        if (event.keyCode === 13) {

            if ($(this).val() === "") {
                alert("请输入您要的操作");
            } else {

                //1.获取本地数据,用getData（）函数来表示
                var local = getData();
                //2.把新添加的任务加入到本地数据，用var todolist = [{title: "xxx", done: false}]这种形式
                local.push({ title: $(this).val(), done: false })
                //3.保存加载的数据到本地中,用saveData(data)函数
                saveData(local);
                //4.渲染保存的数据到页面
                load();
                $(this).val("");
            }

        }

    });


    //核心功能2：删除toDoList事件
    $("ul,ol").on("click", "a", function (event) {

        //1.获取localstage中的数据
        var data = getData();
        //2.获取li中a的自定义索引id,用来标记要删除的li
        var index = $(this).attr("id");
        //3.用splice函数删除当前的小li
        data.splice(index, 1);
        //4.保存当前的数据到localstage中
        saveData(data);
        //5.重新渲染数据到网页上
        load();

    });

    //核心功能3：修改checkbox中的check属性，通过判断是否打勾来将已完成和未完成分配到不同的区域中
    $("ul,ol").on("click", "input", function () {
        //1.获取本地存储数据
        var data = getData();
        //2.从li中的结构内容中可知，可以通过获取其兄弟a的索引来获取checkbox的索引
        var index = $(this).siblings("a").attr("id");
        //3.修改对应数据属性 done 为当前复选框的checked状态。
        data[index].done = $(this).prop("checked");
        console.log(data);
        //4.保存本地存储
        saveData(data);
        //5.重新渲染
        load();
    });


    //getData函数，用来获取本地存储localStorage
    function getData() {
        //将获取的对象存储到data中进行判断
        var data = localStorage.getItem("todolist");
        //判断数据是否为空并输出数据
        if (data !== null) { //判断对象是否为空
            return JSON.parse(data);    //对象不为空则返回对象中的JSON字符串形式解析出来
        } else {
            return [];      //否则返回空对象
        }
    }

    //saveData函数，用来保存本地存储
    function saveData(data) {
        localStorage.setItem("todolist", JSON.stringify(data));
    }

    //load函数，将数据渲染到页面
    function load() {
        var data = getData();   //获取本地数据

        $("ol,ul").empty();     //遍历前先清空ol和ul的数据
        var todoCount = 0;      //待办事项
        var doneCount = 0;      //已办事项


        //用来遍历data对象中的数据,其中i为索引值，n为遍历的数据值
        $.each(data, function (i, n) {
            if (n.done) {       //如果done为true的话，表示已经完成事件，将数据添加到完成的那部分
                $("ul").prepend("<li><input type='checkbox' checked ='checked'> <p>" + n.title + "</p> <a href='javascript:;'id=" + i + " ></a></li>")

                doneCount++;    //每办完一件事则加一
            } else {
                $("ol").prepend("<li><input type='checkbox' > <p>" + n.title + "</p> <a href='javascript:;' id=" + i + " ></a></li>");
                todoCount++;    //每添加一件事则加一
            }

        });

        //todolist右上角的事件个数
        $("#todocount").text(todoCount);
        $("#donecount").text(doneCount);
    }

})

五、注意事项

1.在使用jquery时，记得要在head部分中引入jquery插件代码，否则整个项目将无效。

<script src="js/jquery.min.js"></script>
<script src="js/todolist.js"></script>

2.在项目开始前需要在jquery上先加上load()渲染数据在网页上，否则页面一刷新时数据将不显示在页面中。

六、代码仓库

(1)github
(2)gitee

七、参考资料：

黑马程序员pink老师的js课程，b站教学视频链接