 $('div').on({
            mouseenter: function() {
                $(this).css('backgroundColor', 'pink');
            },
            click: function() {
                $(this).css('backgroundColor', 'skyblue')
            },
            mouseleave: function() {
                $(this).css("background", 'purple')
            }
        })

 $('div').on('mouseenter mouseleave', function() {
            $(this).toggleClass('current');
        })

$('ol').on('click', 'li', function() {
            alert(111);
        })
var li = $('<li>你好</li>');
$('ol').append(li);

优势：

①可以绑定一个或多个事件处理程序

②可以实现事件委派

③可以给动态创建的元素绑定事件此时$(this)是 [selector]

事件解绑

off()可以移除通过on()方法添加的事件处理程序

off()就是解除了所有事件

off(‘事件’) 解除某个事件

父级.off(‘事件’,’子级’) 解除了事件委托

如果有的事件只想触发一次，可以使用one()来绑定事件

自动触发事件

①element.事件()

②element.trigger(“事件”)

③element.triggerHandler(“事件”) 不会触发元素的默认行为

事件对象

阻止默认行为 preventDefault()或者return false

阻止冒泡 stopPropagation()

二、隐式迭代

遍历内部的DOM元素（伪数组形式存储）的过程叫做隐式迭代

也就是，给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用

三、链式编程

// $('.main div').eq(index).show();
// $('.main div').eq(index).siblings('div').hide();
// 链式编程
 $('.main div').eq(index).show().siblings('div').hide();

四、排他思想

 $('button').click(function() {
            $(this).css('backgroundColor', 'pink');
            $(this).siblings('button').css('backgroundColor', '');
        })

五、jQuery拷贝对象

如果想要把某个对象拷贝给另一个对象使用，此时使用$.extend()方法

$.extend([deep],target,object1,[objectN])

deep：如果设为true为深拷贝，默认为false浅拷贝

target：要拷贝的对象

object1：待拷贝到第一个对象的对象

objectN：待拷贝到第N个对象的对象

// var targetObj = {};
// var obj = {
//     id: 1,
//     name: 'andy'
// }
// $.extend(targetObj, obj);
// console.log(targetObj); ///Object{id:1,name:"andy"}
var targetObj = {
    id: 0,
    age: 24,
};
var obj = {
    id: 1,
    name: 'andy',
    msg: {
       age: 18
    }
}
$.extend(targetObj, obj);
console.log(targetObj);//Object{id:1,age:24,name:"andy",msg:{...}}

浅拷贝是把被拷贝的对象复杂数据类型的地址拷贝给目标对象，修改目标对象会影响被拷贝对象

深拷贝是完全克隆（拷贝的对象，而不是地址），修改目标对象不会影响被拷贝对象

相同的数据会修改，不同的数据会保存

六、jQuery多库共存

让Jquery和其他的js库不存在冲突，可以同时存在

解决方案：

①把里面的$符号统一改为jQuery

②jQuery变量规定新的名称：$.noConflict()

七、jQuery插件

①jquery之家

②图片的懒加载

图片使用延迟加载在可提高页面下载速度，他也能帮助减轻服务器负载

当我们页面滑动到可视区域，再显示图片

在jquery插件库中搜索懒加载easylazyload

注意：此时的js引入文件和js调用必须写到DOM元素（图片）最后面

③全屏滚动插件 fullpage.js github

④bootstrap插件

补充知识点：

火狐刷新不会重置表单元素

【jQuery基础语法】下

一、事件

事件注册