【jQuery】jQuery其他方法

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

一、jQuery 拷贝对象

如果想要把某个对象拷贝合并给另外一个对象使用此时可以使用 $.extend() 方法

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

deep如果设为 true 为深拷贝默认为false 浅拷贝

target要拷贝的目标对象

object1待拷贝到第 1 个对象的对象。

objectN待拷贝到第 N 个对象的对象。

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

深拷贝前面加true 完全克隆(拷贝的对象而不是地址)修改目标对象不会影响被拷贝对象,拷贝后如果里面有不冲突的属性,会合并到一起。

    <script src="../jquery.min.js"></script>
    <script>
        $(function () {
            // 1. 目标对象中没有数据
            // var targetObj = {};
            // var obj = {
            //     id: 1,
            //     name: "andy"
            // };
            // // 将obj拷贝给targetObj
            // $.extend(targetObj, obj);
            // console.log(targetObj);

            // 2. 目标对象中有数据:会覆盖targetObj里面原来的数据
            // var targetObj = {
            //     id: 0
            // };
            // var obj = {
            //     id: 1,
            //     name: "andy"
            // };
            // // 将obj拷贝给targetObj
            // $.extend(targetObj, obj);
            // console.log(targetObj); 


            // 浅拷贝情况1:把被拷贝的对象复杂数据类型中的地址拷贝给目标对象
            // var targetObj = {
            //     id: 0,
            // };
            // var obj = {
            //     id: 1,
            //     name: "andy",
            //     msg: {
            //         age: 18
            //     }
            // };
            // // 将obj拷贝给targetObj
            // $.extend(targetObj, obj);
            // console.log(targetObj); // 会覆盖targetObj 里面原来的数据

            // 浅拷贝情况2:修改目标对象会影响被拷贝对象
            // var targetObj = {
            //     id: 0,
            //     msg: {
            //         sex: '男' //和age: 18冲突,拷贝后只剩age: 18
            //     }
            // };
            // var obj = {
            //     id: 1,
            //     name: "andy",
            //     msg: {
            //         age: 18
            //     }
            // };
            // targetObj.msg.age = 20; //修改拷贝完后的targetObj中msg中的age
            // console.log(targetObj); // msg :{age: 20}
            // console.log(obj); //原来的对象obj中msg中的age也会改变


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

二、多库共存

- 问题概述

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

2. 客观需求

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

3. jQuery 解决方案

1. 把里面的 $ 符号统一改为 jQuery。比如 jQuery(''div'')

2. jQuery 变量规定新的名称$.noConflict()。比如var xx = $.noConflict();

    <script src="../jquery.min.js"></script>
</head>

<body>
    <div></div>
    <span></span>

    <script>
        $(function () {
            // $选择器的简单封装:
            function $(ele) {
                return document.querySelector(ele);
            }
            console.log($("div"));
            
            // 1. 如果$ 符号冲突 我们就使用 jQuery
            jQuery.each();
            // 2. 让jquery 释放对$ 控制权 让用自己决定
            var suibian = jQuery.noConflict();
            console.log(suibian("span"));
            suibian.each();
        })
    </script>
</body>