jQuery学习笔记(三)- jQuery事件与其他方法【完】

2021.2.5

jQuery学习笔记(三)

jQuery事件

jQuery事件注册

单个事件注册

语法element.事件(function(){})
如:$('div').click(function(){事件处理程序})

其他事件和原生基本一致。
比如:mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll等。

jQuery事件处理

事件处理on()绑定事件

on()方法在匹配元素上绑定一个或多个事件的事件处理函数。

语法element.on(events,[selector],fn)

  • events:一个或多个用空格分隔的事件类型,如’click’或’keydown’。
  • selector:元素的子元素选择器。
  • fn:回调函数,即绑定在元素身上的侦听函数。

on()方法优势1
可以绑定多个事件,多个事件处理程序。

$('div').on({
    mouseover:function(){},
    mouseout:function(){},
    click:function(){}
});//里面放一个对象{}对象里面有各种事件

如果事件处理程序相同,可以这样写

$('div').on('mouseover mouseout',function(){
    $(this).toggleClass('current');
})

on()方法优势2
可以事件委派操作。事件委派的定义就是,把原来加给子元素身上的事件绑定在父元素身上,就是把事件委派给父元素。触发对象是孩子,利用事件冒泡冒到父亲身上。

$('ul').on('click','li',function(){
    $(this).css('color', 'red');
})

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

on()方法优势3
动态创建的元素,click()没有办法绑定事件,on()可以给动态生成的元素绑定事件。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jQuery.mini.js"></script>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        
        .current {
            background-color: purple;
        }
    </style>
</head>

<body>
    <div></div>
    <ul>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
        <li>我们都是好孩子</li>
    </ul>
    <ol>

    </ol>
    <script>
        $(function() {
            //1.单个时间注册
            /* $('div').click(function() {
                $(this).css('background', 'purple');
            });
            $('div').mouseenter(function() {
                $(this).css('background', 'skyblue');
            }); */
            //2.事件处理on
            //2.1 on可以绑定1个或者多个事件处理程序
            /* $('div').on({
                mouseenter: function() {
                    $(this).css('background', 'skyblue');
                },
                click: function() {
                    $(this).css('background', 'purple');
                },
                mouseleave: function() {
                    $(this).css('background', 'sandybrown');
                }
            }); */
            $('div').on('mouseenter mouseleave', function() {
                $(this).toggleClass('current');
            });
            //2.2 on可以实现事件委托(委派)
            // $('ul li').click();隐式迭代给每个小li都添加了一个事件,没必要
            $('ul').on('click', 'li', function() {
                //事件是绑定在ul身上的,只有一个ul,li是ul的孩子,触发对象是小li,事件冒泡会冒到父亲身上
                $(this).css('color', 'red');
            });
            //2.3 on可以给未来动态创建的元素绑定事件
            /* $('on li').click(function() {
                alert(22);
            }); */ //不会弹出,因为这个事件触发对象li是后来创建的
            $('ol').on('click', 'li', function() {
                alert(11);
            })
            var li = $('<li>我是后来创建的</li>');
            $('ol').append(li);
        })
    </script>
</body>

</html>
事件处理 off()解绑事件

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

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

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

<body>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        
        .current {
            background-color: purple;
        }
    </style>
    <div></div>
    <ul>
        <li>我们都是好孩子</li>
    </ul>
    <p>我是p</p>
    <script>
        $(function() {
            $('div').on({
                click: function() {
                    console.log('我点击了');
                },
                mouseover: function() {
                    console.log('我鼠标经过了');
                }
            });
            $('ul').on('click', 'li', function() {
                    alert(11);
                })
                //1.事件解绑 off
                //$('div').off();//这个是解除了div身上的所有事件
            $('div').off('click'); //这个是解除了div身上的点击事件
            $('ul').off('click', 'li'); //这样就把li身上的事件委托解除掉了
            //2.one() 但是它只能触发一次
            $('p').one('click', function() {
                alert('我是p');
            })
        })
    </script>
</body>
自动触发事件 trigger()

有些事件希望自动触发,比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件,不必鼠标点击触发。

element.click() //第一种简写形式
element.trigger('type') //第二种自动触发模式
element.triggerHandler('type') //第三种自动触发模式 不会触发元素的默认行为
<body>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>

    <div></div>
    <input type="text" name="" id="">

    <script>
        $(function() {
            $('div').on('click', function() {
                alert(11);
            });
            //自动触发事件
            //1.元素.事件()
            $('div').click();
            //2.元素.trigger('事件')
            $('div').trigger('click');
            //2.元素.triggerHandler('事件')第三种的区别:不会触发元素的默认行为
            //默认行为比如表单获得焦点就会有条线一闪一闪
            $('div').triggerHandler('click');
            $('input').on('focus', function() {
                $(this).val('您好吗');
            });
            $('input').triggerHandler('focus');
        })
    </script>
</body>

jQuery事件对象

事件被触发,就会有事件对象产生。
element.on(events,[selector],function(event){})

  • 阻止默认行为:event.preventDefault() 或者 return false
  • 阻止冒泡:event.stopPropagation()
<body>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>

    <div></div>


    <script>
        $(document).on('click', function() {
            console.log('点击了document');
        })
        $(function() {
            $('div').on('click', function(event) {
                //console.log(event);
                console.log('点击了div'); //这里有事件冒泡
                event.stopPropagation();
            })
        })
    </script>
</body>

jQuery其他方法

jQuery对象拷贝

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

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

  • deep:如果设为true为深拷贝,默认为false浅拷贝
  • target:要拷贝到的目标对象
  • object1:待拷贝到第一个对象的对象
  • objectN:待拷贝的第N个对象
  • 浅拷贝与深拷贝
    • 浅拷贝:把被拷贝的对象复杂数据类型中的地址拷贝给目标对象,修改目标对象会影响被拷贝对象。
    • 深拷贝:前面加true,完全克隆(拷贝的对象,而不是地址),修改目标对象不会影响被拷贝对象。

多库共存

一个问题
jQuery使用 作 为 标 识 符 , 随 着 j Q u e r y 的 流 行 , 其 他 j s 库 也 会 用 作为标识符,随着jQuery的流行,其他js库也会用 jQueryjs作为标识符,这样一起使用会引起冲突。

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

jQuery解决方案

  1. 把里面的$符号 统一改为jQuery。比如jQuery(‘div’)
  2. jQuery变量规定新的名称:$.noConflict() var xx = $.noConflict();
<body>
    <div></div>
    <span>我是span</span>
    <script>
        $(function() {
            function $(ele) {
                return document.querySelector(ele)
            }
            //1.如果$符号冲突,我们就使用jQuery
            console.log($('div'));
            //$.each();因为冲突报错
            jQuery.each();
            //2.让jQuery释放对$符号的控制权,让用户自己决定
            var aa = jQuery.noConflict();
            aa('span');
            console.log(aa('span'));
        })
    </script>
</body>

jQuery插件

jQuery功能比较有限,想要更复杂的特效效果,可以借助jQuery插件完成。
注意:这些插件也是依赖于jQuery来完后的,所以必须要先引入jQuery文件,因此也称为jQuery插件。

jQuery插件常用的网站

  1. jQuery插件库:http://www.jq22.com/
  2. jQuery之家:http://www.htmleaf.com/

jQuery插件使用步骤

  1. 引入相关文件(jQuery文件和插件文件)
  2. 复制相关html、css、js(调用插件)

jQuery插件演示

  1. 瀑布流
  2. 图片懒加载(图片使用延迟加载,可提高网页下载速度。它也能帮助减轻服务器负载)
    当我们页面滑动到可视区域,再显示图片。(EasyLazyload)
  3. 全屏滚动(fullpage.js)
    • gitHub:https://github.com/alvarotrigo/fullPage.js
    • 中文翻译网站:http://www.dowebok.com/demo/2014/77/

Note:
1.无意中发现的,vs code 按F11可进入/退出全屏。
2.vs code中按ctrl+H可以查找/替换。

bootstrap JS插件
bootstrap框架也是依赖于jQuery开发的,因此里面的js插件使用,也必须引入jQuery文件。

【完】

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值