【jQuery】jQuery其他方法

最新推荐文章于 2024-05-15 20:43:52 发布

早睡早起长头发

最新推荐文章于 2024-05-15 20:43:52 发布

阅读量224

点赞数

分类专栏： jQuery 文章标签： jquery javascript 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_51481135/article/details/128606528

版权

jQuery 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

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

三、jQuery插件

jQuery 功能比较有限，想要更复杂的特效效果，可以借助于 jQuery 插件完成。

注意：这些插件也是依赖于 jQuery 来完成的，所以必须要先引入 jQuery 文件，因此也称为 jQuery 插件。

- jQuery 插件常用的网站

1.1 jQuery 插件库

http://www.jq22.com/

1.2 jQuery 之家

http://www.htmleaf.com/

2. jQuery 插件使用步骤

2.1 引入相关文件。

（jQuery 文件和插件文件）

2.2 复制相关html、css、js

（调用插件)

3. bootstrap JS 插件

bootstrap 框架也是依赖于 jQuery 开发的，因此里面的 js 插件使用，也必须引入 jQuery 文件。

早睡早起长头发

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【jQuery】jQuery其他方法

jQuery 使用 $ 作为标示符，随着 jQuery 的流行,其他 js 库也会用这 $ 作为标识符，这样一起使用会引起冲突。bootstrap 框架也是依赖于 jQuery 开发的，因此里面的 js 插件使用，也必须引入 jQuery 文件。这些插件也是依赖于 jQuery 来完成的，所以必须要先引入 jQuery 文件，因此也称为 jQuery 插件。需要一个解决方案，让 jQuery 和其他的 js 库不存在冲突，可以同时存在，这就叫做。(拷贝的对象，而不是地址)，修改目标对象。
复制链接

扫一扫