zoukankan      html  css  js  c++  java
  • jQuery 事件对象、 jQuery 拷贝对象、jQuery 多库共存

    1. jQuery 事件对象

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

    语法

    element.on(events,[selector],function(event) {})     

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

    演示代码

    <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>

    2.  jQuery 拷贝对象

    ​ jQuery中分别为我们提供了两套快速获取和设置元素尺寸和位置的API,方便易用,内容如下。

    语法

     

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

    1. deep: 如果设为true 为深拷贝, 默认为false  浅拷贝 
    2. target: 要拷贝的目标对象
    3. object1:待拷贝到第一个对象的对象。
    4. objectN:待拷贝到第N个对象的对象。
    5. 浅拷贝目标对象引用的被拷贝的对象地址,修改目标对象会影响被拷贝对象。
    6. 深拷贝,前面加true, 完全克隆,修改目标对象不会影响被拷贝对象。

    演示代码

     <script>
            $(function() {
                   // 1.合并数据
                var targetObj = {};
                var obj = {
                    id: 1,
                    name: "andy"
                };
                // $.extend(target, obj);
                $.extend(targetObj, obj);
                console.log(targetObj);
       
                   // 2. 会覆盖 targetObj 里面原来的数据
                var targetObj = {
                    id: 0
                };
                var obj = {
                    id: 1,
                    name: "andy"
                };
                // $.extend(target, obj);
                $.extend(targetObj, obj);
                console.log(targetObj); 
            })
        </script>

    3.  jQuery 多库共存

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

    语法

     jQuery 解决方案:
     
    1. 把里面的 $ 符号 统一改为 jQuery。 比如 jQuery(''div'')
    2.  jQuery 变量规定新的名称:$.noConflict()        var xx = $.noConflict();

    演示代码

    <script>
        $(function() {
              // 让jquery 释放对$ 控制权 让用自己决定
              var suibian = jQuery.noConflict();
              console.log(suibian("span"));
        })
    </script>
  • 相关阅读:
    WordPress fonts.useso.com加载慢解决办法
    ecshop 需要修改权限的文件夹及文件
    手机前端框架UI库(Frozen UI、WeUI、SUI Mobile)
    apache2配置rewrite_module
    wordpress htaccess伪静态设置
    linux whereis 快速查找命令
    Linux下的PS和grep的使用
    [转]group by 后使用 rollup 子句总结
    Maven配置国内镜像仓库
    清除电脑垃圾.bat
  • 原文地址:https://www.cnblogs.com/bky-/p/13783139.html
Copyright © 2011-2022 走看看