jQuery的基本使用三

2020-04-27 本文已影响0人赫丹

1 jQuery 事件注册

jQuery 为我们提供了方便的事件注册机制，是开发人员抑郁操作优缺点如下：

优点: 操作简单，且不用担心事件覆盖等问题。
缺点: 普通的事件注册不能做事件委托，且无法实现事件解绑，需要借助其他方法
语法
register.png

2 jQuery 事件处理

on(): 用于事件绑定，目前最好用的事件绑定方法
off(): 事件解绑
trigger() / triggerHandler(): 事件触发
语法
on1.png
on2.png
on3.png

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

当某个事件上面的逻辑，在特定需求下不需要的时候，可以把该事件上的逻辑移除，这个过程我们称为事件解绑。jQuery 为我们提供了多种事件解绑方法：die() / undelegate() / off() 等，甚至还有只触发一次的事件绑定方法 one()
语法

off.png

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

语法

t1.png

t2.png

5 jQuery 事件对象

jQuery 对DOM中的事件对象 event 进行了封装，兼容性更好，获取更方便，使用变化不大。事件被触发，就会有事件对象的产生。

event.png
演示代码

<body>
    <div></div>

    <script>
        $(function() {
            $(document).on("click", function() {
                console.log("点击了document");
            })
            $("div").on("click", function(event) {
                // console.log(event);
                console.log("点击了div");
                event.stopPropagation();
            })
        })
    </script>
</body>

注意：jQuery中的 event 对象使用，可以借鉴 API 和 DOM 中的 event 。

6 jQuery 拷贝对象

语法

extend.png

<script>
    $(function () {
        var targetObj = {};
        var obj = {
            id: 1,
            name: "andey"
        }
        $.extend(targetObj, obj);
        console.log(targetObj);
        var targetObj = {id: 100};
        var obj = {
            id: 1,
            name: "andey"
        }
        $.extend(targetObj, obj);
        console.log(targetObj); //会覆盖原来的数据

        var targetObj = {
                id: 100,
                msg: {sex: '男'}
            }
        ;
        var obj = {
            id: 1,
            name: "andey",
            msg: {age: 18}
        }
        $.extend(targetObj, obj);
        // console.log(targetObj);// 会覆盖targetObj 里面原来的数据
        // // 1. 浅拷贝把原来对象里面的复杂数据类型地址拷贝给目标对象
        targetObj.msg.age=20;
        console.log(obj)
        console.log(targetObj)
        //2.深拷贝把里面的数据完全复制一份给目标对象 如果里面有不冲突的属性,会合并到一起
        $.extend(true,targetObj,obj);
        // console.log(targetObj);
        targetObj.msg.age=20;
        console.log(targetObj);
        console.log(obj);
    })
</script>

8 jQuery 多库共存

实际开发中，很多项目连续开发十多年，jQuery版本不断更新，最初的 jQuery 版本无法满足需求，这时就需要保证在旧有版本正常运行的情况下，新的功能使用新的jQuery版本实现，这种情况被称为，jQuery 多库共存。
语法

noconfig.png

演示代码

<script>
    $(function () {
        function $(ele) {
            return document.querySelector(ele);
        }
        console.log($('div'));
        // 1. 如果$ 符号冲突 我们就使用 jQuery
        jQuery.each();
        //2.让jquery 释放对$控制权，让自己决定
        var meme=jQuery.noConflict();
        console.log(meme('span'));
        meme.each();
    });
</script>

9 jQuery 插件

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

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

jQuery 插件常用的网站：

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

jQuery 插件使用步骤：
引入相关文件。（jQuery 文件和插件文件）
复制相关html、css、js (调用插件)。