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

最新推荐文章于 2023-02-20 13:10:32 发布

Ludwig1597

最新推荐文章于 2023-02-20 13:10:32 发布

阅读量274

点赞数

分类专栏： jQuery 文章标签： jquery javascript

本文链接：https://blog.csdn.net/Ludwig1957/article/details/113726814

版权

jQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

2021.2.5

文章目录

jQuery学习笔记（三）

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库不存在冲突，可以同时存在，这就叫多库共存。

jQuery解决方案：

把里面的$符号统一改为jQuery。比如jQuery(‘div’)
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插件常用的网站：

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

jQuery插件使用步骤：

引入相关文件（jQuery文件和插件文件）
复制相关html、css、js（调用插件）

jQuery插件演示：

瀑布流
图片懒加载（图片使用延迟加载，可提高网页下载速度。它也能帮助减轻服务器负载）
当我们页面滑动到可视区域，再显示图片。（EasyLazyload）
全屏滚动（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文件。

【完】

Ludwig1597

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery学习笔记（三）- jQuery事件与其他方法【完】

2021.2.5文章目录jQuery学习笔记（三）jQuery事件jQuery事件注册jQuery事件处理事件处理on()绑定事件事件处理 off()解绑事件自动触发事件 trigger()jQuery事件对象jQuery其他方法jQuery对象拷贝多库共存jQuery插件jQuery学习笔记（三）jQuery事件jQuery事件注册单个事件注册语法：element.事件(function(){})如：$('div').click(function(){事件处理程序})其他事件和原生基本.
复制链接

扫一扫