todolist项目前端 jQuery 代码

最新推荐文章于 2024-04-27 22:53:23 发布

黑白豆豆yy

最新推荐文章于 2024-04-27 22:53:23 发布

阅读量819

点赞数

文章标签： jquery html5 javascript

本文链接：https://blog.csdn.net/qq_43531541/article/details/120551055

版权

根据黑马视频（pink老师）的教程写的todolist项目记录，页面/页面样式是从官网扒取下来的，主要写的是jQuery代码，todolist是基于增删改查实现的案例

项目需求分析：
可以自行打开todolist的官网更好体会功能需求
参考链接http://www.todolist.cn/
页面成品：
在这里插入图片描述

功能描述

在这里插入图片描述

第一步：

扒取html页面，css样式，搭建文件结构
在这里插入图片描述
了解页面搭建的结构：
共分为上中下3大块：header section footer
section中：
正在进行模块放在ol标签中
已经完成模块放在ul标签中

代码如下：

<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>

第二步：

了解本项目的存储的数据：
1.本地localStorage存的是字符串形式
2.页面上使用的是数组对象格式
在这里插入图片描述

为方便了解数据的使用，以下为例子：


    <script>
   
        var tidolist = [
            {
                title: '今天要做的事',
                done: false
            },
            {
                title: '快乐每一天',
                done: true
            },
        ]
        //对象转换为字符串
        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>

第三步：

在确认成功引入js文件后，开始写代码。
因多次需要读取/获取数据，保存数据，故先将这两个功能封装成函数：getData（），savaData（）
代码：

 // 读取本地存储的数据 
    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));
    }

第四步：按下回车读取本地数据，步骤如下：读取，更新（添加），保存，渲染

在这里插入图片描述

 // alert(11);测试是否引入成功js文件
    // 1. 按下回车 把完整数据 存储到本地存储里面
    // 存储的数据格式  var todolist = [{title: "xxx", done: false}]
    load();//详情看第五步
    // on事件委托
    $("#title").on("keydown", function(event) {
        if (event.keyCode === 13) {
        // 判断内容是否为空
            if ($(this).val() === "") {
                alert("请输入您要的操作");
            } else {
                // 先读取本地存储原来的数据
                var local = getDate();
                // console.log(local);
                // 把local数组进行更新数据 把最新的数据追加给local数组
                // push的参数是数组对象
                local.push({ title: $(this).val(), done: false });
                // 把这个数组local 存储给本地存储
                saveDate(local);
                // 2. toDoList 本地存储数据渲染加载到页面
                load();//详情看第五步
                $(this).val("");
            }
        }
    });

第五步：渲染函数：load（）

在这里插入图片描述
代码：其中id为我们自己定义的属性，用于充当索引号

// 渲染加载数据
    function load() {
        // 读取本地存储的数据
        var data = getDate();
        console.log(data);
        // 遍历之前先要清空ol里面的元素内容
        $("ol, ul").empty();
        
        // 每次加载都重新计算一遍，用于统计个数，详情往后看
        var todoCount = 0; // 正在进行的个数
        var doneCount = 0; // 已经完成的个数
        
        // 遍历这个数据
        $.each(data, function(i, n) {
            // console.log(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);

    }

第六步：删除操作

在这里插入图片描述
点击每行对应的圆点，会删除每行数据

在这里插入图片描述
删除代码：splice(从哪个位置开始删除, 删除几个元素)

//  toDoList 删除操作
    $("ol, ul").on("click", "a", function() {
        // alert(11);
        // 先获取本地存储
        var data = getDate();
        console.log(data);
        // 获取id记录成当前索引号，attr用于获取自定义的属性
        var index = $(this).attr("id");
        console.log(index);
       // 利用splice函数删除
        data.splice(index, 1);
        // 保存到本地存储
        saveDate(data);
        // 重新渲染页面
        load();
    });

第七步：点击复选框

在这里插入图片描述

   //  toDoList 正在进行和已完成选项操作 on事件绑定
    $("ol, ul").on("click", "input", function() {
        // alert(11);
        // 先获取本地存储的数据
        var data = getDate();
        // 修改数据
        var index = $(this).siblings("a").attr("id");
        // 获取自定义属性attr方法
        console.log(index);
        // data[?].done = ?
        data[index].done = $(this).prop("checked");
        console.log(data);
        // 保存到本地存储
        saveDate(data);
        // 重新渲染页面
        load();
    });

第八步：统计已完成/未完成的数量

在这里插入图片描述
详情查看load（）

完整代码:

$(function() {
    // alert(11);测试是否引入成功js文件
    // 1. 按下回车 把完整数据 存储到本地存储里面
    // 存储的数据格式  var todolist = [{title: "xxx", done: false}]
    load();
    // on事件委托
    $("#title").on("keydown", function(event) {
        if (event.keyCode === 13) {
        // 判断内容是否为空
            if ($(this).val() === "") {
                alert("请输入您要的操作");
            } else {
                // 先读取本地存储原来的数据
                var local = getDate();
                // console.log(local);
                // 把local数组进行更新数据 把最新的数据追加给local数组
                // push的参数是数组对象
                local.push({ title: $(this).val(), done: false });
                // 把这个数组local 存储给本地存储
                saveDate(local);
                // 2. toDoList 本地存储数据渲染加载到页面
                load();
                $(this).val("");
            }
        }
    });
    //  toDoList 删除操作
    $("ol, ul").on("click", "a", function() {
        // alert(11);
        // 先获取本地存储
        var data = getDate();
        console.log(data);
        // 修改数据
        var index = $(this).attr("id");
        console.log(index);
        data.splice(index, 1);
        // 保存到本地存储
        saveDate(data);
        // 重新渲染页面
        load();
    });
    //  toDoList 正在进行和已完成选项操作 on事件绑定
    $("ol, ul").on("click", "input", function() {
        // alert(11);
        // 先获取本地存储的数据
        var data = getDate();
        // 修改数据
        var index = $(this).siblings("a").attr("id");
        // 获取自定义属性attr方法
        console.log(index);
        // data[?].done = ?
        data[index].done = $(this).prop("checked");
        console.log(data);
        // 保存到本地存储
        saveDate(data);
        // 重新渲染页面
        load();
    });
    // 读取本地存储的数据 
    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();
        console.log(data);
        // 遍历之前先要清空ol里面的元素内容
        $("ol, ul").empty();
        // 每次加载都重新计算一遍
        var todoCount = 0; // 正在进行的个数
        var doneCount = 0; // 已经完成的个数
        // 遍历这个数据
        $.each(data, function(i, n) {
            // console.log(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);

    }

})