9. jQuery其他方法

9.1 jQuery对象拷贝

将某个对象拷贝给另一个对象使用,可以使用$.extend()

语法

$.extend([deep],target,Obj1,[Obj2...])
  1. deep:当设为true时表示深拷贝,默认为false,表示浅拷贝。
  2. target表示要拷贝到的对象。
  3. Obj1:表示待拷贝到第一个对象的对象。
  4. Objn:标识待拷贝到第n个对象的对象。
  5. 浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象,修改目标对象会影响被拷贝对象。
  6. 深拷贝把里面的数据完全复制一份给目标对象 如果里面有不冲突的属性,会合并到一起

<script>
        var targetObj = {};
        var obj = {
            id: 1,
            name: "andy"
        }
        $.extend(targetObj, obj);
        console.log(targetObj);

    </script>

若要拷贝到的对象targetObj里有内容,则拷贝时会覆盖原有数据。

如:obj={

id:1,

name:"andy",

msg:{

age:18

}

}

msg:{age:18}是复杂数据类型

 

9.2 jQuery多库共存

随着jQuery的流行,采用jQuery和$符为命名空间的js库越来越多,当然jQuery的$符也是参照的Prototype库的,所以当多个库同时以$符或者jQuery为命名空间时,那么此时,就会产生冲突。

使用$作为函数名做自定义封装

 $(function () {
            //$为函数名,ele为形参
            function $(ele) {
                return document.querySelector(ele);
            }
        })

自定义函数$会与接下来$.each方法冲突,原因是我们自定义的$函数中没有each方法。

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

jQuery解决方案:

  1. 把$符号统一改为jQuery。比如jQuery("div")$符号冲突时使用
  2. jQuery变量规定新的名称:$.noConflict()   var xx=$.noConflict()让jQuery释放对$控制权,让用户自己决定

 

 9.3 jQuery插件

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

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

  1. jQuery 插件库 http://www.jq22.com/

  2. jQuery 之家 http://www.htmleaf.com/  推荐

     jQuery 插件使用步骤:

  • 下载插件
  • 引入js,css文件夹放入自己目录下
  • 依次在自己的html中引入<link>,内部css,<script></script>
  • html结构复制可以参考网站提示

1.瀑布流插件参考

2.图片懒加载技术

3.全屏滚动

4. bootstrap组件

5. bootstrap插件(JS)