jQuery笔记

今天学习了没_

于 2021-05-24 17:28:52 发布

阅读量146

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/weixin_44756893/article/details/117220875

版权

jq笔记最后一节

本地存储

1.本地存储里面只能存储字符串的数据格式

localStorge.setItem("todo",todolist);

保存格式：var todolist = [{title:'11',done:false},{title:'22',done:true}]
把数组对象转换为字符串格式 JSON.stringify()

localStorge.setItem("todo",JSON.String(todolist));

2.获取本地存储的数据需要把里面的字符串数据转换为对象格式 JSON.parse()

todoList案例

按下回车发布输入的内容
（1）页面中的数据，都要从本地存储里面获取，这样刷新页面不会丢失数据，所以先要把数据保存到本地存储里面；
（2）利用事件对象 .keyCode判断用户按下回车键（13）；
（3）声明一个数组，保存数据；
（4）先要读取本地存储原来的数据（声明函数getDate()
，放到这个数组里面；
（5）之后把最新从表单获取过来的数据，追加到数组里面；
（6）最后把数组存储给本地存储（声明函数saveDate())。

本地存储数据渲染加载到页面
（1）先声明一个load函数方便后面调用
（2）先要读取本地存储数据
（3）之后便利这个数据（$.each()),有几条数据就生成几个小li添加到ol里面
（4）每次渲染之前，先把原先里面ol的内容清空，然后渲染加载最新的数据

删除操作
（1）点击里面的a链接，不是删除li，而是删除本地存储对应的数据
（2）先获取本地存储的数据，删除对应的数据，保存给本地存储，再渲染到页面
（3）给链接自定义一个属性，记录当前的索引号
（4）根据这个索引号删除相关的数据–数组的splice(i,1)方法
（5）存储修改后的数据，然后存储给本地存储
（6）重新渲染加载数据列表
（7）on动态创建元素

//删除数组里面的相关数据
splice(从哪个位置开始删除,删除几个元素);

正在进行已经完成模块
（1）点击了小的复选框，修改本地存储数据，再重新渲染数据列表
（2）点击之后，获取本地数据
（3）修改对应数据属性done为当前复选框checked的状态
（4）之后保存数据到本地存储
（5）load加载函数里面新增一个条件，如果当前数据的done为true就是已经完成的，就把列表渲染加载到ul里面
（7）如果当前数据的done为false，则是正在进行就把列表渲染加载到ol里面

统计正在进行和已完成的个数
（1）在load函数里面操作
（2）声明2个变量：todoCount代办个数 doneCount已完成个数
（3）当进行遍历本地存储数据的时候，如果数据done为false，则todoCount++,否则doneCount++
（4）最后修改相应的元素text()

代码部分

1.html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TodoList</title>
    <link rel="stylesheet" href="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; 2021 todolist.cn
   </footer>
</body>
</html>

2.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 {
    position: relative;
    height: 32px;
    line-height: 32px;
    background: #fff;
    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;
    }
}

3.jq代码

$(function(){
    //1.按下回车 把完整数据 存储到本地存储里面
    load();
    $("#title").on("keydown",function(event){
        if($(this).val()==""){
            alert("不许为空");
        }else{
            if(event.keyCode===13){
                //先读取本地存储原来的数据
                var local = getData();
                // console.log(local);
                //把local数组进行更新数据 把最新的数据追加给local数组
                local.push({title: $(this).val(), done:false});
                //把这个数组存储给本地存储
                saveData(local);
                // console.log(local);
                //2.渲染到页面中
                load();
                $(this).val("");
        }
        }
    });

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

    //4.正在进行和已经完成选项操作
    $("ol,ul").on("click","input",function(){
        //先获取本地存储的数据
        var data = getData();
        //修改数据
        var index = $(this).siblings("a").attr("id");//自定义属性通过 attr获取
        // console.log(index);
        data[index].done=$(this).prop("checked");//固有属性通过prop()获取
        //保存到本地存储里面
        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));//之前将setItem写成了getItem !!!
    };

    //渲染加载数据
    function load(){
        //读取本地存储的数据
        var data = getData();
        //遍历之前先清空ol里面元素内容
        $("ol,ul").empty();
        var todoCount = 0;//正在进行的个数
        var doneCount = 0;//已经完成的个数
        //遍历这个数据
        $.each(data,function(i,ele){
            // console.log(ele);
            if(ele.done){  //判断遍历的这个数据的done属性到底是true还是false
                $("ul").prepend("<li><input type='checkbox' checked='checked'><p>"+ele.title+"</p><a href='javascript:;' id="+i+" ></a></li>");
                doneCount++;
            }else{
                $("ol").prepend("<li><input type='checkbox'><p>"+ele.title+"</p><a href='javascript:;' id="+i+" ></a></li>");
                todoCount++;
            }
           
        });
        $("#todocount").text(todoCount);
        $("#donecount").text(doneCount);
    }
})

今天学习了没_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery笔记

jq笔记最后一节本地存储1.本地存储里面只能存储字符串的数据格式localStorge.setItem("todo",todolist);保存格式：var todolist = [{title:'11',done:false},{title:'22',done:true}]把数组对象转换为字符串格式 JSON.stringify()localStorge.setItem("todo",JSON.String(todolist));2.获取本地存储的数据需要把里面的字符串数据转换为对象格式
复制链接

扫一扫