【学习用jQuery写待办事项的思路】

是小赵哦

已于 2022-04-12 20:41:19 修改

阅读量739

点赞数

分类专栏：自学web前端文章标签：前端 js jquery

于 2022-04-12 20:39:23 首次发布

本文链接：https://blog.csdn.net/qq_46827043/article/details/124133033

版权

自学web前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

学习用jQuery写待办事项的思路

跟着 pink 老师学前端（为了自己梳理思路）

一：具体的css页面

可以实现的功能

二：js部分

首先你想要一个待办事项，想实现的功能是什么，第一个想起来的肯定是按回车就能存东西，然后就是实现按回车能有反应，那就是给按键添加事件，怎么添加，给谁添加？

按下回车把完整数据存储到本地存储里面

我们想到添加事件是通过 输入框 输入，就可以想到给input添加，给input一个ID或者类名，直接获取，用jQuery的方法就是 $（#id名字） 然后添加事件

on.("keydown" function(){
具体要实现的东西
})

现在只是给input添加了一个按下事件，那要确定安下的是哪一个键，就要用的 按键的ASCALL值 ，我们可以查表得到回车键是13。设置条件函数，如果是13那就执行接下来的函数。

 if (event.keyCode === 13) {}

现在回车确定了，那接下来就是存东西了，怎么存？
写一个函数，也可以直接写在里面，但是想到之后肯定还会再用到，所以就直接写一个函数封装起来，用的时候直接调用函数，简化代码。

获得数据到本地存储

给函数命名为getDate（）（PS：记得驼峰命名法）

function getDate(){
应该先判断现在本地有没有数据，然后存进去
存储数据的格式 ，当时写css的时候给定title和是否checked
var data = localStorage.getItem("todolist"),获取正在进行的事件的内容数据
判断数据有没有，如果不为空那个就存进去，否则就返回空值
但是需要注意的一点是存进去的需要是数组类型，get到的是字符串类型，需要转换，这里用到的转换方法是JSON.parse(data)
}

3.保存数据
再写一个函数保存数据

function savaDate(){
localStorage.setItem("todolist",JSON.stringify(data));
保存数据直接用localStorage.setItem
保存的时候要转换成字符串的形式保存，看到的才是字符串的形式
}

4.渲染数据
判断按键，转变checked属性，给与值
还要判断是否checked，如果选中，还要给整体的数据加1,不光是显示出来的问题

function load(){
先读取数据
var data = getDate();
获取到数据以后要干嘛呢，要想办法把它显示出来，那就要看看有多少数据，这时候就需要遍历数据
遍历数据$.each(data,function(){
先判断这个是已经checked还是没有
如果checked就添加到已完成的事，反之，在正在完成的事中，而且在这里面要给事项数量添加数值
先判断if（n.done当时写的时候done默认的是faluse，也就是没完成，这里指为TRUE）{
如果是TRUE，那么应该给已经完成的事件添加数值
先获取到这个事件$("ul").prepend(这个是内部添加数据命令，并且会放到所有数据前面)(这里当时写css的时候是没有写的，都是动态获取的，所以需要在这里面都添加上所需要的内容，样式都提前写好了)
（"<li><input type='checkbox' checked='checked'><p>" + n.title + "</p><a href='javascript:;' id=" + i + "> </a ></li>"）;
todoCount++;(记得先生米昂变量，局部变量即可)
else{
如果不是上述那种情况，那就给TODOCount添加事件，同样的道理
 $("ol").prepend("<li><input type='checkbox'><p>" + n.title + "</p><a href='javascript:;' id=" + i + "> </a ></li>")
 todoCount++;
}
})；

这时候只是有了todoCount这个数值，并没有给到存储中

当时写的时候给他们写了id名字，直接获取元素，赋值
$("#todoCount").text(todoCount);
$("#doneCount").text(doneCount);

添加主函数

现在准备工作都写完了，那就去给回车键功能函数里面把这些都添加进去

添加事件on.("keydown" function(){
具体要实现的东西（就这个东西）
首先应该读取本地原有的数据，然后想办法把新的数据追加(用push追加)到本地存储，然后再渲染加载到页面上
var local =getDate();
local.push({title:$(this).val(),done:faluse});
然后保存渲染
调用函数就行了
savaDate(local);
load();
$(this).val("");
})

需要注意的是，这样点进去用户之前输入的是看不到的，所以在最开始应该先让他加载渲染一下子
$(this).val("");这句话的目的就是让渲染之后不要重复添加东西，把当前的值清空。

添加删除事件

大部分的功能已经实现，我们还需要做的就是删除数据

获取UL.OL给他们添加事件
$("ol""ul").on("click","a",function(){
具体删哪一个呢，我们需要添加点击事件，这个点击之后要获取到该事件的索引号，直接删除该索引号虽在盒子的内容
var data = getDate();
var index=$(this).attr("id");因为id名字是自己起的，所以用attr来获取更合适
data.splice(index,1)这里的操作就是删除操作。表示是从index开始删除一个数
重新保存渲染一下子。
})

修改是已完成还是正在进行时状态

利用排他思想（为了简单直接用siblings）

添加点击事件，这次是给ul.ol里面的input添加
 $("ol,ul").on("click", "input", function() {
一样的先获取数据，然后用哦排他思想锁定当前，其他不变，给定索引号
var index = $(this).siblings("a").attr("id");
然后让当前索引好的check状态变为checked，
data[index].done=$(this).prop("checked");prop() 方法设置或返回被选元素的属性和值。
保存渲染
savaDate(local);
load();
}

这样这个简单的待办事项就算写完啦
完整代码（js部分）：

$(function() {
    // alert(11);
    // 1. 按下回车 把完整数据 存储到本地存储里面
    //提前加载一下，让用户每次进去都可以看到
    load();
    $("#title").on("keydown", function(event) {
        if (event.keyCode === 13) {
            // alert("yesyes");
            //现在能确定按得是回车键，接下来应该把数据存储到本地存储里面
            //首先应该读取本地原有的数据，然后想办法把新的数据追加(用push追加)到本地存储，然后再渲染加载到页面上
            if ($(this).val() === "") {
                alert("请输入您的内容");
            } else {
                var local = getDate();
                local.push({ title: $(this).val(), done: false });
                //还得把local数据给到saveDate（）本地存储
                saveDate(local);
                load();
                $(this).val("");
            }

        }

        //2.整个存储数据的函数，下次用直接调用就行      
    });
    // 删除操作
    $("ol,ul").on("click", "a", function() {
        //先获取本地数据
        // alert(66666666666666666);
        var data = getDate();
        //得到索引号，当时li里面写id了没？？？？？
        var index = $(this).attr("id");
        //从索引号1开始取值
        data.splice(index, 1);
        //保存一下子数值
        saveDate(data);
        //重新渲染
        load();
    });
    //修改是已完成还是正在进行时状态
    $("ol,ul").on("click", "input", function() {
        var data = getDate();
        var index = $(this).siblings("a").attr("id");
        // console.log(index);
        data[index].done = $(this).prop("checked");
        //保存一下子数值
        saveDate(data);
        //重新渲染
        load();
    });

    //获取数据
    // 存储的数据格式  var todolist = [{title: "xxx", done: false}]
    function getDate() {
        //先获取一下(getitem)本地的数据，设置以下判断条件，若果这里面有数据就返回值，如果没有就返回空
        //若果有的话要注意一下，get道德数据是字符串，准换成数组形式存储
        var data = localStorage.getItem("todolist");

        if (data !== null) {
            return JSON.parse(data);
        } else {
            return [];
        }
    }
    //保存数据(steItem 获取到之后应该set一下)，保存的时候还是应该以字符串的形式存储，要转换一下
    function saveDate(data) {
        localStorage.setItem("todolist", JSON.stringify(data));
    }
    //渲染数据，说简单点就是把set的数据整到页面上//还要判断是否checked，如果选中，还要给整体的数据加1
    //不光是显示出来的问题
    function load() {
        //读取本地数据
        var data = getDate();
        //遍历数据（注意一下，有个小BUG，每次遍历如果不清楚之前额数据，他就会一直叠加，所以呀哦清除一下)
        $("ol,ul").empty();
        var doneCount = 0;
        var todoCount = 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);
    };
})