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>
  • 相关阅读:
    SQL整理5
    SQL整理1 数据类型
    SQL整理2
    JavaScript 的DOM操作
    JavaScript 数据类型
    JavaScript
    CSS样式表
    sqlserver数据库 提纲
    Python基础第十二天:二分法算法
    Python基础第十一天:递归函数
  • 原文地址:https://www.cnblogs.com/bky-/p/13783139.html
Copyright © 2011-2022 走看看