jQuery中，一般使用双引号
学习jQuery，主要学习其js库里面的函数

1. bootstrap JS 插件：https://www.bootcss.com/

2. jQuery 插件库: http://www.jq22.com/

3. jQuery 之家(常用): http://www.htmleaf.com/

4. 图片懒加载: jquery 插件库 EasyLazyload

5. 全屏滚动（fullpage.js）
gitHub： https://github.com/alvarotrigo/fullPage.js
中文翻译网站： http://www.dowebok.com/demo/2014/77/

6. 全球最大包共享平台,检索包： https://www.npmjs.com/

7. 下载包： https://registry.npmjs.org/ ，通过npm包管理工具下载

8. Express中文官网： https://www.expressjs.com.cn/

9. 在线版本的jquery（项目引入jquery）： https://staticfile.org/

点击一下就可以复制

1.jQuery概述

2.jQuery的基本使用

2.1 jQuery的下载

2.2 jQuery的使用步骤

2.3 jQuery的入口函数

2.4 jQuery的顶级对象$

2.5 jQuery对象和DOM对象

3.jQuery常用API

3.1 jQuery选择器

隐士迭代：选择相同DOM元素进行内部循环，实现批量添加css()方法

综合案例

3.2 jQuery样式操作

3.3 jQuery效果

案例

3.4 jQuery属性操作

3.5 jQuery内容文本值

3.6 jQuery元素操作

元素.remove() 常用

3.7 jQuery尺寸、位置操作

4.jQuery事件

4.1 jQuery事件注册

4.2 jQuery事件处理

4.3 jQuery事件对象

5. jQuery其他方法

5.1 jQuery拷贝对象

5.2 多库共存

5.3 jQuery插件

可以修改插件参数

jQuery 插件库 www.jq22.com/

进入链接，查看使用方法。可以在入口函数设置参数

6. 综合案例

$(function () {
    // alert(11)
    // 事件对象判断用户按下的是不是回车键
    load()
    // 1.按下回车，把完整数据 存储到本地存储里面
    $("#title").on("keydown", function (event) {
        if (event.keyCode === 13) {
            if ($(this).val() === '') {
                alert('请添加ToDo')
            } else {
                // alert(11)
                // 1.1 读取本地存储原来的数据
                var local = getData()
                // console.log(local)
                // 1.2 local数组进行更新数据。获取表单数据，添加到本地存储取出来的数组中
                local.push({ title: $(this).val(), done: false })
                // 把这个数组local 存储给本地存储
                savaData(local)
                // 2.渲染页面 把本地存储更新后的数据渲染到页面中
                load()
            }
            $(this).val('')
        }
    })
    // 3.todolist 删除操作
    // 3.1 获取本地存储
    $("ol,ul").on("click", "a", function () {
        // alert(11)
        var data = getData()
        // console.log(data)
        // 3.2 获取本条li>a的索引号 修改数据
        // 获取自定义属性用attr
        var index = $(this).attr("id")
        // console.log(index)
        // 修改数据
        data.splice(index, 1)
        // 3.3 修改后的数据保存到本地存储中
        savaData(data)

        // 3.4 重新渲染页面
        load()
    })
    // 4.todolist 正在进行 和 已经完成 操作
    $("ol,ul").on("click", "input", function () {
        // 4.1获取本地存储
        var data = getData()
        // console.log(data)
        // 4.2修改数据
        // 修改data的done固有属性(prop())为相反值
        var index = $(this).siblings("a").attr("id")
        // data[?]=?
        data[index].done = $(this).prop("checked")
        console.log(data)
        // 4.3存放到本地存储
        savaData(data)
        // 4.4渲染页面
        load()
    })


    // 取出本地数据
    function getData() {
        var data = localStorage.getItem("todolist")
        if (data !== null) {
            return JSON.parse(data)
        } else {
            return []
        }
    }
    // 保存本地数据
    function savaData(data) {
        localStorage.setItem("todolist", JSON.stringify(data))
    }
    // 渲染页面
    function load() {
        // 获取本地数据
        var data = getData()
        var todoCount = 0 // 代办个数
        var doneCount = 0 // 已完成个数

        // 先清空ol,ul
        $("ol").empty()
        $("ul").empty()
        // 遍历本地存储的数据，有几条数据，给ol中生成几个li

        $.each(data, function (i, n) {
            // console.log(i)
            // 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)

    }

})