jQuery案例: toDoList

案例: toDoList①文本框里面输入内容,按下回车,就可以生成待办事项。②点击待办事项复选框,就可以把当前数据添加到完成事项里面。③点击已完成事项复选框,就可以把当前数据添加到待办事项里面。④但是本页面内容刷新页面不会丢失。根据黑马视频（pink老师）的教程写的todolist项目记录https://www.bilibili.com/video/BV1a4411w7Gx老师的素材地址https

九阈

609人浏览 · 2022-07-11 18:48:06

九阈 · 2022-07-11 18:48:06 发布

案例: toDoList
①文本框里面输入内容,按下回车,就可以生成待办事项。
②点击待办事项复选框,就可以把当前数据添加到完成事项里面。
③点击已完成事项复选框,就可以把当前数据添加到待办事项里面。
④但是本页面内容刷新页面不会丢失。

https://www.todolist.cn/

请添加图片描述

根据黑马视频（pink老师）的教程写的todolist项目记录
https://www.bilibili.com/video/BV1a4411w7Gx
老师的素材地址
https://gitee.com/xiaoqiang001/jquery/tree/master/

本地存储的数据格式介绍

①刷新页面不会丢失数据,因此需要用到本地存储localStorage
②核心思路:不管按下回车,还是点击复选框,都是把本地存储的数据加载到页面中,这样保证刷新关闭页面不会丢失数据
③存储的数据格式: var todolist= [{ title: ‘xx’ , done: false}]
④注意点1 :本地存储localStorage里面只能存储字符串格式,因此需要把对象转换为字符串JSON.stringify(data)。
⑤注意点2 :获取本地存储数据,需要把里面的字符串转换为对象格式JSON.parse()我们才能使用里面的数据。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/jquery.min.js"></script>
</head>

<body>
    <script>
        var todolist = [{
            title: '星期六',
            done: false
        }, {
            title: '星期天',
            done: false
        }, ];
        // localStorage.setItem("todo", todolist);
        // 1. 本地存储里面只能存储字符串的数据格式 把我们的数组对象转换为字符串格式 JSON.stringify()
        localStorage.setItem("todo", JSON.stringify(todolist));
        var data = localStorage.getItem("todo");
        // console.log(typeof data);
        // console.log(data[0].title);
        // 2. 获取本地存储的数据 我们需要把里面的字符串数据转换为 对象格式 JSON.parse()
        data = JSON.parse(data);
        console.log(data);
        console.log(data[0].title);
    </script>
</body>
</html>

请添加图片描述

toDoList按下回车把新数据添动到本地存储里面

①切记:页面中的数据,都要从本地存储里面获取,这样刷新页面不会丢失数据,所以先要把数据保存到本地存储里面。
②利用事件对象.keyCode判断用户按下回车键( 13)。
③声明一个数组,保存数据。
④先要读取本地存储原来的数据(声明函数getData() ) , 放到这个数组里面。
⑤之后把最新从表单获取过来的数据,追加到数组里面。
⑥最后把数组存储给本地存储(声明函数savaDate0)

$(function() {
    //1.按下回车把完整数据存储到本地存储里面
    //存储的数据格式 var todolist = [{title: "xxx", done: false}]
    $("#title").on("keydown",function(event){
        if(event.keyCode === 13){
            //先读取本地存储原来的数据
            var local = getData();
            console.log(local);
        }
    });

    //读取本地存储的数据
    function getDate(){
        var data = localStorage.getItem("todolist");
        if(data !== null){
            //本地存储里面的数据是字符串格式的，但是我们需要的是对象格式的
            return JSON.parse(data);
        }else{
            return [];
        }
    }
});

按下回车保存最新数据到本地存储

$(function() {
    //1.按下回车把完整数据存储到本地存储里面
    //存储的数据格式 var todolist = [{title: "xxx", done: false}]
    $("#title").on("keydown",function(event){
        if(event.keyCode === 13){
            //先读取本地存储原来的数据
            var local = getData();
            console.log(local);
            //把local数组进行更新数据 把最新的数据追加给local数组
            local.push({title: $(this).val(), done: false});
            //把这个数组local存储给本地存储
            saveDate(local);
        }
    });

    //读取本地存储的数据
    function getDate(){
        var data = localStorage.getItem("todolist");
        if(data !== null){
            //本地存储里面的数据是字符串格式的，但是我们需要的是对象格式的
            return JSON.parse(data);
        }else{
            return [];
        }
    }

    //保存本地存储数据
    function saveDate(data){
        localStorage.setItem("todolist",JSON.stringify(data));
    }
});

请添加图片描述

toDoList本地存储数据渲染加载到页面load();

①因为后面也会经常渲染加载操作,所以声明一个函数load ,方便后面调用
②先要读取本地存储数据。( 数据不要忘记转换为对象格式)
③之后遍历这个数据( $.each0) , 几条数据,就生成几个小i添加到ol里面。
④每次渲染之前,先把原先里面ol的内容清空,然后渲染加载最新的数据。
请添加图片描述

toDoList删除操作

①点击里面的a链接,不是删除的Ii ,而是删除本地存储对应的数据。
②核心原理:先获取本地存储数据,删除对应的数据,保存给本地存储,重新渲染列表li
③我们可以给链接自定义属性记录当前的索引号
④根据这个索引号删除相关的数据—数组的splice(i, 1)方法
⑤存储修改后的数据,然后存储给本地存储
⑥重新渲染加载数据列表
⑦因为a是动态创建的,我们使用on方法绑定事件

删除代码：splice(从哪个位置开始删除, 删除几个元素)

    $("ol").on("click","a",function(){
        //先获取本地存储
        var data = getDate();
        //修改数据
        var index = $(this).attr("id");
        data.splice(index,1);
        //保存到本地存储
        saveDate(data);
        //重新渲染页面
        load();
    })

点击复选框修改相应数据done属性

    $("ol,ul").on("click","input",function(){
         //先获取本地存储的数据
         var data = getDate();
         //修改数据
         var index = $(this).siblings("a").attr("id");
         // data[index].done = ?
         data[index].done = $(this).prop("checked");
         //保存到本地存储
         saveDate(data);
         //重新渲染页面
         load();
    })

toDoList 正在进行和已完成选项操作

①当我们点击了小的复选框,修改本地存储数据,再重新渲染数据列表。
②点击之后，获取本地存储数据。
③修改对应数据属性done为当前复选框的checked状态。
④之后保存数据到本地存储
⑤重新渲染加载数据列表
⑥load 加载函数里面,新增一个条件如果当前数据的done为true 就是已经完成的,就把列表渲染加载到ul里面
⑦如果当前数据的done为false，则是待办事项,就把列表渲染加载到ol里面

toDoList统计正在进行个数和已经完成个数

①在我们load函数里面操作
②声明2个变量: todoCount待办个数doneCount已完成个数
③当进行遍历本地存储数据的时候,如果数据done为false，则todoCount+ +,否则doneCount++④最后修改相应的元素text()

todolist.js

$(function() {
    //1.按下回车把完整数据存储到本地存储里面
    //存储的数据格式 var todolist = [{title: "xxx", done: false}]
    //页面重新加载
    load();
    $("#title").on("keydown",function(event){
        if(event.keyCode === 13){
            if ($(this).val() === "") {
                alert("请输入您要的操作");
            } else {
            //先读取本地存储原来的数据
            var local = getDate();
            // console.log(local);
            //把local数组进行更新数据 把最新的数据追加给local数组
            local.push({title: $(this).val(), done: false});
            //把这个数组local存储给本地存储
            saveDate(local);

            //2.todolist本地存储数据渲染加载到页面
            //摁下回车加载
            load();
            $(this).val("");
            }
        }
    });

    //读取本地存储的数据
    function getDate(){
        var data = localStorage.getItem("todolist");
        if(data !== null){
            //本地存储里面的数据是字符串格式的，但是我们需要的是对象格式的
            return JSON.parse(data);
        }else{
            return [];
        }
    }

    //保存本地存储数据
    function saveDate(data){
        localStorage.setItem("todolist",JSON.stringify(data));
    }

    //渲染加载数据
    function load(){
        //读取本地存储的数据
        var data = getDate();
        //遍历之前先要清空ol里面的元素内容
        $("ol,ul").empty();
        //正在进行的个数
        var todoCount=0;
        //已经完成的个数
        var doneCount = 0;
        //遍历这个数据
        $.each(data,function(i,n){
            if (n.done) {
                $("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++;
            }
        })
        $("#todocount").text(todoCount);
        $("#donecount").text(doneCount);
    }

    //3.todolist删除操作
    $("ol,ul").on("click","a",function(){
        //先获取本地存储
        var data = getDate();
        //修改数据
        var index = $(this).attr("id");
        data.splice(index,1);
        //保存到本地存储
        saveDate(data);
        //重新渲染页面
        load();
    })

    //4.todolist正在进行和已完成选项操作
    $("ol,ul").on("click","input",function(){
         //先获取本地存储的数据
         var data = getDate();
         //修改数据
         var index = $(this).siblings("a").attr("id");
         // data[index].done = ?
         data[index].done = $(this).prop("checked");
         //保存到本地存储
         saveDate(data);
         //重新渲染页面
         load();
    })
});

todolist.html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>ToDoList—最简单的待办事项列表</title>
    <link rel="stylesheet" href="css/todolist.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/todolist.js"></script>
</head>

<body>
    <header>
        <section>
            <label for="title">ToDoList</label>
            <input type="text" id="title" name="title" placeholder="添加ToDo" required="required" autocomplete="off" />
        </section>
    </header>
    <section>
        <h2>正在进行 <span id="todocount"></span></h2>
        <ol id="todolist" class="demo-box">

        </ol>
        <h2>已经完成 <span id="donecount"></span></h2>
        <ul id="donelist">

        </ul>
    </section>
    <footer>
        Copyright &copy; 2014 todolist.cn
    </footer>
</body>
</html>

todolist.css

body {
    margin: 0;
    padding: 0;
    font-size: 16px;
    background: #CDCDCD;
}

header {
    height: 50px;
    background: #333;
    background: rgba(47, 47, 47, 0.98);
}

section {
    margin: 0 auto;
}

label {
    float: left;
    width: 100px;
    line-height: 50px;
    color: #DDD;
    font-size: 24px;
    cursor: pointer;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

header input {
    float: right;
    width: 60%;
    height: 24px;
    margin-top: 12px;
    text-indent: 10px;
    border-radius: 5px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24), 0 1px 6px rgba(0, 0, 0, 0.45) inset;
    border: none
}

input:focus {
    outline-width: 0
}

h2 {
    position: relative;
}

span {
    position: absolute;
    top: 2px;
    right: 5px;
    display: inline-block;
    padding: 0 5px;
    height: 20px;
    border-radius: 20px;
    background: #E6E6FA;
    line-height: 22px;
    text-align: center;
    color: #666;
    font-size: 14px;
}

ol,
ul {
    padding: 0;
    list-style: none;
}

li input {
    position: absolute;
    top: 2px;
    left: 10px;
    width: 22px;
    height: 22px;
    cursor: pointer;
}

p {
    margin: 0;
}

li p input {
    top: 3px;
    left: 40px;
    width: 70%;
    height: 20px;
    line-height: 14px;
    text-indent: 5px;
    font-size: 14px;
}

li {
    height: 32px;
    line-height: 32px;
    background: #fff;
    position: relative;
    margin-bottom: 10px;
    padding: 0 45px;
    border-radius: 3px;
    border-left: 5px solid #629A9C;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
}

ol li {
    cursor: move;
}

ul li {
    border-left: 5px solid #999;
    opacity: 0.5;
}

li a {
    position: absolute;
    top: 2px;
    right: 5px;
    display: inline-block;
    width: 14px;
    height: 12px;
    border-radius: 14px;
    border: 6px double #FFF;
    background: #CCC;
    line-height: 14px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
}

footer {
    color: #666;
    font-size: 14px;
    text-align: center;
}

footer a {
    color: #666;
    text-decoration: none;
    color: #999;
}

@media screen and (max-device-width: 620px) {
    section {
        width: 96%;
        padding: 0 2%;
    }
}

@media screen and (min-width: 620px) {
    section {
        width: 600px;
        padding: 0 10px;
    }
}