jQuery拷贝对象、jQuery多库共存、jQuery插件

jQuery拷贝对象

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

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

1. deep：如果设为true为深拷贝，默认为false浅拷贝。
2. target：要拷贝的目标对象。
3. object1：待拷贝到第一个对象的对象。
4. objectN：待拷贝到第N个对象的对象。
5. 浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象。
6. 深拷贝，前面加true，完全克隆（拷贝对象，而不是地址），修改目标对象不会影响被拷贝对象。
7. 复杂数据类型属性名相同时，浅拷贝和深拷贝的区别：

//浅拷贝：
var targetObj = {
  id: 0,
  mag: {
  sex: '男'
}
};
var obj = {
  id: 1,
  name: 'andy',
  msg: {
    age: 22
  }
};
$.extend(targetObj,obj);
console.log(targetObj);
//输出结果为：targetObj = {id: 1,name: 'andy', msg: {age: 22}                                                                                                                                                                                                                                                                 

//深拷贝：
var targetObj = {
  id: 0,
  mag: {
  sex: '男'
}
};
var obj = {
  id: 1,
  name: 'andy',
  msg: {
    age: 22
  }
};
$.extend(true,targetObj,obj);
console.log(targetObj);
//输出结果为：targetObj = {id: 1,name: 'andy', msg: {sec: '男',age: 22}}

• 存在多个待拷贝的对象（object1,objectN）的情况：

  var obj={};
  var obj1={
  name: 'andy',
  sex: '男'
  };
  var obj2={
  name: 'Marry',
  age: 30
  }
  //$.extend(obj,obj1)  //把obj1拷贝到obj上面
  $.extend(obj,obj1,obj2)//属性会覆盖，obj{name: "Marry", sex: "男", age: 30}

• 如果我们想保留原对象，我们可以通过传递一个空对象作为目标对象（target）：

var obj = $.extend({}, object1, object2);

jQuery多库共存

• 起因：jQuery使用$作为标识符，随着jQuery的流行，其他js库也会用该符号作为标识符，这样一起使用就会引起冲突。

• 多库共存定义：为了让jQuery和其他js库不存在冲突，可以同时存在。

• 方法：

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

  2.jQuery变量规定新的名称：$.noConflict()，比如：

  var xxx = $.noConflict();
  xxx("div");		//相当于$("div")	
  

jQuery插件

• jQuery插件也是依赖于jQuery完成的，所以必须先引入jQuery文件。

• jQuery插件常用的网站：

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

  2.jQuery之家：http://www/htmleaf.com/

• jQuery插件使用步骤：

  1.引入相关文件。（jQuery文件和插件文件）

  2.复制相关html、css、js（调用插件）

• jQuery插件举例：

  1.瀑布流（jQUery之家）

  2.图片懒加载（图片使用延迟加载可提高网页下载速度，也能帮助减轻服务器负载）（jQuery插件库）

  其实，图片懒加载就是当页面滑动到可视区域，再显示图片。

  使用jQuery插件库EasyLazyload时，要注意此时的js引入文件和js调用必须写到DOM元素（图片）最后面。

  3.全屏滚动（fullpage.js）

  GitHub：https://github.com/alvarotrigo/fullPage.js

  中文翻译网站：http://www.dowebok.com/demo/2014/77/

• bootstrap JS插件：

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

  使用方法跟一般的插件的使用方法一致。

---

微信公众号也会定期更新，觉得文章写得还可以的，可以加个关注！点个赞！谢谢！