一、jQuery 拷贝对象

1.1、说明

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

1
2
3
4
5
6
7
8
9
10
# 语法
	$.extend([deep], target, object1, [objectN])
	
# 说明
	1. deep: 如果设为true 为深拷贝， 默认为false 浅拷贝
	2. target: 要拷贝的目标对象
	3. object1: 待拷贝到第一个对象的对象。
	4. objectN: 待拷贝到第N个对象的对象。
	5. 浅拷贝目标对象引用的被拷贝的对象地址，修改目标对象会影响被拷贝对象。
	6. 深拷贝，前面加true， 完全克隆，修改目标对象不会影响被拷贝对象。

1.2、拷贝案例

1.2.1、案例1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<body>
    <script>
        // 1、目标对象
        var targetObj = {};

        // 2、源对象
        var source = {
            id: 1,
            uname: 'HelloWorld'
        };

        // 3、拷贝
        $.extend(targetObj, source);

        console.log(targetObj);
    </script>
</body>

1.2.2、案例2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<body>
    <script>
        // 1、目标对象
        var targetObj = {
            id: 10
        };

        // 2、源对象
        var source = {
            id: 1,
            uname: 'HelloWorld'
        };

        // 查看原来对象中的内容
        console.log(targetObj);

        // 3、拷贝，会覆盖targetObj 里面原来的数据
        $.extend(targetObj, source);

        console.log(targetObj);
    </script>
</body>

1.2.3、案例3

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<body>
    <script>
        // 1、目标对象
        var targetObj = {
            age: 90
        };

        // 2、源对象
        var source = {
            id: 1,
            uname: 'HelloWorld'
        };

        // 查看原来对象中的内容
        console.log(targetObj);

        // 3、拷贝,会和原来对象进行合并。
        $.extend(targetObj, source);

        console.log(targetObj);
    </script>
</body>

1.2.4、案例4

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<body>
    <script>
        // 1、目标对象
        var targetObj = {
            id: 0,
            msg: {
                sex: '男'
            }
        };

        // 2、源对象
        var source = {
            id: 1,
            uname: 'HelloWorld',
            msg: {
                age: 18
            }
        };
        // 3、拷贝,原对象中包含对象。
        $.extend(targetObj, source);

        console.log(targetObj);
    </script>
</body>

1.2.5、案例5

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<body>
    <script>
        // 1、目标对象
        var targetObj = {
            id: 0,
            msg: {
                sex: '男'
            }
        };

        // 2、源对象
        var source = {
            id: 1,
            uname: 'HelloWorld',
            msg: {
                age: 18
            }
        };
        // 3、拷贝
        $.extend(targetObj, source);

        // 修改原对象中msg的年龄为30
        targetObj.msg.age = 30;

        console.log(targetObj);
        console.log(source);
        
        // 总结：浅拷贝把原来对象里面的复杂数据类型地址拷贝给目标对象
        // >> msg 指向的是同一个内存地址,一改全改
    </script>
</body>

1.2.6、案例6

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<body>
    <script>
        // 1、目标对象
        var targetObj = {
            id: 0,
            msg: {
                sex: '男'
            }
        };

        // 2、源对象
        var source = {
            id: 1,
            uname: 'HelloWorld',
            msg: {
                age: 18
            }
        };
        // 3、拷贝
        $.extend(true, targetObj, source);

        console.log(targetObj);
    </script>
</body>

1.2.7、案例7

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<body>
    <script>
        // 1、目标对象
        var targetObj = {
            id: 0,
            msg: {
                sex: '男'
            }
        };

        // 2、源对象
        var source = {
            id: 1,
            uname: 'HelloWorld',
            msg: {
                age: 18
            }
        };
        // 3、拷贝
        $.extend(true, targetObj, source);

        // 修改原对象中msg的年龄为30
        targetObj.msg.age = 30;

        console.log(targetObj);
        console.log(source);

        // 总结：深拷贝把里面的数据完全复制一份给目标对象 如果里面有不冲突的属性,会合并到一起 
        // >> msg 指向的是不同的内存地址,你的修改和我没关系
    </script>
</body>

二、 jQuery 多库共存

2.1、说明

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

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

​ jQuery 解决方案：

  • 把里面的 $ 符号 统一改为 jQuery。 比如 jQuery(‘’div’’)
  • jQuery 变量规定新的名称：$.noConflict() var xx = $.noConflict();

2.2、案例

2.2.1、问题引入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<body>
    <div>CSS</div>
    <script>
        // 自定义函数功能，函数名恰好是 $

        function $() {
            console.log('HelloWorld');
        }

        $();

        // 使用 jQuery的 $
        var $div = $('div');
        console.log($div); // 查询不到
        
        //  总结: 我自定义的 $ 和 jQuery的 $ 冲突了。
    </script>
</body>

2.2.2、解决方案一

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<body>
    <div>CSS</div>
    <script>
        // 自定义函数功能，函数名恰好是 $

        function $() {
            console.log('HelloWorld');
        }

        $();

        //  1. 如果$ 符号冲突 我们就使用 jQuery
        var $div = jQuery('div');
        console.log($div); // 查询不到
    </script>
</body>

2.2.3、解决方案二

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<body>
    <div>CSS</div>
    <script>
        // 自定义函数功能，函数名恰好是 $

        function $() {
            console.log('HelloWorld');
        }

        $();

        // 1. 如果$ 符号冲突，让jquery 释放对$ 控制权 调用者决定
        var $$ = jQuery.noConflict();

        // 2. 使用 $$
        var $div = $$('div');
        console.log($div); // 查询不到
    </script>
</body>