jQuery 学习模块二_label: '修改章节', classname: 'btn-info', callback: fu-CSDN博客

本文链接：https://blog.csdn.net/qq_42374676/article/details/119777644

jQuery事件注册


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>10-jQuery事件注册</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
<!--要求-->
<!--1 掌握给标签注册事件的两种方式:专用方法|快捷方法-->
<!--2 掌握on方法的基本用法-->
<!--3 知道one方法的使用和特点-->
<!--4 清楚事件注册回调函数中的event(事件对象)-->
<script src="js/jquery-3.3.1.js"></script>
<script>
    $(function () {
        //...........
        //[1] 注册事件的方式(1)
        //说明:给页面中选中的按钮注册事件监听,当click事件发生,执行回调函数中的代码
        //注意:可以给标签注册多个相同的事件
        //$("button").click(fn(){//.....})
        $("button").click(function(){
            console.log("点击了按钮---1");
        })

        $("button").click(function(){
            console.log("点击了按钮---2");
        })

        $("button").mouseenter(function(){
            console.log("移入按钮---");
        })

        //[2] 注册事件的方式(2)
        //语法:jQ.on(事件类型,回调函数)
        $("button").on("click",function () {
            console.log("点击了按钮---A");
        })

        $("button").on("click",function () {
            console.log("点击了按钮---B");
        })

        //[3] one方法
        //说明:给标签添加一次性方法,只会执行一次
        $("button").one("click",function () {
            console.log("点击了按钮---C");
        })

        //[4] 事件对象

        //在事件注册的回调函数中存在一个隐藏的参数:event(事件对象)
        //通过事件对象,可以获取很多跟当前事件和标签有关的信息
        //第一个参数:事件的类型
        //第二个参数:传递给回调函数的数据(通常省略)
        //第三个参数:回调函数(当事件发生调用)
        $("span").on("click",{name:"zs"},function (e) {
            //获取当前事件的类型
            console.log("点击了span标签");
            console.log(e.type);  //click
            //获取当前事件作用的对象
            console.log(e.target); //span
            console.log(e.data.name);
        })

    })
</script>
<button>按钮</button>
<span>我是span</span>
</body>
</html>

jQuery事件冒泡


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>11-jQuery事件冒泡</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box{
            width: 200px;
            height: 200px;
            background: yellowgreen;
        }
        .box1{
            width: 100px;
            height: 100px;
            background: red;
        }

        .box2{
            width: 50px;
            height: 50px;
            background: blueviolet;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="box1">
        <div class="box2"></div>
    </div>
</div>
<script src="js/jquery-3.3.1.js"></script>
<script>
    $(function () {
        //...........
        //[1] 事件冒泡
        //[2] 如何阻止事件冒泡
        //如果标签和父标签注册了相同类型的事件,那么当子标签事件被触发的时候,事件会向上传递
        //层层传递(冒泡)
        $(".box2").on("click",function (event) {
            console.log("box2");
            //event.stopPropagation();
            //return false;
        })

        $(".box1").on("click",function () {
            console.log("box1");
        })

        $(".box").on("click",function () {
            console.log("box");
        })

        $(".box2").triggerHandler("click");
    })
</script>
</body>
</html>

关于标签的默认行为


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>12-关于标签的默认行为</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<form action ="02-工具方法map的使用.html">
    <input type="submit" value="提交">
</form>
<script src="js/jquery-3.3.1.js"></script>
<script>
    $(function () {
        //...........
        //[1] 有一部分标签本身存在一些默认行为
        //[2] 如何阻止默认行为 事件对象.preventDefault()
        $("a").click(function (e) {
            console.log("点击了a标签");
            e.preventDefault()
    })

    })
</script>
</body>
</html>

jQuery事件的触发


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>13-jQuery事件的触发</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
<script src="js/jquery-3.3.1.js"></script>
<script>
    $(function () {
        //...........
        //自动触发事件
        $("button").click(function (e) {
            console.log("点击了按钮",e.target);
        })

        $("button").mouseenter(function () {
            console.log("移入了按钮");
        })

        $("span").click(function () {
            //参数:事件的类型
            //$("button").trigger("click");
            //$("button").trigger("mouseenter");

            $("button").triggerHandler("click");
        })


        //对比:
        //(1) 是否会阻止事件冒泡和默认行为
        //(2) triggerHandler会作用域选中标签中的第一个标签,trigger作用域选中的所有的标签
        //triggerHandler 会默认阻止事件冒泡
        //trigger
    })
</script>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<span>模拟用户的点击</span>
</body>
</html>

jQuery事件的委托


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>14-jQuery事件的委托</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
<script src="js/jquery-3.3.1.js"></script>
<script>
    $(function () {
        //...........
        //语法:jQ.on(事件的类型,选择器,fn)
        //说明:委托ul标签,给ul中存在的所有li标签都添加点击事件
        //优点:可以给尚未存在的标签添加事件(预定),可以提升性能
        //委托的对象并非一定要是标签的父元素,可以是祖先节点,只要能够找到就可以
        $(".box").on("click","li",function () {
            alert(this.innerHTML);
        });

        //新创建li标签
        var oLi = document.createElement("li");
        oLi.innerHTML = "我是新创建的li标签";
        var oUl = $("ul")[0];
        oUl.appendChild(oLi);

    })
</script>
<div class="box">
    <ul>
        <li>我是li1</li>
        <li>我是li2</li>
        <li>我是li3</li>
        <li>我是li4</li>
        <li>我是li5</li>
        <li>我是li6</li>
    </ul>
</div>
</body>
</html>

jQuery自定义事件


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>15-jQuery自定义事件</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
<script src="js/jquery-3.3.1.js"></script>
<script>
    $(function () {
        //...........
        //[1] jQ支持自定义事件
        //说明:给选中的div标签注册了xx事件.当xx事件发生,那么就执行回调函数中的代码
        $('div').on("xx",function () {
            console.log("xx了标签");
        })

        //[2] 自定义事件没法触发的,除非自动触发
        $('div').trigger("xx");

    })
</script>
<div>div1</div>
</body>
</html>

jQuery事件的取消


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>16-jQuery事件的取消</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
<script src="js/jquery-3.3.1.js"></script>
<script>
    $(function () {
        //...........
        //001 给div标签注册两个点击事件,一个鼠标移入事件
        $("div").click(function () {
            console.log("点击了标签--1");
        })

        var callBack = function () {
            console.log("点击了标签--2");
        };

        $("div").click(callBack)

        $("div").mouseenter(function () {
            console.log("移入了标签");
        })

        //002 点击按钮的时候,取消div标签上面对应的事件
        $("button").click(function () {

            //(0) 如何取消标签的事件 ==>使用off方法
            //第一个参数:事件的类型
            //第二个参数:函数,指定要取消的是哪一个具体的事件
            //注意点:回调函数应该和事件注册时的回调函数是同一个

            console.log("取消了div上面的事件");
            //(1) 取消div标签上面所有的click事件
            //$("div").off("click");

            //错误的演示(无效)
            /*
            $("div").off("click",function () {
                console.log("点击了标签--2");
            });*/
            //(2) 取消div标签上面"点击了标签--2"这个事件
            $("div").off("click",callBack);
        })
    })
</script>
<div>我是div</div>
<button>取消div的点击事件</button>
</body>
</html>

DOM操作相关的方法

[1] CSS方面
css
addClass
removeClass
toggleClass
hasClass

[2] 节点方法
(1) 创建和插入 append appendTo prepend prependTo insertBefore …
(2) 设置内容 html() text()
(3) 删除和清空 remove() empty()
(4) 复制和替换 clone() replaceWith | replaceAll
(5) 操作属性(节点) prop removeProp attr removeAttr…

jQuery节点的创建和插入


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>18-jQuery节点的创建和插入</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
<script src="js/jquery-3.3.1.js"></script>
<script>
    $(function () {
        //...........
        //[1] 节点的创建
        //创建一个div标签,并且添加到class为box的标签中
        /*
        var oDiv = document.createElement("div");
        oDiv.innerHTML ="新创建的标签";
        var oBox = document.getElementsByClassName("box")[0];
        oBox.appendChild(oDiv);*/


        //var oDiv = $("<div></div>");
        //oDiv.html("新创建的标签T");
        //$(".box").append(oDiv);
        //$(".box").append($("<div>新创建的标签ABC</div>"));
        //$(".box").prepend($("<div>新创建的标签ABC</div>"));

        //[2] 节点的插入操作
        //(1) jQ.append(jQ对象|字符串选择器)  把参数中的标签插入到jQ对象选中标签内容的后面
        //(2) jQ.prepend()                   把参数中的标签插入到jQ对象选中标签内容的前面
        //(3) jQ.appendTo() === jQ.append
        //(4) jQ.prependTo() ==  jQ.prepend()

        //$(".class1").append($("li"));
        //$(".class1").appendTo($("li"));

        //[3] insertBefore | insertAfter
        //把新创建的标签插入到样式为class1标签的前面
        //$($("<div>新创建的标签ABC</div>").insertBefore($(".class1")));
        //$($("<div>新创建的标签ABC</div>").insertAfter($(".class1")));
    })
</script>
<div class="box">div1</div>

<div class="class1">div_A</div>
<div class="class1">div_B</div>
<ul>
    <li>我是li1</li>
    <li>我是li2</li>
    <li>我是li3</li>
    <li>我是li4</li>
    <li>我是li5</li>
</ul>
</body>
</html>

jQuery节点的删除和清空


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>19-jQuery节点的删除和清空</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
<script src="js/jquery-3.3.1.js"></script>
<script>
    $(function () {
        //...........
        //[1] 删除操作 把自己以及自己的所有子孙节点都删除
       $("button:eq(0)").click(function () {
           $(".box").remove();
       })

        //[2] 清空操作 把自己的内容以及所有的子孙节点删除,自己还在
        $("button:eq(1)").click(function () {
            $(".box").empty();
        })
    })
</script>
<div class="box">
    <div>div1</div>
    <div>div2</div>
    <div>div3</div>
</div>
<button>删除</button>
<button>清空</button>
</body>
</html>

jQuery节点的复制和替换


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>20-jQuery节点的复制和替换</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
<script src="js/jquery-3.3.1.js"></script>
<script>
    $(function () {
        //...........
        $("div").click(function () {
            alert("点击了div");
        })

        //[1] 节点的复制
        //方法:clone()
        //需求:复制页面中的div标签,插入到li标签内容的后面
        //说明:默认情况下,并不会复制标签身上的事件,如果需要复制标签的事件,请传参数(true)
        $("button").eq(0).click(function () {
            $("li").append($("div").clone(true))
        })

        //[2] 节点的替换
        //replaceWith  == replaceAll
        $("button").last().click(function () {
            //$("div").replaceWith("大吉大利,今晚吃肉");
            //$("div").replaceWith("<h1>嘿嘿 给你一个神秘莫测的微笑</h1>");
            //$("div").replaceWith($("li"));

            //这是一个剪切的操作
            $("div").clone().replaceAll($("li"));
        })

    })
</script>
<div>天王盖地虎,小鸡炖蘑菇</div>
<ul>
    <li>我是li0</li>
</ul>
<button>复制</button>
<button>替换</button>
</body>
</html>

jQuery操作属性和属性节点


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>21-jQuery操作属性和属性节点</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
<script src="js/jquery-3.3.1.js"></script>
<script>
    $(function () {
        //...........
        //概念(1)--DOM对象
        //DOM对象:标签就是DOM对象  比如div标签|body标签
        //DOM对象是对象类型.所以可以拥有属性和方法
        var oDiv = $("div").get(0);
        /*
        oDiv.showInfo = function () {
            alert("我是div这个标签的方法");
        }
        oDiv.showInfo();*/

        //概念(2)--属性
        //DOM的属性,在这里name被称为DOM标签的属性,属性直接保存在标签身上
        //oDiv.name = "div的名字";
        //console.log(oDiv.name);

        //相关方法
        //[1] prop()           批量的操作[添加|修改|查询]DOM标签的属性
        //[2] removeProp(key)  批量的删除DOM标签的属性
        $("div").prop("a","AAAA");    //添加属性a,对应的值是AAAA
        $("div").prop("a","BBBB");    //修改
        console.log($("div").prop("a"));//查询,只获取第一个标签的属性对应的值
        console.log($("div"));

        //概念(3)--属性节点
        //DOM的属性节点 比如class,class是属性节点的名称,box是属性节点class对应的值,属性节点保存到DOM标签中attributes的属性中,(对象)
        //console.log(oDiv.className);

        //相关方法
        //[1] attr()             批量的设置[添加|修改|查询]DOM标签的属性节点
        //[2] removeAttr(key)    批量的删除DOM标签的属性节点
        //
        $("div").attr("a","AAAA");
        $("div").attr("a","A__bbb");
        console.log($("div").attr("a"));
        console.log($("div").attr("class"));

        //$("img").attr("src","图片的路径");
        $("div").removeAttr("xx");
    })
</script>
<div class="box" xx="heihei">我是div1</div>
<div>我是div2</div>
<img src="images/01.png">
</body>
</html>

jQuery 案例

在这里插入图片描述


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/jquery.datetimepicker.css">
    <script src="js/jquery-3.3.1.js"></script>
    <script src="js/jquery.datetimepicker.full.js"></script>
    <script src="js/store.min.js"></script>
    <script src="js/index.js"></script>



</head>
<body>
<div class="backTop">
    <img src="src/Top.jpg">
</div>
<div class="banner">
    <img src="src/logo.png">
</div>
<div class="nav">
    <div class="nav_content">
        <img src="src/logo.png">
        <input type="text" placeholder="请输入...." id="textID">
        <input type="submit" value="添加" id="submitID">
    </div>
</div>
<div class="content">
    <div class="content_header">
        <ul>
            <li class="action">待完成事项</li>
            <li>已完成事项</li>
        </ul>
    </div>
    <div class="content_list current">
        <ul class="taskList">
        </ul>
    </div>
    <div class="content_list">
        <ul class="finish_taskList">
            <li>
            <input type="checkbox" class="checkboxClass">
            <span class="titleClass">任务_A</span>
            <span class="detailClass">详情</span>
            <span class="deleteClass">删除</span>
            </li>
            <li>
            <input type="checkbox" class="checkboxClass">
            <span class="titleClass">任务__B</span>
            <span class="detailClass">详情</span>
            <span class="deleteClass">删除</span>
            </li>
        </ul>
    </div>
</div>

<div class="mask">
    <div class="detail_content">
        <div class="detail_header">
            <span class="title">我是标题</span>
            <span class="close">关闭</span>
        </div>
        <div class="detail_body">
            <textarea class="textareaClass"></textarea>
            <input type="text" class="timeClass">
            <button class="update">更新</button>
        </div>
    </div>
</div>
</body>
</html>

/**
 * Created by Administrator on 2018/4/26.
 */
$(function () {

    //[1] 实现吸顶效果
    /*
    * [1] 实现吸顶效果
    * 实现思路
    * 思路:监听页面的滚动,根据临界值来判断是否显示顶部效果
    * 临界值判断:滚动条和样式为banner的标签的高度比较
    * 如何显示顶部效果
    * (1) 头部相关标签整体设置定位等样式
    * (2) logo要显示出来
    * */
    var navTop = $(".nav").offset().top;
    $(document).scroll(function () {
        var scrollTop = $(document).scrollTop();
        if(scrollTop > navTop)
        {
            //(1) 头部相关标签整体设置定位等样式
            $(".nav").css({
                position:"fixed",
                top:0,
                "box-shadow":"0px 1px 3px rgba(0,0,0,0.5)"
            })

            //(2) logo要显示出来
            $(".nav_content img").css({
                opacity:1
            })

            //(3) 显示返回顶部的图标
            $(".backTop").show();

        }else{
            //恢复默认的效果
            $(".nav").css({
                "box-shadow":"none",
                position:"absolute",
                top:100,
            })

            $(".nav_content img").css({
                opacity:0
            })

            $(".backTop").hide();
        }
    })

    //[2] 返回顶部
    /*
    * [2] 返回顶部
    * 实现思路
    * (1) 在页面中添加对应的标签,设置样式
    * (2) 监听页面的滚动,满足条件显示,否则隐藏
    * (3) 点击该标签的时候,返回顶部
    * */
    $(".backTop").click(function () {
        $("html").animate({
            scrollTop:0
        })
    })

    //[3] 实现添加任务的功能
    /*
    * [3] 实现添加任务的功能
    * 实现思路
    * 001 获取页面中的添加标签,注册点击事件,事件发生后:
    * (1) 禁用submit标签的默认行为
    * (2) 获取文本输入框中的内容,检验
    * (3) 根据文本数据来创建对应li标签
    * (4) 把创建好的标签插入到页面中
    * (5) 实现标签插入的动画效果
    * (6) 任务添加成功之后,清空文本输入框
    *
    * 002 实现数据的持久化存储(硬盘)
    * 实现思路
    * (1) 添加数据的时候,除了更新UI之外,还应该把这个数据保存起来
    * (2) 当我们重新加载页面的时候,应该先读取之前保存的数据,根据该数据来生成UI界面
    *
    * store.js文件的使用
    * 相关方法:
    * [1] store.set(key,data)   添加|修改
    * [2] store.get(key)        查询
    * [3] store.clear()         清空
    * 数据存储到哪里了 ==> local storage(本地存储)
    * */
    //尝试加载本地存储里面的数据,如果没有那么就初始化为空数组
    var listArrayData = store.get("listKey") || [];
    //根据初始数据来设置UI界面
    initView();
    $("#submitID").click(function (e) {
        //(1) 禁用submit标签的默认行为
        e.preventDefault();
        //(2) 获取文本输入框中的内容,检验
        var resultText = $.trim($("#textID").val());
        if(resultText.length === 0)
        {
            alert("请输入具体的任务!");
            return;
        }
        //(3) 把数据保存起来,并且和本地存储的数据同步
        var itemObj = {
            textValue:resultText,
            isChecked:false,
            detailInfo:"默认的详情",
            time:"2008-08-08"
        }
        listArrayData.push(itemObj);
        store.set("listKey",listArrayData);

        //(4) 根据最新的数据刷新整个页面(性能不太好)
        initView();
        //(5) 实现标签插入的动画效果
        $(".taskList >li").first().hide().slideDown();

        //(6) 清空文本输入框
        $("#textID").val("");
    })

    //根据数据刷新页面
    function initView() {
        //把页面中已经存在的li标签全部清除
        $(".taskList").empty();
        $(".finish_taskList").empty();

        for (var i = 0; i < listArrayData.length; i++) {
            var listItem = listArrayData[i];
            if(listItem == undefined || !listItem) continue;
            var tpl =
                '<li index='+i+'>'+
                '<input type="checkbox" class="checkboxClass" '+(listItem.isChecked?"checked":"")+'>'+
                '<span class="titleClass">'+listItem.textValue+'</span>'+
                '<span class="detailClass">详情</span>'+
                '<span class="deleteClass">删除</span>'+
                '</li>';
            //(4) 把创建好的标签插入到页面中
            if(listItem.isChecked)
            {
                $(".finish_taskList").prepend(tpl);
            }else
            {
                $(".taskList").prepend(tpl);
            }

        }
    }

    //[4] 实现删除任务的功能
    /*
    * [4] 实现删除任务的功能
    * 实现思路
    * (1) 获取页面中对应的标签(删除),注册点击事件(事件委托)
    * (2) 点击事件发生后:
    *       A: 更新UI
    *       B: 同步数据
    * */
    $(".content_list").on("click",".deleteClass",function () {
        //A:先同步数据
        //问题:点击删除标签的时候,要删除本地保存数组中对应的元素? 如何对应?
        //001 先获取删除标签当前的父节点(li标签)
        var node = $(this).parent();

        //002 获取li标签上面的属性节点(index)
        var _index = node.attr("index");

        //003 找到当前操作对应的数据,删除对应的元素
        delete listArrayData[_index];
        store.set("listKey",listArrayData);

        //B:更新UI
        //方式(1) 直接根据最新的数据重新生成整个页面
        //initView();   //不建议(性能不好)

        //方式(2) 把当前的li标签移除
        node.slideUp(1000,function () {
            node.remove();
        })

    })

    //[5] 实现菜单切换
    /*
    * [5] 实现菜单切换
    * 实现思路
    * (1) 给对应的li标签添加点击事件
    * (2) 点击了标签后:
    *       A: 设置让当前的标签成为选中状态
    *       B: 显示对应的任务列表(切换)
    * */
    $(".content_header li").click(function () {
        //A: 设置让当前的标签成为选中状态
        $(this).addClass("action").siblings().removeClass("action");
        // B: 显示对应的任务列表(切换)
        var index = $(this).index();
        $(".content_list").eq(index).addClass("current").siblings().removeClass("current");
    })


    //[6] 标记已经完成任务
    /*
    * [6] 标记已经完成任务
    * 实现思路
    * 切入点:给复选框添加事件,监听事件的执行
    * 分析:如果选中复选框,应该把当前的标签切换到已完成,否则应该切换到待完成中
    * (1) 获取当前复选框的状态(选中|没选中)
    * (2) 把当前的状态保存到数据中,同步到本地缓存中
    * (3) 把任务的完成状态体现在UI中(更新UI)
    * */
    $(".content_list").on("click",".checkboxClass",function () {
        //(1) 获取状态
        var isCheck = $(this).is(":checked");
        //(2) 把当前状态同步到数据
        var node = $(this).parent();
        var _index = node.attr("index");
        listArrayData[_index].isChecked = isCheck;
        store.set("listKey",listArrayData);

        //(3) 更新UI
        initView();
    })

    //[7] 实现点击详情展示对应详情界面功能
    /*
    * [7] 实现点击详情展示对应的标签
    * 实现思路
    * (1) 通过事件委托来给标签添加点击事件
    * (2) 弹出模态窗口
    * (3) 显示对应标题信息
    * (4) 点击关闭标签以及模态窗口的时候要关闭
    * */
    var index ;
    $(".content_list").on("click",".detailClass",function () {

        //(1) 弹出模态窗口
        $(".mask").show();
        //(2) 获取对应标签的数据
        var node = $(this).parent();
        var _index = node.attr("index");
        index = _index;
        var itemObj = listArrayData[_index];
        //(3) 根据当前标签的数据来展示UI
        $(".title").text(itemObj.textValue);
        $(".textareaClass").val(itemObj.detailInfo);
        $(".timeClass").val(itemObj.time);

    })

    $(".close").click(function () {
        $(".mask").hide();
    })

    $(".mask").click(function () {
        $(this).hide();
    })

    $(".detail_content").click(function (e) {
        e.stopPropagation();
    })

    /*
    * [8] 实现更新详情和时间
    * 实现思路
    * (1) 给更新按钮提添加点击事件
    * (2) 获取具体的详细信息和时间信息保存起来
    * (3) 关闭模态窗口
    * */
    $(".update").click(function () {
        //(1) 获取具体的详细信息和时间信息
        var info = $(".textareaClass").val();
        var time = $(".timeClass").val();

        //(2) 保存数据(同步)
        //console.log(index);
        //console.log(listArrayData[index]);
        listArrayData[index].detailInfo = info;
        listArrayData[index].time = time;
        store.set("listKey",listArrayData);
        //(3) 关闭模态窗口
        $(".mask").hide();
    })

    $.datetimepicker.setLocale("zh");
    $(".timeClass").datetimepicker();
})