jQuery——事件与插件开发

jquery事件的发展史

名称	用法	m描述
click()	`$('div').click(function(){})`	(1)不支持同时注册：不能一行代码同时注册两个事件，需要写两行 (2)不支持动态注册：如果是新创建的元素，没有事件。需要重新注册
bind()	$(‘div’).bind(‘click mouseover’,function(){})	(1)支持同时注册 (2)不支持动态注册
delegate()	$(‘body’).bind(‘click mouseover’,‘div’,function(){})	(1)支持同时注册 (2)支持动态注册
on()	$(‘body’).bind(‘click mouseover’,‘div’,function(){})	(1)支持同时注册 (2)支持动态注册(`给body注册`)
on()	`$('div').bind('click mouseover',,function(){})`	(1)支持同时注册 (2)不支持动态注册（`给元素注册`）

$().事件类型(事件处理函数) : $().click(function(){})；
事件绑定： $().bind()
事件委托： $().delegate()原理：事件委托的原理是：事件冒泡

 		/* 使用原生DOM语法手动模拟事件委托原理 */
        document.body.onclick = function (e) {
            //     事件源 ： this:这个事件给谁注册的，默认都是指向事件源
            //     事件对象： e  :存储事件触发的信息
            //     事件触发源: e.target 触发这个事件真正的源头子元素
            console.log(e.target);
            //点击body任意区域都会触发这个事件，但是具体处理委托给.one处理
            if (e.target.className == 'one') {
                console.log('你点击我了');
            }
        };

$().on(事件类型，事件处理函数)
(1)支持同时注册
(2)支持动态注册 : 由用户决定
a. 不注册委托事件：调用元素自己的 on()
b. 注册委托事件 : 调用父元素的 on()

jq事件解绑

原生DOM注册事件与解绑事件
- 事件源.事件类型 = 事件处理函数 box.onclick = function(){}
  解绑：事件源.事件类型 = null box.onclick = null
- 事件源.addEventListener()
  解绑： 事件源.removeEventListener()
jq注册事件
注册： $().on(‘click’,function(){});
解绑： $().off(‘click’);（传参解绑单个，不传解绑所有）

jq事件触发

原生事件触发
- 注册事件： box.onclick = function(){}
- 触发事件: box.onclick();
jq事件触发
- 注册事件： $().on(‘click’,function(){})
- 触发事件： $().trigger(‘click’);
  $().click() 等价于 $().trigger(‘click’) ;

jq的事件对象

jq的事件对象和原生的事件对象是一样的，唯一的区别是jq事件对象内部处理了浏览器兼容性
阻止a标签默认跳转
- return false : 阻止默认跳转 + 阻止冒泡
- e.preventDefault(); 阻止默认跳转
- e.stopPropagation(); 阻止事件冒泡

链式编程

一个对象可以连续调用方法
- 底层原理：在对象的方法中返回自己
链式编程注意点：
- 并不是所有的语法都支持链式
  - 设置类 ： 支持链式。返回的都是jq对象
  - 获取类 : 不支持链式。返回的是对象的属性值（字符串，数字）
  - 并不是所有的链式都会返回你想要的结果
    - end() : 返回链式上一个DOM状态

案例(五角星评分案例)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>五角星评分案例</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .comment {
            font-size: 40px;
            color: red;
        }

        .comment li {
            float: left;
            cursor: pointer;
        }

        ul {
            list-style: none;
        }
    </style>

</head>

<body>
    <ul class="comment">
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
    </ul>
    <script src="jquery-1.12.4.js"></script>

    <script>
        /*需求
        (1)鼠标移入每一个li元素： 当前移入和以前所有的兄弟变成实心五角心， 之后所有的兄弟变成空心五角心 
        (2)鼠标移出每一个li元素： 点击的li元素和以前的兄弟变成实心， 之后的兄弟变成空心
        (3)鼠标单击每一个li元素： 记录当前点击的li元素
        
         */
        let sx_wjx = '★';
        let kx_wjx = '☆';
        //给li元素注册三个事件，可以有好几种写法

        //方式二： $().on() 支持同时注册
        $('li').on({
            mouseenter:function(){
                /* 
                $().prev() : 获取上一个兄弟元素
                $().prevAll() :获取以前所有的元素
                 */
                //当前移入和以前所有的兄弟变成实心五角心， 之后所有的兄弟变成空心五角心 
                //$(this).text(sx_wjx).prevAll().text(sx_wjx).end().nextAll().text(kx_wjx);
                
                $(this).text(sx_wjx);
                $(this).prevAll().text(sx_wjx);
                $(this).nextAll().text(kx_wjx);
            },
            mouseleave:function(){
                $('li[lv="current"]').text(sx_wjx).prevAll().text(sx_wjx).end().nextAll().text(kx_wjx);
            },
            click:function(){
                //使用自定义属性：存储当前点击的元素
                $(this).attr('lv','current').siblings().removeAttr('lv');
            }
        });

        //方式三： 使用链式语法
        // $('li').mouseenter(function(){})
        // .mouseleave(function(){})
        // .click(function(){});
        
         //方式一：传统写法，逐一注册
        // $('li').mouseenter(function(){});
        // $('li').mouseleave(function(){});
        // $('li').click(function(){});
    </script>
</body>

</html>

在这里插入图片描述

显示迭代

隐式迭代 ： jq默认的，偷偷的遍历每一个元素设置相同的值
- 适用场景：设置 "相同" 的值
显式迭代：主动的遍历jq对象的每一个元素
- 适用场景：设置 "不同" 的值
  案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>复制</title>
    <style>
        ul {
            list-style: none;
        }

        li {
            float: left;
            width: 200px;
            height: 200px;
            background: pink;
            text-align: center;
            line-height: 200px;
            margin: 0 20px 20px 0;
        }
    </style>
</head>

<body>
    <ul id="ulList">
        <li>透明度逐渐上升</li>
        <li>透明度逐渐上升</li>
        <li>透明度逐渐上升</li>
        <li>透明度逐渐上升</li>
        <li>透明度逐渐上升</li>
        <li>透明度逐渐上升</li>
        <li>透明度逐渐上升</li>
        <li>透明度逐渐上升</li>
        <li>透明度逐渐上升</li>
        <li>透明度逐渐上升</li>
    </ul>

    <script src="jquery-1.12.4.js"></script>

    <script>
        /* 
            1.隐式迭代：jq默认的偷偷的遍历每一个元素设置相同的值
                适用场景：设置 "相同" 的值
            2.显示迭代：主动的遍历jq对象的每一个元素
                适用场景：设置"不同"的值

         */
        //  1.原生for语法
        for (let i = 0; i < $('li').length; i++) {
            let li = $('li')[i]; //取出来的值为DOM对象
            $(li).css('opacity', i / 10 + 0.1).text('opacity:'+(i / 10 + 0.1));
        };
        
        // 2.使用jq的each()方法
        $('li').each(function(index,ele){
            console.log(index,ele);//下标 ele： DOM对象
            $(ele).css('opacity',index/10+0.1);
        })
    </script>
</body>

</html>

多库共存

查看当前jq的版本号
- console.log($.prototype.jquery);
- console.log(jQuery.prototype.jquery);
  console.log($.fn.jquery);
实现多库共存：释放$控制权 $.noConflict()

		// (1)默认由于是后导入的3.x,所以$表示3.x
        // (2)$.noConflict() 释放3.x版本对$的控制权，转交给$3 . 原来的$就交给了1.x版本
        // (3) $3 :  3.x    $:1.x
        let $3 = $.noConflict();
        console.log($3.prototype.jquery); //3.0.0
        console.log($.prototype.jquery); //1.12.4

需求：就只希望使用一个$, 就可以代表两个版本

 		/*解决方案： 闭包实现沙箱模式 */
        console.log( '沙箱外面$:' + $.prototype.jquery);//1.12.4
        console.log( '沙箱外面$3:' + $3.prototype.jquery);//3.0.0
        (function($){
            // 沙箱内的局部变量：let $ = $3;
            console.log('沙箱内部$:'+$.prototype.jquery);//3.0.0     
        })($3);

插件

插件：在原有的基础上新增的方法
插件的原理
- 就是给jQuery的原型添加自己封装的方法（所有$对象都可以调用）
插件课外学习传送门
- 国内最好的jq插件库：http://www.jq22.com/
- UI相关的插件
  - jq自己团队写的：http://jqueryui.com/
  - 第三方团队写的：http://www.jeasyui.net/plugins/
  - bootstrap:https://www.bootcss.com/

懒加载

为什么要有懒加载技术
- img标签默认会加载src属性对应的资源图片
- 如果一个网页有几百上千的img标签，需要加载上千个资源，影响网页加载时间
懒加载技术好处
- 提升网页加载速度（性能提升）
懒加载技术原理
- 将图片的资源路径放入自定义属性中（不要放入src属性）
- 监听网页的滚动，当图片进入可视区域范围
- 取出图片自定义属性中的路径，赋值给src即可

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
            width: 980px;
            margin: 0 auto;
        }

        ul li {
            width: 230px;
            height: 230px;
            float: left;
            margin-right: 20px;
            margin-bottom: 20px;
        }

        ul li.last {
            margin-right: 0;
        }

        ul li img {
            width: 100%;
            height: 100%;
            display: block;
        }
    </style>
</head>

<body>
    <!-- 假设上面的内容高度1000px -->
    <div style="margin-top: 1000px;"></div>
    <ul>
        <li><img data-original="http://img.daimg.com/uploads/allimg/160324/1-160324232117.jpg" alt=""></li>
        <li><img data-original="http://img.daimg.com/uploads/allimg/160318/1-16031P01P0.jpg" alt=""></li>
        <li><img data-original="http://img.daimg.com/uploads/allimg/160318/1-16031P01332.jpg" alt=""></li>
        <li><img data-original="http://img.daimg.com/uploads/allimg/160318/1-16031P01332.jpg" alt=""></li>
    </ul>

    <script src="jquery-1.12.4.js"></script>
    <!-- 懒加载插件 -->
    <script src="./plugin/jquery.lazyload.js"></script>

    <script>
        /*懒加载技术作用和原理 
        1.为什么要有懒加载技术
            1.1 img标签默认会加载src属性对应的资源图片
            1.2 如果一个网页有几百上千的img标签，需要加载上千个资源，影响网页加载时间
        2.懒加载技术好处
            2.1 提升网页加载速度（性能提升）
        3.懒加载技术原理
            3.1 将图片的资源路径放入自定义属性中 （不要放入src属性）
            3.2 监听网页的滚动，当图片进入可视区域范围
            3.3 取出图片自定义属性中的路径，赋值给src即可
        */

        //开始使用懒加载图片
        $("li>img").lazyload({effect: "fadeIn"});
    </script>
</body>

</html>

自定义插件封装

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>标题</title>

    <script src="jquery-1.12.4.js"></script>
    <script src="jquery-bgColor.js"></script>

    <script>
        $(function () {
            //1.需求:给div设置宽高和背景色.
            // $('div').width(100).height(100).css('backgroundColor','red')
            //2.如果能有个插件这样写就好了
            //可惜报错了：理想很美好，现实很骨感
            //   $('div').w(100).h(100).bgColor('red');
            //3.自定义插件原理： 给jQuery对象的原型添加方法，封装一些自己的操作
            //把这个函数放到单独的js文件中就完美了
           
            jQuery.fn.w = function(width){
                //this:指向调用这个方法的jquery对象
                this.width(width);
                //这个对象我用完了，返回出去给调用者继续用，这就是链式编程的原理
                return this;
            };

            jQuery.fn.h = function(height){
                //this:指向调用这个方法的jquery对象
                this.height(height);
                return this;
            };

            jQuery.fn.bgColor = function(color){
                //this:指向调用这个方法的jquery对象
                this.css('backgroundColor',color);
                return this;
            };
            //4.试试自己的插件吧
            $('div').w(100).h(100).bgColor('red');
        });
    </script>
</head>

<body>
    <div></div>
    <p></p>
</body>

</html>

jQuery——事件与插件开发

jquery事件的发展史

jq事件解绑

jq事件触发

jq的事件对象

链式编程

显示迭代

多库共存

插件

懒加载

猜你喜欢