jQuery综合案例——todolist

最新推荐文章于 2023-03-20 19:53:26 发布

一条咸鱼o*v*o

最新推荐文章于 2023-03-20 19:53:26 发布

阅读量482

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_45659764/article/details/124788956

版权

--------------------------------------------------本地存储格式------------------------------------------------------------

注意：

刷新、关闭浏览器都不会丢失数据，所以使用本地存储localStorage
虽然看起来像是直接回车，直接点击的事儿，但是，其中的过程都是先把数据存储到本地存储中，再从本地存储取出数据加载到页面
因为数据很多，所以本地存储的数据采用对象数组的形式[ { todo: "xxxx"} , {done:false}]
因为本地存储localStorage只能存储字符串格式，如果把对象数组转化成字符串毫无意义，为了既能将对象数组转化为字符串，又能正常获取对象数组中的属性，用JSON.stringify(data)
但是字符串又不能获取对象数组中的属性，所以，将这些字符串存储到本地存储之后，再转换回对象数组，就可以获得里面的属性了JSON.parse(data)

---------------------------------toDoList按下回车获取本地存储已有的数据--------------------------------

步骤：

给表单文本框绑定一个keydown事件，判断用户按下的是不是enter键
当按下enter键之后，就声明一个数组，获取本地存储中原来的数据
因为后续还会获取本地存储中的数据，所以干脆封装成一个函数getData()

$(function () {
    $("#title").on("keydown", function (e) {
        if (e.keyCode === 13) {
            // 先读取本存储原来的数据
            var local = getData();
            // console.log(local);
            // 再进行更新数据，把新的数组保存到本地
            local.push({ tittle: $(this).val(), done: false });
            saveData(local);
        }
    });

    //读取本地资源的数据 
    function getData() {
        var data = localStorage.getItem("todolist");
        if (data !== null) {
            return JSON.parse(data);
        } else {
            return [];
        }
    };

注意：

声明一个数组保存本地存储原来的数据和从表单获取过来的数据
因为本地存储中的数据是字符串型，但是我们希望数组里面存储的是对象数组类型，所以需要用JSON.parse()将字符串转换成数组
然后这个数组要保存到本地存储里

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

步骤：

当用户按下enter的时候，将用户输入的文本和完成状态作为一个对象数组，加入（push）到数组local中
再将local数组保存到本地

注意：

用户按下enter之后，按理来说，应该给本地存储添加数据，但是没有直接的方法，所以，先给本地存储的数组local追加数据，再把这个数组保存到本地
因为本地存储里存储的是字符串，所以要把获取过来的对象数组转换成字符串形式（JSON.stringify）

$("#title").on("keydown", function (e) {
        if (e.keyCode === 13) {
            // 先读取本存储原来的数据
            var local = getData();
        
            // 再进行更新数据，把新的数组保存到本地
            local.push({ tittle: $(this).val(), done: false });
            saveData(local);
        }
    });

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

----------------------------------------本地存储数据渲染加载到页面-------------------------------------------------

步骤：

把渲染数据也封装到一个函数load里，方便后面调用。
每当按下enter键，也会将本地存储里的数据渲染到页面上，调用load函数
在函数里：先获取到本地存储的数据，直接调用getData()即可
遍历$.each()从本地通过getData()获取过来的对象数组，每遍历一次，就在页面中的ol里面生成一个li
每次生成新的li之前，先清空ol里面的内容
li里面的内容依次是，一个复选框、p标签显示数据（对象数组里面的title属性），一个a标签

注意：

为了让页面一开始就显示数据，所以一开始就应该对数据进行渲染
但因为一开始进行渲染，就已经调用了load函数，本地存储里的数据已经加载到了页面中，已经添加到ol中，后面又调用一次load，所以页面回出现两次数据，所以每次渲染之前，要把ol里面的内容清空（empty）


    // 渲染加载数据
    function load() {
        // 先获取本地的数据 获取到对象数组
        var data = getData();
        $("ol").empty();
        $.each(data, function (i, ele) {
            var li = $("<li><input type ='checkbox'></input><p>" + ele.tittle + "</p><a hraf='javascript:;'></a></li>");
            $("ol").prepend(li);
        });

    }

-------------------------------------------删除操作获取当前索引号----------------------------------------------------

步骤：

当每个ol中li中的a被点击的时候（事件委派），先获取到本地的数据，再进行删除，再将此数据保存到本地，再重新渲染
动态生成li的时候，给每个a添加一个自定义属性，作为a的索引号，通过遍历时的属性i获取（回调函数中的第一个参数）
通过getData()获取数据
获取到被点击的a的索引号

注意：

怎么知道点击了a之后要删除哪个数据呢，只要获取每个a的索引号，删除对应索引号的那条数据即可
因为a是动态添加的，所以不能通过单个绑定的方法给a绑定点击事件，而是要通过on
index()方法获取到的只能是同一个父级的元素们的索引号，即元素之间应该是兄弟关系。而这个案例中，所有的a是包含在li中，它们是表兄弟关系，所以不能通过index()方法获取索引号，于是需要我们在a生成的时候，手动添加一个自定义属性id

--------------------------------------点击删除按钮完成删除操作----------------------------------------------------

步骤：

获取到点击的li中a的索引号之后，删除data中对应索引的对象（data是对象数组，数组中的每一个元素都是一个对象呢）
再把删除好的data重新保存到本地
再重新渲染页面嘿嘿

注意：

由于我们无法对页面中的数据直接删除，所以我们就先获取本地存储中的数据（对象数组形式），然后对这个数据进行删除修改，然后再把这个数据重新保存到本地，再到渲染到页面上
删除对象数组中的数据splice(开始的索引号，删除的元素个数)

  // 4.删除操作
    $("ol").on("click", "a", function () {
        // 先读取本地数据
        var data = getData();
        // 修改数据
        var index = $(this).attr("id");
        // console.log(index);
        data.splice(index, 1);
        // 保存到本地
        saveData(data);
        // 重新渲染页面
        load();
    });

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

步骤：

通过事件委派给ol和ul里的li里的复选框绑定点击事件
获取本地存储的数据
获取被点击的当前的复选框的索引号（通过复选框的兄弟a的索引号）
通过获得的索引号，修改获取过来的本地存储的数据（对象数组）的第几个对象中的done属性，将done属性修改成被选中的当前复选框的checked状态
再将修改好的数据重新保存到本地
再重新渲染页面，但是要重新添加条件
如果done属性的属性值为true，就把动态生成的li添加到已经完成的区域（ul）里，相反，就添加到未完成的区域里（ol）

注意：

我们要使复选框是选中状态的li到下方的已完成的事项里，和上面的原理一样，获得本地存储的数据data，使里面的done属性的值修改该li中复选框的状态，再将修改好的数据保存到本地，再进行渲染到页面。通过页面渲染时获取到的done的状态，去判断将li添加到上面的ol里面还是下面的ul里面
要想知道要修改data中的哪条数据，就要获得修改状态的复选框的索引号，难道又要给复选框添加自定义属性吗？其实不用，因为复选框们和a标签是亲兄弟，只要获得了a标签的索引号id，这就是该复选框的索引号
将动态添加的li加入到ul中时，和ol一样，要先清空ul里面的内容


    // 5.正在进行和已完成选项操作
    $("ol,ul").on("click", "input", function () { //事件委派
        // 先读取本地数据
        var data = getData();
        // 修改数据
        var index = $(this).siblings("a").attr("id");  //这个this是ol和ul里当前被点击的li里的input
        // console.log(index);
        data[index].done = $(this).prop("checked");
        // console.log(data);
        // 保存到本地
        saveData(data);
        // 重新渲染页面
        load();
    });

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

步骤：

在渲染页面的load函数里，定义两个变量，作为待办个数和已完成个数
当有新的li添加到未完成列表中或者已完成列表中，这两个变量就增加1
页面渲染完之后，然后将这两个变量的值作为文本值赋给页面中显示个数的span

-----------------------------------------------------附上完整代码---------------------------------------------------------

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/index.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.js

$(function () {
    load(); //一开始就要渲染加载数据
    $("#title").on("keydown", function (e) {
        if (e.keyCode === 13) {
            if ($("#title").val() === "") {
                alert("请输入内容");
            } else {
                // 1.先读取本存储原来的数据
                var local = getData();
                // console.log(local);
                //2. 再进行更新数据，把从表单中获取的数据作为新的数组保存到本地
                local.push({ tittle: $(this).val(), done: false });
                $(this).val("");
                saveData(local);
                //3. 再将本地的数据渲染加载到页面
                load();
            }
        }
    });

    // 4.删除操作
    $("ol,ul").on("click", "a", function () {
        // 先读取本地数据
        var data = getData();
        // 修改数据
        var index = $(this).attr("id");  //这个this是当前被点击的ol里的li里的a
        // console.log(index);
        data.splice(index, 1);
        // 保存到本地
        saveData(data);
        // 重新渲染页面
        load();
    });

    // 5.正在进行和已完成选项操作
    $("ol,ul").on("click", "input", function () { //事件委派
        // 先读取本地数据
        var data = getData();
        // 修改数据
        var index = $(this).siblings("a").attr("id");  //这个this是ol和ul里当前被点击的li里的input
        // console.log(index);
        data[index].done = $(this).prop("checked");
        // console.log(data);
        // 保存到本地
        saveData(data);
        // 重新渲染页面
        load();
    });

    //读取本地资源的数据 
    function getData() {
        var data = localStorage.getItem("todolist");
        if (data !== null) {
            return JSON.parse(data);
        } else {
            return [];
        }
    };

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

    // 渲染加载数据
    function load() {
        // 先获取本地的数据 获取到对象数组
        var data = getData();
        var todoCount = 0; //待办个数
        var doneCount = 0; //已完成个数
        $("ol,ul").empty();
        $.each(data, function (i, ele) {
            if (ele.done) {
                $("ul").prepend($("<li><input type ='checkbox' checked = 'checked'></input><p>" + ele.tittle + "</p><a hraf='javascript:;' id=" + i + "></a></li>"));
                doneCount++;
            } else {
                $("ol").prepend($("<li><input type ='checkbox'></input><p>" + ele.tittle + "</p><a hraf='javascript:;' id=" + i + "></a></li>"));
                todoCount++;
            }

        });
        $("#todocount").text(todoCount);
        $("#donecount").text(doneCount);
    }


})

index.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;
    }
}