03-jquery第三天学习笔记

1. jquery事件

1.1 jquery事件注册和处理

1. 事件注册只能注册单个事件

2. 事件处理on

   1. 语法：元素.on(‘事件类型’，‘子元素’，fn)
   2. 优点：(1)可以实现多个事件的绑定(2)可以实现事件委托，提升效率(3)可以给未来动态创建的元素绑定事件
   3. 事件解绑：元素.off(‘事件’)，为空时，解除元素身上的所有的事件。
   4. 使用one()绑定事件，只触发一次

3. 自动触发事件trigger(‘事件’)/triggerHander(‘事件’)，后一个不会触发元素的默认行为

    $(function() {
            // 1. 单个事件注册
            $("div").click(function() {
                $(this).css("background", "purple");
            });
            $("div").mouseenter(function() {
                $(this).css("background", "skyblue");
            });

            // 2. 事件处理on
            // (1) on可以绑定1个或者多个事件处理程序
            $("div").on({
                mouseenter: function() {
                    $(this).css("background", "skyblue");
                },
                click: function() {
                    $(this).css("background", "purple");
                },
                mouseleave: function() {
                    $(this).css("background", "blue");
                }
            })
            // 绑定两个事件，触发时都执行函数
            $("div").on("mouseenter mouseleave", function() {
                $(this).toggleClass("current");
            });
        })

// 微博发布
    $(function() {
            //添加
            $('.btn').on('click',function() {
                let li = $('<li></li>')
                li.html($('.txt').val() + "<a href='javascript:;'> 删除</a>")
                $('ul').prepend(li)
                li.slideDown()
                $('.txt').val('')
            })

            // 删除
            $('ul').on('click','a',function() {
               $(this).parent().remove() 
            })
        })

1.2 事件对象

1. 事件触发，就会有事件对象的产生。
2. 通过事件对象可以阻止浏览器默认行为，阻止冒泡等

2. jQuery其他方法

2.1 jQuery拷贝对象

1. $.extend(true/false,拷贝的对象，被拷贝的对象1，被拷贝的对象2，…)方法，true为深拷贝，false为浅拷贝
2. 拷贝会覆盖原来的数据

2.2 多库共存

1. jQuery与其他js库的$可能冲突，故需要解决多库共存
2. 方法：
   1. $符号冲突，就将jQuery的$符号改为jQuery
   2. 自定义jQuery名字：let 自定义名 = jQuery.noConflict()

2.3 jquery插件

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

2. jQuery之家 http://www.htmleaf.com/

3. 图片懒加载：先只加载用户可视区域，滚动时，再进行加载之后的图片。降低服务器负载，提升性能。

4. 使用EasyLazyload插件，实现图片懒加载

5. 全屏滚动插件-fullpage.js。

   1. gitHub： https://github.com/alvarotrigo/fullPage.js
   2. 中文翻译网站： http://www.dowebok.com/demo/2014/77/

6. bootstrap js插件：bootstrap框架也是依赖于jQuery开发的，因此里面的js插件使用，也必须引入jQuery文件

// todolist案例
    $(function() {
    // 先渲染
    load()
    $('#title').on('keydown',function(e) {
        if(e.key === "Enter") {
            // 获取本地存储
            let local = getData()
            console.log(local);
            // 将输入框内容存入local数组
            local.push({title:$(this).val(),done:false})
            // 保存本地存储
            saveData(local)
            // 渲染
            load()
        }
    })
    // 获取本地存储
    function getData() {
        let data = localStorage.getItem('todolist')
        if(data !== null) {
            return JSON.parse(data)
        }else{
            return []
        }
    }
    // 保存本地存储
    function saveData(data) {
        localStorage.setItem('todolist',JSON.stringify(data))
    }

    // 渲染函数
    function load() {
        // 先读取数据
        let data = getData()
        // 先清空ol
        $('ol').empty()
        // 给ol添加小li
        $.each(data,function(i,n) {
            $('ol').prepend(`<li><input type="checkbox"> <p>${n.title}</p> <a href="javascript:;"></a></li>`)
        })
    }
})