jQuery
jQuery是一个快速、简洁的JavaScript库，倡导写最好的代码，做更多的事
jQuery封装了JavaScript常用的功能代码，优化DOM操作、事件处理、动画设计和Ajax交互
文章目录
入口函数
$(function() {
...// 此处是页面DOM加载完成的入口
});
$(document).ready(function(){
...// 此处是页面DOM加载完成的入口
});
- 等着DOM结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery帮我们完成了封装
- 相当于原生js中的DOMContentLoaded
- 不同于原生js中的load事件是等页面文档、外部的js文件、css文件、图片加载完毕才执行代码
jQuery的顶级对象$
- $ 是jQuery的别称，在代码中可以使用jQuery代替$，但一般为了方便，通常就直接使用 $
- $ 是jQuery的顶级对象，相当于原生JavaScript的window。把元素利用$包装成jQuery对象，就可以调用jQuery的方法
jQuery对象和DOM对象
用原生js获取过来的对象就是DOM对象
用jQuery方式获取过来的对象就是jQuery对象。本质：通过$把DOM元素进行包装后产生的对象（伪数组形式存储）
jQuery对象只能使用jQuery方法，DOM对象则使用原生JavaScript属性和方法
div.style.display = 'none'; //DOM对象
$('div').style.displlay = 'none'; //jQuery对象，不能使用DOM对象的属性
div.hide(); //DOM对象，不能使用jQuery的方法
DOM对象与jQuery对象之间是可以相互转换的
因为原生js比jQuery更大，原生的一些属性和方法jQuery没有给我们封装，要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用
DOM对象转换为jQuery对象：
$(DOM对象)
jQuery对象转换为DOM对象
$('div')[index] index是索引号
或者
$('div').get(index) index是索引号
jQUery选择器
原生js获取元素方式很多，很杂，而且兼容情况不一致，因此jQuery给我们做了封装，使获取元素统一标准
$("选择器") // 里面选择器直接写CSS选择器即可，但是要加引号
隐式迭代
遍历内部DOM元素（伪数组形式存储）的过程叫做 隐式迭代
简单理解：给匹配到的元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用
// jQuert.css("属性名", "属性值") 这是jQuery用来修改样式的方法
$('ul > li').css('color', 'red'); // 这是将ul下所有li标签都修改了属性
jQuery筛选选择器
| 语法 | 用法 | 描述 |
|---|---|---|
| :first | $(‘li:first’) | 获取第一个li元素 |
| :last | $(‘li:last’) | 获取第一个li元素 |
| :eq(index) | $(‘li:eq(2)’) | 获取到的li元素中，选择索引号为2的元素，索引号从0开始 |
| :odd | $(‘li:odd’) | 获取到的li元素中，选择索引号为奇数的元素 |
| :even | $(‘li:even’) | 获取到的li元素中，选择索引号为偶数的元素 |
【案例】下拉菜单
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="./javascripe/jQuery.min.js"></script>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
ul {
width: 100px;
height: 50px;
margin-left: 50px;
text-align: center;
line-height: 50px;
background-color: #837B7B;
}
ul > li{
display: none;
list-style-type: none;
border: 1px black solid;
}
</style>
</head>
<body>
<ul>下拉菜单
<li>菜单一</li>
<li>菜单二</li>
<li>菜单三</li>
</ul>
<script type="text/javascript">
$('ul').mouseover(function(){
$(this).children('li').show();
})
$('ul').mouseleave(function(){
$(this).children('li').hide();
})
</script>
</body>
</html>
jQuery中的$(this)就相当于原生js中的this
添加事件的方式:
jQuery对象.事件类型(function(){
.....// 事件处理代码
})
排他思想
想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式
// 入口函数
$function(){
// 隐式迭代，给所有的按钮都绑定了点击事件
$('button').click(function(){
// 当前的元素变化背景颜色
$(this).css('bckground', 'pink')；
// 其余的兄弟元素去掉背景颜色 隐式迭代
$(this).siblings('button').css('background', '');
})
}
【案例】淘宝服装精品案例分析
- 核心原理鼠标经过左侧盒子的某个小li，就让内容区盒子对应图片显示，其余的图片隐藏
- 需要得到当前li的索引号，就可以显示对应索引号的图片
- jQuery得到当前元素索引号 $(this).index()
- 中间对应的图片，可以他过eq(index)方法去选择
- 显示元素show()，隐藏元素hide()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>淘宝精品案例</title>
<script src="./javascripe/jQuery.min.js"></script>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
li {
list-style-type: none;
}
.left {
width: 60px;
height: 102px;
position: absolute;
left: 200px;
top: 200px;
}
.left li {
border: 2px black solid;
background-color: #BDD0D8;
text-align: center;
}
.content {
width: 100px;
height: 100px;
border: 1px black solid;
text-align: center;
line-height: 100px;
position: absolute;
left: 260px;
top: 200px;
}
.content li {
display: none;
}
.content li:first {
display: block;
}
</style>
</head>
<body>
<div class="left">
<ul>
<li>物品一</li>
<li>物品二</li>
<li>物品三</li>
<li>物品四</li>
</ul>
</div>
<div class="content">
<ul>
<li>图片一</li>
<li>图片二</li>
<li>图片三</li>
<li>图片四</li>
</ul>
</div>
<script type="text/javascript">
$('.left li').mousemove(function(){
$('.content li').eq($(this).index()).siblings('li').hide();
$('.content li').eq($(this).index()).show();
})
</script>
</body>
</html>
链式编程
要求：将点击的按钮变为红色，其他的按钮为无色
原始方法
$(function(){
$('button').click(function(){
$(this).css('color', 'red');
$(this).siblings('color', 'red');
})
})
链式编程
$(function(){
$('button').click(function(){
$(this),css('color', 'red').siblings().css('color', ' ')
})
})
jQuery操作样式
修改样式css方法
-
参数只写属性名，则返回属性值
$(this).css("color"); -
参数是属性名、属性值，逗号隔开，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号
$(this).css("color", "red"); -
参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用引号
$(this).css({ "color": "white", "fontSize": "20px" });
修改样式类操作
作为等同于以前classList，可以操作类样式，注意操作类里面的参数不要加点
-
添加类
$('div').addClass("current"); //current为类名 -
移除类
$('div'),remove('current'); -
切换类
$('div').toggleClass('current');
【案例】tab切换栏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>tab切换栏</title>
<script src="./javascripe/jQuery.min.js"></script>
<style type="text/css">
.tabBox{
margin: 100px;
position: relative;
}
ul li {
list-style-type: none;
float: left;
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
background-color: #fff;
border: 1px #bbb solid;
border-bottom: none;
cursor: pointer;
}
#tab_con{
position: absolute;
top: 31px;
left: 50px;
}
.onclickStyle{
background-color: red;
color: #fff;
}
</style>
</head>
<body>
<div class="tabBox">
<ul id="tab">
<li class="onclickStyle">tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul>
<div id="tab_con">
<div >aaaa</div>
<div style="display:none">bbbb</div>
<div style="display:none">cccc</div>
</div>
</div>
<script type="text/javascript">
$('#tab > li').click(function(){
let index = $(this).index();
$('#tab_con > div').eq(index).css('display', 'block').siblings().css('display', 'none');
$(this).addClass('onclickStyle').siblings().removeClass('onclickStyle');
})
</script>
</body>
</html>
jQuery效果
jQuery给我们封装了很多动画效果
显示隐藏：show()、hide()、toggle()
滑动：slideDown()、slideUp()、slideToggle()
淡入淡出：fadeIn()、fadeOut()、fadeToggle()、fadeTo()
自定义动画：animate()
显示隐藏效果
显示
-
显示语法规范
show( [speed, [easing], [fn] ] ); -
显示参数
- 参数可以省略，无动画直接显示
- speed：三种预定速度之一的字符串（‘slow’,‘normal’,‘fast’）或者表示动画时长的毫秒数值(如：1000)
- easing：(Optional)用来指定切换效果，默认是"swing"，可用参数"linear"
- fn：回调函数，在动画完成时执行的函数，每个元素执行一次
隐藏
-
隐藏语法规范
hide( [speed, [easing], [fn] ] ); -
隐藏参数
- 参数都可以省略，无动画直接显示
- speed：三种预定速度之一的字符串（‘slow’,‘normal’,‘fast’）或者表示动画时长的毫秒数值(如：1000)
- easing：(Optional)用来指定切换效果，默认是"swing"，可用参数"linear"
- fn：回调函数，在动画完成时执行的函数，每个元素执行一次
滑动效果
参数和显示隐藏的参数相同
- slideDown()
- slideUp()
- slideToggle()
事件切换
hover( [over,]out)
- over：鼠标移到元素上要触发的函数（相当于mouseenter）
- out：鼠标移出元素要触发的函数（相当于mouseleave）
$('div').hover(function(){}, function(){});
如果只写一个函数，那么鼠标经过和鼠标离开都会触发
动画队列及其停止排队方法
动画或者效果队列
动画或者效果一旦触发就会执行，如果多次触发，就会造成多个动画或者效果排队执行
停止排队
stop()
- stop()方法用于停止动画或者效果
- 注意：stop()写到动画或者效果的前面，相当于停止结束上一次的动画
淡入淡出效果
-
淡入淡出效果语法规范
fadeIn( [speed, [easing] , [fn] ] ) fadeOut( [speed, [easing] , [fn] ] ) -
淡入淡出效果参数
- 参数可以省略
- speed：三种预定速度之一的字符串（‘slow’,‘normal’,‘fast’）或者表示动画时长的毫秒数值(如：1000)
-
以渐进方式调整到指定的不透明度
fadeTo( [speed], opacity, [easing], [fn] )
-
效果参数
- opacity：透明度必须写，取值在0~1之间、
- speed：三种预定速度之一的字符串（‘slow’,‘normal’,‘fast’）或者表示动画时长的毫秒数值(如：1000)。必须写
- easing：(Optional)用来指定切换效果，默认为“swing”，可用参数“linear”
- fn：回调函数，在动画完成时执行函数，每个元素执行一次
自定义动画
-
语法
animate(params, [speed] , [easing] ,[fn] ) -
效果参数
params：想要修改的样式属性，以对象形式传递，必须写。属性名可以不带引号，如果时复合属性则需要采取驼峰命名法，其余参数可以省略
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="./javascripe/jQuery.min.js"></script>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
div {
width: 200px;
height: 200px;
position: absolute;
background-color: red;
}
</style>
</head>
<body>
<button>动起来</button>
<div></div>
<script type="text/javascript">
$(function(){
$('button').click(function(){
$('div').animate({
"left": "100px",
"top" : "70px",
"opacity": "0.5"
})
})
})
</script>
</body>
</html>
【案例】手风琴效果
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="./javascripe/jQuery.min.js"></script>
<script type="text/javascript">
$(function(){
// 当前小li宽度为224px，同时里面的小图片淡出，大图片淡出
$('li').mouseenter(function(){
$(this).stop().animate({
width:224
}).children('.small').stop().fadeOut().siblings('.big').stop().fadeIn();
//其余兄弟小li宽度变为69px，小图片淡出，大图片淡出
$(this).siblings('li').stop().animate({
width:69
}).children('.big').stop().fadeOut().siblings('.small').stop().fadeIn();
})
})
</script>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
.king {
position: relative;
background-color: #7B86BF;
width: 700px;
height: 200px;
margin: 200px auto;
border-radius: 5%;
}
.words {
float: left;
margin: 8px 8px;
font-size: 20px;
}
ul {
height: 69px;
width: 500px;
padding:65.5px;
}
li {
list-style: none;
float: left;
margin:auto;
margin-left: 5px;
}
.big {
width: 224px;
height: 69px;
display: none;
}
.small {
width: 69px;
height: 69px;
}
</style>
</head>
<body>
<div class="king">
<div class="words">
<span>周免英雄</span>
</div>
<ul>
<li>
<img src="https://game.gtimg.cn/images/yxzj/img201606/heroimg/105/105.jpg" class="small" style="display: none">
<img src="https://game.gtimg.cn/images/yxzj/img201606/heroimg/105/105-freehover.png" class="big" style="display:block">
</li>
<li>
<img src="https://game.gtimg.cn/images/yxzj/img201606/heroimg/141/141.jpg" class="small">
<img src="https:///game.gtimg.cn/images/yxzj/img201606/heroimg/141/141-freehover.png" class="big">
</li>
<li>
<img src="https://game.gtimg.cn/images/yxzj/img201606/heroimg/167/167.jpg" class="small">
<img src="https:game.gtimg.cn/images/yxzj/img201606/heroimg/167/167-freehover.png" class="big">
</li>
</ul>
</div>
</body>
</html>
jQuery属性操作
设置或获取元素固有属性值 prop()
所谓元素固定属性就是元素本身自有的属性，比如 元素里面的href ，比如 元素里面的type
获取属性语法
element.prop("属性名");
设置属性值语法
element.prop("属性名", "属性值");
获取或设定自定义属性
获取自定义属性
element.attr("属性名");
设定自定义属性
element.attr("属性名", "属性值")
数据缓存 data()
data()方法可以在指定的元素上存储数据，并不会修改DOM元素结构。一旦页面刷新，之前存放的数据都将被移除
附加数据语法
$("span").data("uname", "andy"); //在DOM数据上不发生改变，只是存储在内存中
console.log($("span").data("uname")); //输出andy
获取数据语法
element.data("uname") // 向被选中元素获取数据
jQuery 内容文本值
只要针对元素的内容还有表单的值操作
-
普通元素内容html()——相当于原生innerHTML
element.html(); //获取元素的内容element.html("内容"); //设置元素的内容 -
普通元素文本内容text()——相当于原生innerText
element.text(); //获取元素文本内容element.text("内容"); //设置元素文本内容 -
表单中的值val()——相当于原生value
element.val();element.val("内容");【案例】购物车案例模块—增减商品数量分析
- 核心思路：首先声明一个变量，当我们点击+号，就让这个值++，然后赋值给文本框
- 注意点1：只能增加本商品的数量，就是当前+号的兄弟文本框的值
- 修改表单的值是val()方法
- 注意点2：这个变量初始值应该是这个文本框的值，在这个值的基础上++，要获取表单的值
<!DOCTYPE html> <html> <head> <title></title> <script src="./javascripe/jQuery.min.js"></script> <style type="text/css"> * { margin: 0px; padding: 0px; } .add, .reduce { width: 50px; height: 50px; float: left; text-align: center; font-size: 30px; border: 1px black solid; border-radius: 50%; } a { color: black; text-decoration:none; } #goodNum { float: left; height: 40px; width: 30px; border-radius: 20%; margin: 0px 7px 0px 7px; text-align: center; font-size: 20px; } </style> <script type="text/javascript"> $(function(){ // 先确定input中的内容 var goodNum = $('#goodNum').val(); $('.add,.reduce').click(function(){ let text = $(this).find('a').html(); if(text === '+'){ goodNum++; }else if (text === '-') { goodNum--; if (goodNum <= 0) { goodNum = 0; } } $('#goodNum').val(goodNum); }) }) </script> </head> <body> <div class="add"> <a href="javascript:;">+</a> </div> <input type="text" name="number" value="1" id="goodNum"> <div class="reduce"> <a href="javascript:;">-</a> </div> </body> </html>【案例】购物车案例模块—增减商品数量分析，计算总价
- 首先要获得单价，通过字符串的截取split()，得到数字
- 将数量乘上单价
- parent(“选择器”)，这样可以准确选择祖辈中的元素
<!DOCTYPE html> <html> <head> <title>全选和单选</title> <script src="./javascripe/jQuery.min.js"></script> <style type="text/css"> * { margin: 0px; padding: 0px; } .headerLine { width: 1000px; height: 40px; } .headerLine li { list-style-type: none; float: left; font-size: 20px; margin-right: 150px; } .sum { position: absolute; left: 360px; top: 41px } .changeNum { position: absolute; left: 134px; top: 32px; height: 50px; } .add, .reduce { width: 50px; height: 50px; float: left; text-align: center; font-size: 30px; border: 1px black solid; border-radius: 50%; } a { color: black; text-decoration:none; } .goodNum { float: left; height: 40px; width: 30px; border-radius: 20%; margin: 0px 7px 0px 7px; text-align: center; font-size: 20px; } </style> <script type="text/javascript"> $(function(){ // 先确定input中的内容 var goodNum = $('.goodNum').val(); $('.add,.reduce').click(function(){ let text = $(this).find('a').html(); if(text === '+'){ goodNum++; }else if (text === '-') { goodNum--; if (goodNum <= 0) { goodNum = 0; } } $(this).siblings('.goodNum').val(goodNum); let price = $(this).parent().siblings('.price').text().split('￥')[1]; $(this).parent().siblings('.sum').text('￥' + goodNum * price); }) }) </script> </head> <body> <div class="headerLine"> <ul> <li>单价</li> <li>数量</li> <li>总和</li> </ul> </div> <span class="price" style="font-size: 20px">￥12.5</span> <span class="sum" style="font-size: 20px">￥12.5</span> <div class="changeNum"> <div class="add"> <a href="javascript:;">+</a> </div> <input type="text" name="number" value="1" class="goodNum"> <div class="reduce"> <a href="javascript:;">-</a> </div> </div> </body> </html>
jQuery元素操作
遍历元素
jQuery隐式迭代时对同一类元素做同样的操作。如果想要给同一类元素做不同的操作，就需要遍历
语法1:
$('div').each(function (index, domEle){
xxx;
} )
- each()方法遍历匹配的每个元素。主要用DOM处理。each——每一个
- 里面的回调函数有2个参数：index是每个元素的索引号；domEle是每个DOM对象，不是jQuery对象
- 所以要想使用jQuery方法，需要给这个dom元素转换为jQuery对象 $(domEle)
语法2：
$.each(object, function(index, element){
xxx;
})
- $.each()方法可用于遍历任何对象，主要用于数据处理，比如数组，对象
- 里面的函数有2个参数：index是每个元素的索引号；element遍历内容
创建元素
语法：
$("<li>内容</li>");
动态地创建了一个
-
添加元素
-
内部添加
element .append("内容");把内容放入匹配元素内部最后面，类似原生appendChild
element.prepend("内容");把内容放入匹配元素内部最前面
-
外部添加
element.after("内容"); //把内容放入目标元素后面element.before("内容"); //把内容放在目标元素前面
内部添加和外部添加的区别：
- 内部添加元素，生成之后，它们是父子关系
- 外部添加元素，生成之后，它们是兄弟关系
删除元素
element.remove(); //删除匹配的元素（本身）element.empty(); //删除匹配的元素集合中所有的子节点element.html(""); //清空匹配的元素内容jQuery尺寸、位置操作
jQuery 尺寸
语法 用法 width() / height() 取得匹配元素宽度和高度值，只算width / height innerWidth() / innerHeight 取得匹配元素宽度和高度值，包含padding outerWidth() / outerHeight() 取得匹配元素宽度和高度值，包含padding、border outWidth(true) / outerHeight(true) 取得匹配元素宽度和高度值，包含padding、border、margin - 以上参数为空，则是获取相应值，返回的是数字型
- 如果参数为数字，则是修改相应值
- 参数可以不必写单位
jQuery位置
位置主要有三个：offset()、position()、scrollTop()/scrollLeft()
-
offset()设置或获取元素偏移
offset()方法设置或返回被选中元素相对于文档的偏移坐标，跟父级没有关系
element.offset().left; //返回left值，没有单位 element.offset().top; //返回top值，没有单位 // 修改元素的偏移量 element.offset({ "left" : "200", "top" : "200" }) -
postion()获取元素偏移
position()方法用于返回被选中元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准
postion()只能获取，不能设置
element.postion().left; element.postion().top;-
scrollTop()/scrollLeft() 设置或获取元素被卷去的头部和左侧
scrollTop()方法设置或返回被选元素被卷去的头部
scrollLeft() 方法设置或返回被选元素被卷去的左侧
// 页面滚动 $('window').scroll(function(){ ... })当使用元素做动画效果的时候，
$(document).animate()是不行的，$('body, html').animate()才是正确的
jQuery事件
事件注册
单个事件注册
$('div').click(function(){ .... })事件处理
绑定事件 on()
on()方法在匹配元素上绑定一个或者多个事件的处理函数
语法：
element.on( events, [selector] ,fn)events：一个或者多个空格分隔的事件类型
selector：元素的子元素选择器
fn：回调函数，即绑定在元素身上的监听函数
优势一：可以绑定多个事件
绑定多个事件，多个事件处理程序
$('div').on({ mouseenter : function(){ }; click : function(){} })如果事件处理程序相同
$('div').on('mouseover mouseout' , function(){ $(this).toggleClass('current'); });优势二：可以事件委托操作。事件委托的定义就是，把原来加给子元素绑定在父元素身上，就是把事件委托派给父元素
$('ul').on('click', 'li', function() { alert('hello world'); })click是绑定在ul上的，但是触发的对象是ul里面的小li
优势三：动态创建的元素，click()没有绑定事件，on()可以给动态生成的元素绑定事件
$('ol').on('click', 'li', function(){ alert(11); }) var li = $('<li>我是后来创建的</li>') $('ol').append(li);【案例】评论的增加与删除
注意点：给动态元素绑定事件需要使用on()，把事件绑在父辈元素上，在委托给子元素
<!DOCTYPE html> <html> <head> <title>评论</title> <script src="./javascripe/jQuery.min.js"></script> <style type="text/css"> * { margin: 0px; padding: 0px; } #weibo { position: relative; width: 600px; margin: 100px auto; border: 1px black solid; } .title { text-align: center; font-size: 30px; } .txt { width: 400px; margin-left: 100px; resize: none; } ul { width: 400px; margin-left: 100px; } .btn { width: 72px; height: 24px; font-size: 15px; background-color: #82DBEB; position: absolute; left: 515px; top: 162px; } ul li { display: none; list-style-type: none; font-size: 20px; border-bottom: 1px black solid; } ul a { float: right; } </style> <script type="text/javascript"> $(function(){ // 添加评论 $('.btn').click(function(){ let content = $(this).siblings('.txt').val(); if(content){ // 创建li let li = $('<li>' + content + '<a href="javascript:;">删除</a></li>'); $(this).siblings('ul').prepend(li); li.slideDown(); $(this).siblings('.txt').val(''); } }) // 删除评论，注意a是动态生成的，需要使用on() $('ul').on('click', 'a', function(){ $(this).parent().remove(); }) }) </script> </head> <body> <div class="box" id="weibo"> <p class="title">微博发布</p> <textarea class="txt" cols="30" rows="10"></textarea> <button class="btn">发布</button> <ul></ul> </div> </body> </html>解绑事件 off()
解除事件
$('div').off(); //解除div元素的所有事件 $('div').off('click'); //解除div元素的点击事件解除事件委托（针对于子元素）
$('ul').off('click', 'li'); //解除ul下li的事件委托一次性 one()
one()，绑定事件，当事件发生一次后就立即解绑
$('p').one('click', function(){ alert(11); })自动触发事件
有些事件希望自动触发，比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发。
-
元素.事件()
$('div').click(); -
元素.trigger(‘事件’)
$('div').trigger('click'); -
元素.triggerHandler(‘事件’)
$('div').triggerHandler('click')
区别：triggerHandler()不会触发元素的默认行为，其他两个方法会触发元素的默认行为
jQuery事件对象
事件被触发，就会有事件对象的产生
阻止默认行为：event.preventDefault()或者return false
阻止冒泡：event.stopPropagetion()
jQuery拷贝对象
如果想要把某个对象拷贝（合并）给另外一个对象使用，此时可以使用$.extend()方法
语法：
$.extend( [deep], target, object1 , [objectN] )deep：如果设为true为深拷贝，默认为false-浅拷贝
target：要拷贝的目标对象
object1：待拷贝到第一个对象的对象
objectN：待拷贝到第N个对象的对象
浅拷贝是把被拷贝的对象复杂数据（对象）类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象
深拷贝，前面加true，完全克隆（拷贝的对象，而不是地址），修改目标对象不会影响被拷贝对象
var targetObj = {}; var obj = { id : 1, name : "andy" } $.extend(targetObj, obj);无论targetobj中是否有数据，拷贝之后，obj的数据会覆盖targetobj里面原来的数据
多库共存
问题概述：
jQuery使用 作 为 标 识 符 ， 随 着 j Q u e r y 的 流 行 ， 其 他 j s 库 也 会 用 作为标识符，随着jQuery的流行，其他js库也会用 作为标识符，随着jQuery的流行，其他js库也会用作为标识符，这样一起使用会引起冲突
客观需求：
需要一个解决方案，让jQuery和其他的js库不存在冲突，可以同时存在，这叫做多库共存
jQuery解决方案：
- 把里面的$符号统一改为jQuery，比如jQuery(‘div’)
- jQuery变量规定新的名称：$.noConflict() ，var xxx = $.noConflict()
-
1355
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
