一、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 插件库
1.2 jQuery 之家
2. jQuery 插件使用步骤
2.1 引入相关文件。
(jQuery 文件 和 插件文件)
2.2 复制相关html、css、js
(调用插件)
3. bootstrap JS 插件
bootstrap 框架也是依赖于 jQuery 开发的,因此里面的 js 插件使用 ,也必须引入 jQuery 文件。