针对上一篇jQuery进行一点补充

jQuery事件

• 单个事件注册
  • 语法：element.事件(function(){});例如：$("div").click(function(){事件处理程序}),其他事件与原生基本一致
  • 比如：mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll等

事件绑定

• 事件处理on()绑定事件
  • on()方法在匹配元素上绑定一个或多个事件的事件处理函数
  • 语法规范：element.on(events,[selector],fn)
    • events：一个或多个用空格分隔的事件类型，如：click或keydown
    • selector:元素的子元素选择器
    • fn:回调函数 即绑定在元素身上的侦听函数

<style>
    div{
        width: 100px;
        height: 100px;
        background-color: #777;
    }
</style>
<div></div>
<!-- 此处引入jQuery文件,你就当这个文件存在吧 -->
<script src="jquery.min.js"></script>
<script>
    $(function() {
        // 单个事件注册
        $("div").click(function() {
            $(this).css("background", "blue");
        });
        $("div").mouseenter(function() {
            $(this).css("background", "red");
        });

        // 事件处理on()
        $("div").on({
            click: function() {
                $(this).css("background", "blue");
            },
            mouseenter: function() {
                $(this).css("background", "red");
            }
            mouseleave: function() {
                $(this).css("background", "purple");
            }
        });
    })
</script>

on()方法的优势:

1. 可以绑定多个事件，多个事件处理程序

$("div").on({
    mouseover: function(){},
    mouseout: function(){},
    click: function(){}
});

// 如果事件类型是相同的，可以使用下面这种方法
$("div").on("mouseover mouseout", function() {
    $(this).toggleClass("current");
})

2. 可以实现事件委派操作，事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素

$('ul').on('click','li',function() {
    alert('hello world!');
});

在此之前有bind()、live()、delegate()等方法来处理事件绑定或者事件委派，最新版本的请用on替代他们

解绑事件

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

$("p").off(); // 解绑p标签所有事件处理程序
$("p").off("click"); // 解绑p标签元素上面的点击事件
$("ul").off("click", "li"); // 解绑事件委托

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

$("p").one("click", function() {
    alert(57); // 只触发一次
})

自动触发事件trigger()

1. 元素.事件() 第一种简写形式，会触发元素的默认行为
2. 元素.trigger("事件") 第二种自动触发模式，会触发元素的默认行为

<style>
    div{
        width: 100px;
        height: 100px;
        background-color: blue;
    }
</style>
<div></div>
<script>
    $(function() {
        $("div").on("click",function() {
            alert(5);
        });
        // 第一种 元素.事件()
        $("div").click();

        // 第二种 元素.trigger("事件")
        $("div").trigger("click");
    })
</script>

3. 元素.triggerHandler("事件") 第三种自动触发模式，这种方法不会触发元素的默认行为

jQuery事件对象

事件触发，就会有事件对象的产生

• element.on(events, [selector],function(event) {})
• 阻止默认行为：event.preventDefault() 或者 return false
• 阻止事件冒泡：event.stopPropagation()

<!-- 阻止事件冒泡 -->
<style>
    div{
        width: 100px;
        height: 100px;
        background-color: blue;
    }
</style>
<div></div>
<script>
    $(function() {
        $(document).on("click",function() {
            alert(7);
        });
        $("div").on("click",function() {
            alert(5);
            event.stopPropagation();
        });
    })
</script>

jQuery里面的一些常用方法

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

• 语法：$.extend([deep], target, object1, [objectN])
  • deep:如果设为true为深拷贝，默认为false浅拷贝
  • target:要拷贝的目标对象
  • object1:待拷贝到第一个对象的对象

$(function() {
    /* let targetObj = {};
    let obj = {
        id: 1,
        name: "andy"
    };
    $.extend(targetObj, obj);
    console.log(targetObj); */

    /* let targetObj = {
        id: 0
    };
    let obj = {
        id: 1,
        name: "andy"
    };
    $.extend(targetObj, obj);
    console.log(targetObj); // 会覆盖targetObj里面原来的数据 */

    let targetObj = {
        id: 0
    };
    let obj = {
        id: 1,
        name: "andy"
        byc: {
            age: 18
        }
    };
    $.extend(targetObj, obj);
    console.log(targetObj);
})

• 浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象
• 深拷贝，前面加true,完全克隆(拷贝的是对象，不是地址)，修改目标对象不会影响被拷贝对象

多库共存

• 问题概述：jQuery使用$作为标识符，随着jQuery的流行，其它JS库也会用这种$作为标识符，这样一起使用会引起冲突

• 客观需求：需要一个解决方案，让jQuery和其他的JS库不存在冲突，可以同时存在，这就叫做多库共存

• jQuery解决方案

1. 把里面的符号统一改为jQuery，例如：jQuery("div")
2. 让jQuery释放对$控制权，让用户自己决定(jQuery变量规定新的名称)：$noConflict() let xx = $noConflict();

jQuery插件

jQuery功能比较有限，想要更复杂的特效效果，可以借助于jQuery插件完成

• 注意：这些插件也是基于jQuery来完成的，所以必须要先引入jQuery文件，因此也称为jQuery插件
• 推荐两个JS插件常用的网站http://www.jq22.com/和http://www.htmleaf.com/

• jQuery插件使用步骤
  • 引入相关文件(jQuery文件和插件文件)
  • 复制相关html、css、js(调用插件)

推荐案例练习：瀑布流(图片懒加载)、轮播图(3D切换版)

• 图片懒加载：就是当我们页面滚动到可视区域在显示图片(图片使用延迟加载可提高网页下载速度，它也能帮助减轻服务器负载)