jQuery-end

jQuery部分结束，感觉还需要复盘。

收尾用的是一个todolist案例，待办事项与已完成事项，通过勾选可以添加到已完成事项中，从表单读取事项内容，点击回车添加到代办事项。

数据存储：本地存储 localstorage 需要先封装几个函数：读取本地存储数据、保存数据到本地存储、将本地存储数据渲染到页面 数据结构： var todolist = [{ title: $("input").val(); done: false; },{...}]; `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(); $("ol,ul").empty(); // 先将代办与已办置空$.each(data,function(i,n) { if(n.done) { // 添加到已完成 $("ul").prepend(...); }else { //添加到未完成 } }) }`

// 1.回车触发
$("#title").on("keydown",function(e) {
    if(e.keyCode === 13) {
        var local = getData();
        local.push({
            title: $(this).val(),
            done: false
        });
        saveData(local);
        load();
    }
})
//2.删除操作
$("ol,ul").on("click","a",function() {
    var data = getData();
    var index = $(this).attr("id");
    // data是数组，里面存放对象
    data.splice(index,1);
    saveData(data);
    load();
})
//3.
$("ol,ul").on("click","input",function() {
    // 复选框被点击后，要求数据随之改变
    var data = getData();
    var index = $(this).siblings("a").attr("id");
    data[index].done = $(this).prop("checked");
    saveData(data);
    load();
})