jQuery其他方法

最新推荐文章于 2024-11-01 13:37:40 发布

qq_52822043

最新推荐文章于 2024-11-01 13:37:40 发布

阅读量946

点赞数

文章标签：前端 html jquery

本文链接：https://blog.csdn.net/qq_52822043/article/details/123869160

版权

1. jQuery拷贝对象

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

语法：

deep：如果设为true为深拷贝，默认为false为浅拷贝
target：要拷贝的目标对象
object1：待拷贝到第一个对象的对象
objectN：待拷贝到第N个对象的对象
浅拷贝：把拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象
深拷贝：前面加true，完全克隆（拷贝对象，而不是地址），修改目标对象不会影响被拷贝对象

   <script src="jquery.min.js"></script>
</head>
<body>
    <script>
        $(function() {
            var targetObj = {};
            var obj = {
                id: 1,
                name: "an"
            };
            //把obj拷贝给targetObj一起使用
            $.extend(targetObj, obj);
            console.log(targetObj);

            var targetObjbj1 = {
                id: 0
            };
            var obj1 = {
                id: 1,
                name: "tom"
            };
            //把obj1拷贝到targetObjbj1一起使用，obj1会覆盖targetObjbj1原来的数据
            $.extend(targetObjbj1, obj1);
            console.log(targetObjbj1);  

            var targetObjbj2 = {
                id: 0
            };
            var obj2 = {
                id: 2,
                name: "tom",
                msg: {
                    age: 18
                }
            };
            //浅拷贝：把原来对象里面的复杂数据类型的地址拷贝给目标对象,修改目标对象会影响被拷贝对象
            $.extend(targetObjbj2, obj2);
            //由于目标对象里面的复杂数据类型的age改为20，所以目标对象和原来对象的age都会改为20
            targetObjbj2.msg.age = 20;
            console.log(targetObjbj2);
            console.log(obj2);  

            var targetObjbj3 = {
                id: 0
            };
            var obj3 = {
                id: 3,
                name: "tom",
                msg: {
                    age: 18
                }
            };
            //深拷贝：把原来对象里面的数据完全复制一份给目标对象，如果里面有不冲突的属性，会合并到一起
            $.extend(true, targetObjbj3, obj3);
            //修改目标对象不会影响被拷贝对象
            targetObjbj3.msg.age = 23;
            console.log(targetObjbj3);
            console.log(obj3);  


        })
    </script>
</body>

结果为：

2. jQuery多库共存

jQuery使用$作为标识符，随着jQuery的流行，其他js库也会用$作标识符，这样一起使用会引起冲突。所以需要一个解决方案，让jQuery和其他的js库不存在冲突，可以同时存在，这就叫多库共存。

jQuery解决方案：

把里面的$符号统一改为jQuery，比如jQuery("div");
jQuery变量规定新的名称：$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("span");
           //2.jQuery变量规定新的名称:$noConflict()
           var normal = jQuery.noConflict();
           console.log(normal("span"));
           normal.each();
       })
   </script>
</body>

结果为：

3. jQuery插件

jQuery插件常用的网站：

jQuery插件库：jQuery插件库-收集最全最新最好的jQuery插件
jQuery之家：jQuery之家-自由分享jQuery、html5、css3的插件库

使用步骤：

引入相关文件（jQuery文件和插件文件）
复制相关html、css、js（调用插件）

1）全屏滚动（fullpage.js）:

中文翻译网站：jQuery全屏滚动插件fullPage.js_dowebok

2）bootstrap JS插件：

    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <script src="jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>