jQuery学习笔记之jQuery事件

最新推荐文章于 2024-01-20 21:49:50 发布

shirlyran

最新推荐文章于 2024-01-20 21:49:50 发布

阅读量213

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/shirlyran/article/details/107620750

版权

1. jQuery注册事件

单个注册事件

语法：
<body>
    <script>
        // element.事件(function(){})
        $("div").click(function(){
            ...;  //事件处理程序
        })
    </script>
</body>
其他事件和原生基本一致，如mouseover，mouseout，blur，focus，change，keydown，keyup，resize，scroll等

2. jQuery 事件处理

2.1 事件处理 on() 绑定事件

2.1.1 优点1

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

element.on(events, [selector]，fn)

events:一个或多个用空格分隔的事件类型,如"click或"keydown"。
selector:元素的子元素选择器，可省略
fn:回调函数即绑定在元素身上的侦听函数。
<body>
    <div></div>
    <script>
        // on()方法能绑定一个或多个事件
        $("div").on({
            mouseenter: function() {
                $(this).css("background", "red");
            },
            click: function() {
                $(this).css("background", "lightblue");
            },
            mouseleave: function() {
                $(this).css("background", "green");
            }
        })
    </script>
</body>
当事件处理程序相同时
$("div").on("mouseenter mouseleave",function(){
    xxx;  //事件处理程序
})

2.1.2 优点2

可以事件委派操作。事件委派的定义就是,把原来加给子元素身上的事件绑定在父元素身上,就是把事件委派给父元素。
<body>
    <ul>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
    </ul>
    <script>
        // click事件是绑定在ul身上的，但触发的对象是ul里的li
        $("ul").on("click","li",function(){
            alert("11");
        });
    </script>
</body>

2.1.3 优点3

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

<body>
    <ol></ol>
    <script>
        // 给ol动态生成一个li
        var li = $("<li>99</li>");
        $("ol").append(li);
        // 给上面动态生成的li添加绑定事件
        $("ol").on("click", "li", function() {
            alert("55");
        })
    </script>
</body>

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

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

$("div").off();// 括号中为空时，解绑div的所有事件
$("div").off(“click”);// 解除点击事件的绑定
$("ol").off("click", "li");// 解除事件委托的绑定

2.2.1 one() 事件

<body>
    <div>div</div>
    <script>
        // div的click事件只触发一次
        $("div").one("click",function(){
            alert(12);
        })
    </script>
</body>

2.3 自动触发事件

$("div").click() //第一种形式

$("div").trigger("click") //第二种形式

$("div").triggerHandler("click");//第三种形式，与上两种方式的区别就是，这种方法不会触发元素的默认行为

3. jQuery 事件对象

阻止默认行为: event.preventDefault()或者return false

阻止冒泡: event.stopPropagation()

4. jQuery 拷贝对象

$.extend([deep]，target, object1, [objectN])
deep:如果设为true为深拷贝,默认为false浅拷贝
target:要拷贝的目标对象
object1:待拷贝到第一个对象的对象。
    <script>
        $(function(){
            var targetObj={};
            var obj={
                age:18,
                uname:"amy"
            };
            // 将obj拷贝给targetObj，若targetObj中原本有数据，相同的属性会被覆盖掉，不同的属性会保留
            $.extend(targetObj,obj);
        })
    </script>
objectN:待拷贝到第N个对象的对象。

浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象,修改目标对象会影响被拷贝对象。

深拷贝,前面加true，完全克隆(拷贝的对象而不是地址) ,修改目标对象不会影响被拷贝对象。

5. 多库共存

问题：jQuery使用$作为标示符,随着jQuery的流行,其他js库也会用这$作为标识符,这样一起使用会引 |起冲突。

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

jQuery解决方法：

把里面的$符号统-改为jQuery.比如jQuery("div')
jQuery 变量规定新的名称: $.noConflict() var xx = $.noConflict();

6. jQuery 插件

注意:这些插件也是依赖于jQuery来完成的,所以必须要先引入jQuery文件,因此也称为jQuery插件。

jQuery插件常用的网站：

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

6.1 图片懒加载插件

当我们页面滑动到可视区域,再显示图片。

我们使用jquery插件库EasyLazyload.注意,此时的s引入文件和js调用必须写到DOM元素(图片)最后面

6.2 全屏滚动

网址：https://github.com/alvarotrigo/fullpage.js

中文翻译网站：https://www.dowebok.com/demo/2014/77/

6.3 bootstrap js插件

先引入bootstrap的css、js文件和jQuery文件，再使用

shirlyran

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery学习笔记之jQuery事件

1. jQuery注册事件单个注册事件语法：<body> <script> // element.事件(function(){}) $("div").click(function(){ ...; //事件处理程序 }) </script></body>其他事件和原生基本一致，如mouseover，mouseout，blur，focus，change
复制链接

扫一扫