Jquery day_3

1.1 Jquery 事件注册

语法:
element.事件(function(){})
$('div').click(function(){ 事件处理程序})
// 单个绑定事件注册
       $(function() {
            // 1. 单个事件注册
            $("div").click(function() {
                $(this).css("background", "purple");
            });
            $("div").mouseenter(function() {
                $(this).css("background", "skyblue");
            

1.2 jquery 事件处理

• on(): 用于事件绑定，目前最好用的事件绑定方法
• off(): 事件解绑
• trigger() / triggerHandler(): 事件触发

方法优势1 : 可以绑定多个事件，多个事件处理
            // (1) on可以绑定1个或者多个事件处理程序
            // $("div").on({
            //     mouseenter: function() {
            //         $(this).css("background", "skyblue");
            //     },
            //     click: function() {
            //         $(this).css("background", "purple");
            //     }
            // });
            - 多个事件处理相同 toggleClass()
           $("div").on("mouseenter mouseleave", function() {
                $(this).toggleClass("current");
            });
方法优势2: 可以实现事件委派操作
// click 是绑定在ul 身上的，但是 触发的对象是 ul 里面的小li
// $("ul li").click();
            $("ul").on("click", "li", function() {
                alert(11);
            });
 方法优势3 : 动态创建的元素，click()没有办法绑定事件，on()可以给动态生成的元素绑定事件
 // 第一个是事件类型；第二个是处理事件；第三个回调函数
      $("ol").on("click", "li", function() {
                alert(11);
            })
            var li = $("<li>我是后来创建的</li>");
            $("ol").append(li);

1.2.1 事件处理off() 解绑事件

语法:
// 1. off() 可以移除通过on()方法添加的事件处理程序
$('p').off()   // 解绑p元素所有事件处理程序
$('p').off('click')  // 解绑p元素上面的点击事件
$('p').off('click','li')   // 解绑事件委托
- 如果事件只触发一次，可以使用one()来绑定事件
// 2. one() 但是它只能触发事件一次
            $("p").one("click", function() {
                alert(11);
            })

1.2.2 事件处理 trigger() 自动触发事件

第一种：trigger()
- element.click() 
// 自动触发事件
//  元素.事件()
 // $("div").click();会触发元素的默认行为
- element.trigger('type')  //自动触发模式
// 元素.trigger("事件")
      // $("div").trigger("click");会触发元素的默认行为
      $("input").trigger("focus");
第二种：triggerHandler() 一个会获取焦点，一个不会
- element.triggerHandler(type)   // 第三种自动触发模式
 // 元素.triggerHandler("事件") 就是不会触发元素的默认行为
      $("input").on("focus", function() {
        $(this).val("你好吗");
      });

1.3 jQuery 事件对象

语法：
element.on(enents,[selector],function(event) {} )
阻止默认行为: event.preventDefault 或者 return false
阻止冒泡: event.stopPropagation()

1.4 Jquery 拷贝对象

语法:
$.extend([deep],target,object1,[objectN])
- deep: 如果为true是深拷贝，默认是false 浅拷贝
- target: 要拷贝的目标对象
- object1: 代拷贝到第一个对象的对象
- objectN: 代拷贝到第N个对象的对象
- 浅拷贝目标对象引用的被拷贝的对象地址，修改目标对象会影响被拷贝对象
- 深拷贝，前面加true，完全克隆，修改目标对象不会影响被拷贝对象

代码演示：

<script>
        $(function() {
            // 1.合并数据
            var targetObj = {};
            var obj = {
                id: 1,
                name: "andy"
            };
            // $.extend(target, obj);
            $.extend(targetObj, obj);
            console.log(targetObj);
   
            // 2. 会覆盖 targetObj 里面原来的数据
            var targetObj = {
                id: 0
            };
            var obj = {
                id: 1,
                name: "andy"
            };
            // $.extend(target, obj);
            $.extend(targetObj, obj);
            console.log(targetObj); 
        })
    </script>

1.5 jquery 多库共存

语法:
1. 把里面的$符号 统一改为Jquery。比如jQuery('div')
2.jQuery变量规定新的名称：$.noConflict() var xx = $.noConflict()

1.6 jQuery 插件

Query 功能比较有限，想要更复杂的特效效果，可以借助于 jQuery 插件完成。 这些插件也是依赖于jQuery来完成的，所以必须要先引入

jQuery文件，因此也称为 jQuery 插件。

jQuery 插件常用的网站：

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

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

   jQuery 插件使用步骤：

3. 引入相关文件。（jQuery 文件 和 插件文件）

4. 复制相关html、css、js (调用插件)。

1.7 图片的懒加载

图片的懒加载就是：当页面滑动到有图片的位置，图片才进行加载，用以提升页面打开的速度及用户体验。（下载略）

代码演示

懒加载只需引入html 和 js操作 即可，此插件不涉及css。

• 1.引入js

<script src="js/EasyLazyload.min.js"></script>
<script>
    lazyLoadInit({
        showTime: 1100,
        onLoadBackEnd: function(i, e) {
            console.log("onLoadBackEnd:" + i);
        },
        onLoadBackStart: function(i, e) {
            console.log("onLoadBackStart:" + i);
        }
    });
</script>

• 2.引入html

 <img data-lazy-src="upload/floor-1-3.png" alt="">