jQuery学习

what is jQuery

jQuery是一个前端方法库（插件是实现某一个单一类功能；库是封装了各种的功能和你需要的工具；框架有自己完整的生态系统）
主要是封装了各种dom操作

优点
1、（无所不能的）选择器
2、（无处不在的）链式编程
3、（无人可及的）隐式迭代

特点
号称全兼容（2.0以前的版本）

当你引入一个jquery.js或者jquery.min.js以后
会向全局暴露两个变量名（两个功能完全一样，喜欢哪个用哪个）
1、jQuery
2、$

jQuery选择器

选择器（基本选择器、特殊选择器）
对元素的获取

筛选器
对已经获取到的元素进行二次筛选

基本选择器

语法：$(选择器)
返回值：满足条件的所有元素（id选择器除外）

放在一个数组返回给你（就算只有一个）
都是一个集合的形式
我们管这个集合叫做jquery元素集合

//基本选择器
console,log($('div'))
console,log($('#box'))
console,log($(".box"))
console,log($('div>ul>li:nth-child(odd)'))

特殊选择器

：first
：last
：eq（索引），按照索引排列的第几个
：odd，按照索引排列的奇数个
：even，按照索引排列的偶数个

console.log($('div:first'))//拿到所有div的第一个

console.log($('div:last'))//拿到所有div的最后一个

console.log($('div:eq(num)'))//num是索引的值，拿到的是按照索引排列的第几个

console.log($('li:odd'))//索引值为奇数的li
console.log($('li:nth-child(odd)'))//排列为奇数的li

console.log($('li:even'))//索引值为偶数的li
console.log($('li:nth-child(even)'))//排列为偶数的li

console.log($('button:enabled'))//拿到可以点击的按钮
console.log($('button:disabled'))//拿到不能点击的按钮

筛选器

对jquery的元素集合进行二次筛选
只有jquery的元素集合才可以使用，原生DOM对象不能使用
直接对链式编程就可以了

first(),元素集合里面的第一个
last(),元素集合里面的最后一个
eq（索引），元素集合里面指定索引的那一个
next(),当前元素的下一个元素
nextAll(),
nextUntil（）
prev（），当前元素的上一个
prevall（）
prevUntil（）
parent（）获取到当前元素的父元素
parents（）（1、结构父级的所有父元素，2、父级元素符合要求的）
children（）（1、所有子元素，2、所有子元素符合要求的）
sinblings（），拿到该元素所有兄弟元素，自己除外
find（），找到该元素中所有后代元素里符合条件的
index（），获取该元素在其父元素的索引值

console.log($('li').first())

console.log($('li').last())

console.log($('li').eq(2))

console.log($('span').next())

console.log($('span').nextAll())//span以后的全部兄弟元素
console.log($('span').nextAll(li))//span后面所有的li元素

console.log($('span').nextUntil())//span以后的全部兄弟元素
console.log($('span').nextUntil(选择器))//span后面所有兄弟元素到选择器元素（不包含）为止

console.log($('span').prev())

console.log($('span').prevAll())//获取到当前元素上面所有的兄弟元素（倒着拿的）
console.log($('span').prevAll(选择器))获取到当前元素上面所有兄弟元素中的指定元素

jQuery操作文本

操作元素内的文本和超文本
注：属于jquery的方法只能jquery元素集合调用，原生DOM不能调用

.html(),获取该元素的超文本内容，以字符串的形式返回（获取的时候为了保证html结构，只能获取第一个元素的超文本内容）
.html(‘内容’)，设置元素集合内元素的超文本内容，安全覆盖式写入，隐式迭代（元素集合内有多少元素就写入多少元素）

$('div').html('<span>我是新来的</span>')

.text()，获取该元素的文本内容，以字符串的形式返回，因为是文本内容，不涉及html结构，所以拿到的是所有元素的文本内容，以一个字符串的形式返回
.text(‘内容’)，设置元素集合内元素的文本内容，完全覆盖式的写入，隐式迭代（与安娜苏结合内有多少元素，就写入多少元素）

.val()，获取元素集合内元素的value值
.val(‘内容’)设置元素集合元素的value值，完全覆盖式写入，隐式迭代（与安娜苏结合内有多少元素，就写入多少元素）

jQuery操作元素类名

addClass（），添加元素类名
removeClass（），删除元素类名
hasClass（），判断有没有类名
toggleClass（），切换类名（有的话删掉，没的话加上）

jQuery操作元素样式

.css（），操作元素样式

//获取元素的某一个样式的值，不管是行内还是非行内都能获取到
console.log($('div').css('width'))

//语法：css（属性名，属性值）
//设置元素的行内样式，隐式迭代，单位是px可以不写
$('div').css('margin','50px')

//语法：css（{样式名1：样式值，样式名2:样式值2，....}）
$('div').css({
	margin:50,
	width:700
})

jQuery基础绑定事件

on（），事件绑定，根据传递不同的参数做不同的事情
one（），事件绑定，和on（）方法的参数和使用形式一摸一样，只不过绑定的事件只能执行一次
off（），用来解除事件绑定
trigger(),用js代码的方式来触发事件

//语法：元素集合.on(事件类型，事件处理函数)
//隐式迭代，直接绑定函数
$('li').on('click',function(){
	console.log(” 我被点击了“)
})

//语法：on（事件类型，选择器，事件处理函数）
//事件委托绑定，把选择器元素委托给元素集合里面的元素
//选择器元素要是元素集合内元素的后代元素
$('ul').on('click','li',function(){
	console.log(this)//很好用，this就是点击的元素，不会传到ul上
})

//on（事件类型，复杂数据类型，事件处理函数）
//给元素集合内的所有元素绑定事件
//这个复杂数据类型是事件触发的时候，传递给事件里面的参数
//在事件对象里面有一个叫做data的成员，就是传递进来的参数
$('li').on('click',{name:'jack'},function(){
	console.log(this)
})

//on（事件类型，选择器，数据，事件处理函数）
//事件委托的形式，带上传递参数
//把选择器所属的事件，委托给了元素集合内的事件
//数据位置，就是在事件触发的时候传递给事件处理函数的参数
$('lu').on('click','li','hello world',function(e){
	console.log(this)
	console.log(e)
})

//on（{事件类型1：事件处理函数，事件类型2：事件处理函数}）
//一次性给元素绑定多种事件
//没法传递参数和事件委托了
$('li').on({
	click:funciton(){console.log('点击事件')}
	mousover:function(){console.log('移入事件')}
})

function handlerA() {console.log('handlerA')}
function handlerB() {console.log('handlerB')}
$('li').on('click',handlerA)
$('li').on('click',handlerB)
//off（事件类型）
//解除元素身上该事件类型
$('li').off('click')//两个handler都不被触发了

//off（事件类型，事件处理函数）
$('li').off('click',handlerA)//只显示handlerB

//trigger(事件类型)
$('li').trigger('click')

jQuery事件函数

jQuery给我们提供了一些简洁的绑定事件的方式
把一些常用事件直接封装成了函数
click（）、mouseover（）
这些方法可以直接使用，带有隐式迭代（快捷绑定事件）
语法：.事件类型（事件处理函数）、.事件类型（传入事件处理函数的参数，事件处理函数）

jQuery唯一的特殊事件

hover（）
一个结合了移入移出的事件
语法：.hover（移入的事件处理函数，移出的事件处理函数）
如果只传递了一个参数，那么移入移出都触发

jQuery节点操作

原生js的节点操作：
创建节点，插入节点，删除节点，替换节点，克隆节点

jQuery的节点操作
创建节点，插入节点，删除节点，替换节点，克隆节点

创建节点
$(html结构字符串)当$()里面传递一个选择器的时候，就是获取元素
当$()里面传递一个html结构字符串的时候，就是创建元素节点当$()里面传递了一个DOM元素节点的时候，就是转换成jQuery元素结合

const div=$('<div>创建的节点</div>')
console.log(div)

const box=document.querySelector('div')
console.log($(div).html('你好世界'))

插入节点
内部插入（父子关系插入）

append()
appendTo()
prepend()
prependTo()

外部插入（兄弟关系插入）

after()
insertAfter()
before（）
insertbefore()

//内部插入
//append()
//语法:父元素.append(子元素)
//把子元素插入到父元素内部，放在末尾的位置
$('div').append(p)

//appendTo（）
//语法：子元素.appendTo(父元素)
//把子元素插入到父元素内部，放在末尾的位置
p.appendTo($('div'))

//prepend()
//语法：父元素.prepend（子元素）
//把子元素插入到父元素内容，放在最前面的位置
$('div').prepend(p)

//prependTo
//语法：子元素.prependTo(父元素)
//把子元素插入到父元素内容，放在最前面的位置
p.prependTo($('div'))

$('div').append(p)
$('div').prepend(p)
//试问会出现什么情况

//解析：p是一个jQuery创建的元素节点，但是是一个复杂数据类型的变量，存储的是一个地址，只要我使用p，就是在使用堆里面得到那个空间
//所以会出现上面一个，下面没有的情况，动用的是它本身，而不是赋值加定义

//外部插入
//after()
//把插入元素排在存在元素后面，以兄弟关系插入
$('div').after(p)

//insertAfter()
//语法：插入元素.insrtAfter(存在元素)
//把插入元素排在存在元素后面，以兄弟关系插入
p.insertAfter($('div'))

//before（）
//语法：存在元素.before(插入元素)
//把插入元素排在存在元素的前面，以兄弟关系出现
$('div').before(p)

//insertBefore()
//语法：插入元素.insertBefore(存在元素)
//把插入元素排在存在元素前面，以兄弟关系插入
p.insertBefore($('div'))

删除节点
remove（）
empty()

//remove（）
//语法：元素集合。remove（）
//把自己从自己的父元素里面移出
$('div').remove()

//empty()
//语法：元素结合.empty()
//把自己变成空标签，把自己后代节点全部移除
$('div').empty()

替换节点
replaceWith（）
replaceAll（）

//replaceWith
//换下节点.replaceWith（换上节点）、隐式迭代
$('div>p').replaceWith('p')

//replaceAll
//换上节点.replaceAll(换下节点)
p.replaceAll($('div>p'))

克隆节点
clone()
语法:元素集合.clone()
必然携带所有节点过来
第一个参数默认是false，表示是否克隆元素本身的事件，选填true
第二个参数默认时跟随第一个，表示是否克隆元素后代节点的事件，选填
注意：当第一个参数是false的时候，第二个参数没有意义

$('.a').click(function(){ console.log('div')})
$('.b').click(function(){ console.log('p')})

$('div').clone().insertAfter($('hr'))

jQuery操作元素

attr（）、removeAttr（）
prop（）、removeProp
data（）、removeData（）

//attr(),removeAttr
//语法：attr(属性名)
//获取元素的该属性，主要用来获取标签属性，抱愧一些自定义属性
console.log($('div').attr('class'))
console.log($('div').attr('id'))
console.log($('div').attr('hello'))

//语法：元素集合.attr（属性名，属性值）
//设置元素的标签属性，只是把属性设置在标签上，当作一个自定义属性使用
//对于原生属性有些用，有些没用
//注意：1、设置的时候，需要两个参数
//2、设置的不管是什么数据类型，都会变成字符串类型
$('div').attr('a','你好 世界')
$('div').attr('id','你好 世界')

//removeAttr（）
//语法：元素集合.removeAttr（属性名）
//删除元素身上的自定义属性
//id，class等属性也可以删除
//注意：多用于删除attr方法设置的属性
$('div').remove('class')
$('div').remove('id')

//prop()
//雨打：元素集合.prop(属性名)
//获取元素的原生属性，也可以获取元素的自定义属性
//但是attr方法设置的自定义属性它获取不到


//语法：元素集合.prop（属性名，属性值）
//主要设置元素的原生属性，也可以设置自定义属性
//他设置的自定义属性不会显示在标签上，而实存贮在元素身上
$('div').prop('abc',100)

//removeProp（）
//语法：元素集合.removeProp（属性名）
//删除元素的属性，但是只能删除由prop设置的自定义属性
//原生属性id、class不能删除
$('div').reo=moveAttr('abc')

//注意：
//1、设置的自定义属性不会显示在标签上
2、你设置的时候是什么数据类型，获取到的时候还是上面数据类型
//3、attr设置的自定义属性它拿不到

//data（）
//语法：元素属性.data(属性名)
//获取data（）方法存储的数据，获取元素身上data-xxx的属性
console.log($('div').data('index'))

//语法：元素属性.data(属性名，属性值)
//设置的时候，只是把数据存储在元素深山大哥摸一个对象空间内
//但是不会出现在标签上，不会由data-xxx的属性出现
$('div').data('abcde',200)

//removeData（）
//可以删除由data（）方法设置的属性
//不能删除元素身上的data-xxx的属性
$('div').removeData('index')
$('div').removeData('abcde')

//注意：
//可以获取元素标签上data-xxx的属性
//但是不能设置标签上data-xxx的属性

jQuery获取元素尺寸

width（）、height（）
获取的是元素内容位置的尺寸

innerWidth（）、innerHeight（）
获取的是元素内容+padding区域的尺寸

outerWidth（）、outerHeight（）
获取的是元素内容+padding+border区域的尺寸

outerWidth（true）、outerHeight（true）
获取的是元素内容+padding+border+margin区域的尺寸

jQuery操作位置关系

操作元素相对于某一个点的位置关系

offset（）
是一个读写的方法
读取

语法：元素集合.offset（）
返回值：一个对象，里面包含一个x信息一个y信息
相对谁：相对页面左上角的绝对坐标
注意：读取出来是一个对象，你需要值的时候，要继续".".不能链式编程

设置

语法：元素集合.offset（{top：xxx，left：xxx}）
设置的：设置的是相对于页面左上角的绝对位置
例子：$(‘div’).offset({top:30,left:30})
一定会把这个div挡在距离左上角30 30的位置
注意：设置的时候，如果父子元素都要动，要考虑先后顺序

position（）
是一个只读的方法
读取：

语法：元素集合.position()
返回值：一个对象，里面包含一个x信息，一个y信息
就是元素的定位关系
如果你定位的是right和bottom，那么会自动计算成left和top

jQuery动画

show（）
显示

hide（）
隐藏

toggle（）
切换，本身显示就隐藏，本身隐藏就显示

上面三个方法操作的就是display的none和block
三个语法相同：方法名（运动时间，运动曲线，回调函数）
运动时间：多久时间运动结束
运动曲线：上面方式运动
回调函数：运动结束后触发

往左上收起

$('.show').click(()=>{
	$(''div').show(1000,'linear',()=>console.log('显示结束'))
})
$('.hide').click(()=>{
	$(''div').hide(1000,'linear',()=>console.log('隐藏结束'))
})
$('.toggle').click(()=>{
	$(''div').toggle(1000,'linear',()=>console.log('切换结束'))
})

jQuery的折叠动画

slideDown（）
下拉显示

slideUp（）
上拉隐藏

slideToggle（）
切换显示和隐藏

三个方法都是一样的参数
方法（时间，运动曲线，回调函数）

往上收起

$('.show').click(()=>{
	$(''div').slideDown（1000，‘linear’，console.log('显示结束')）
})
$('.hide').click(()=>{
	$(''div').slideUp（1000，‘linear’，console.log('隐藏结束')）
})
$('.toggle').click(()=>{
	$(''div').clideToggle（1000，‘linear’，console.log('切换结束')）
})

jQuery渐隐渐显动画

通过操作元素的opacity达到效果

faseIn（）

fadeOut（）

fadeToggle（）

三个方法的语法是一样的
方法名（时间，运送曲线，回调函数）

fadeTo()
运动到指定透明度
语法：fadeTo（时间，指定透明度，运动曲线，回调函数）

$('.show').click(()=>{
	$(''div').fadeIn（1000，‘linear’，console.log('显示结束')）
})
$('.hide').click(()=>{
	$(''div').fadeOut（1000，‘linear’，console.log('隐藏结束')）
})
$('.toggle').click(()=>{
	$(''div').fadeToggle（1000，‘linear’，console.log('切换结束')）
})
$('.to').click(()=>{
	$(''div').fadeTo（1000，0.5，‘linear’，console.log('运动结束')）
})

jQuery综合动画

可以按照你的设定区进行运动

animate
语法：animate（{}，时间，运动曲线，回调函数）
{}写运动的属性
注意：1、颜色相关的属性，运动不了。2、css3的2d和3d运动效果运动不了

$('button').click(=>{
	$('div').animate({
		width:300,
		height:'400px'
	},1000,'linear',()=>console,log('运动结束'))
})

jQuery的停止动画

因为当你给一个元素设置动画以后
如果快速出发，会停不下来，直到你所有的触发都执行完毕为止

stop（）
语法：元素集合.stop()
当代码执行到这句的时候，不管运动到什么程度，立刻停下来
运动到什么为止就停在什么位置

finsh（）
语法：元素集合.finsh()
当大妈执行到之举的时候，不管运动到什么程度，直接去到运动结束的位置
直接完成本次动画

$('button .start").click(()=>{
	$('div').sideToggle(1000,'linear')
})
$('.stop').click(()=>{
	$('div').stop()
})
$('.finsh').click(()=>{
	$('div').finsh()
})

animatecss动画插件

https://animate.style/
可以测试动画，引入动画效果
css文件

jQuery发送ajax请求

jQuery发送了一个get请求
Jquery提供了一个函数，叫做$.get()引入Jquery以后，会提供两个变量1、$
2、jQuery
这两个都是函数数据类型
把这个函数当作一个对象，向他身上添加了一些成员（jQuer的全局方法，不需要依赖选择器，不需要元素集合，直接调用）

专门用来发送get请求
语法：$.get（地址，传递给后端的数据，回调给函数，期望返回的数据类型）
地址：请求地址（你可以自主拼接参数，不推荐）
数据：给后端的数据，可以写“key=value&key=value”，可以写{…}
回调：请求成功的回调，请求成功以后会触发
期望返回的数据类型：是不是执行解析响应体的操作
‘string’不解析
‘json’会执行一步JSON.parse（）

$.get('./server/get.php?a=100&b=200',function(){
	//res就是后端返回的响应体
	//如果你的最后一个参数就写了‘json’，会自动执行JSON.parse()
	console.log(res)
},'json')

$.get('./serve/get.php','c=300&d=400',function(res){
	//res就是后端返回的响应体了
	//如果你的最后一个参数写了‘json’，会自动执行JSON.parse()
	console.log(res)
},'json')

$.get('./serve/get.php',{e:500,f:600},function(res){
	//res就是后端返回的响应体了
	//如果你的最后一个参数写了‘json’，会自动执行JSON.parse()
	console.log(res)
},'json')

jQuery发送一个post请求
jQuery提供了一个全局方法叫做$.post()
专门用来发送post请求

发送post请求
语法：$.post(地址，携带给后端的数据，回调函数，期望后端返回的数据类型)四个参数的意义和$.get()一摸一样

$.post('./serve/get.php','c=300&d=400',function(res){
	console.log(res)
},'json')

$.post('./serve/get.php',{e:500,f:600},function(res){
	console.log(res)
},'json')

jQuery发送ajax请求的综合方法
可以由你来配置，决定发送get还是post请求
叫做$.ajax()
我们所有的请求都可以使用他来发送

语法：$.ajax(options)
options：就是本次请求的配置信息，是一个对象数据类型

配置信息里面可以填写的内容
1、url：请求地址，必填
2、asny：是否异步，默认是异步（true），可以选填非异步（false）
3、type/method：表示请求方式，默认是GET，可以选填其他请求方式，大小写无所谓
4、data：传递给后端的参数，可以实查询字符换的形式，可以是对象的形式
5、dataType：期望后端返回的数据类型，是否进行JSon.parse（）解析
6、success：接受一个函数数据类型，表示成功回调
7、error：接受一个函数数据类型，表示失败的回调（不光是请求失败会走失败的回调，当解析失败的时候，会走失败的回调）
8、timeout：设置一个超时时间（从发送请求开始计时，到达超时时间还没有接收到响应，会直接取消本次请求，到失败的回调函数）
9、cache：是否缓存（对于ajax请求默认缓存的true，可以选填false。如果选择缓存，那么不会有最后一个时间戳参数；如果选择不缓存，那么jQuery会在本次请求的末尾添加一个时间戳作为参数）
10、context：上下文（指定回调函数的this指向，jQuery默认回调函数的this指向jQuery封装的xhr对象。context传递的是谁，回调函数的this就指向谁）

参数：
Get请求会自主缓存，为什么会缓存？
因为两次发送同一个请求，浏览器就有可能会缓存下来

怎么证明两次请求是同一个请求
请求地址一模一样，就表示是同一个请求

不想你进行缓存

让每一次的请求地址不一样
每次请求的时候，再最后携带一个没有用的参数，值设置成时间戳

$.ajax({
	url:'./server/post.php',
	//type：‘GET’，//本次请求以GET方式请求
	//type：‘POST’，//本次请求以POST方式请求
	method:'POST',//本次请求以POST方式请求
	async:true,
	//data：‘a：100，b:200’
	data:{a:100,b:200},
	dataType:'json',//对响应体执行JSON.parse()操作
	//成功回调函数
	success(res){
		//res就是响应体，会根据dataType填写的内容来解析
		console.log(res)
	},
	error(){
		//xhr是jQuery封装的ajax对象
		//info是本次失败的错误信息
		//err错误的详细信息，但是不是很详细（有错误方式详细，有的错误方式不详细）
		console.log('本次请求失败了')
		console.log(xhr)
		console.log(info)
		console.log(err)
	}
	timeput:1000,//1s没有接受到响应就会取消本次请求
	cache:false,
	context:obj
})

jQuery发送ajax请求

jQuery发送ajax请求
jQuery对于ajax的封装
除了回调函数的形式接受结果
还封装了promise的形式接受结果
一个$.ajax()方法（可以选择书写回调函数的形式，也可以选择promise的形式）
注意：选择一种方式使用，不要都是用

跨域请求

非同源地址
解决方案
1、jsonp

前端利用script标签和src属性绕开同源策略
和ajax没有关系，实际上不是在发送ajax请求
实际上是在请求一个js我呢见

2、代理

由一个同源的代理服务端转发请求
对于前端来说，依旧是正常发送请求
只不过把地址书写成代理地址
依旧是直接使用$.ajax()方法来发送
只不过url位置书写代理标识符

3、cors

服务端允许指定客户端发送请求
和前端没有关系
前端正常发送请求
使用$.ajax()

jQuery发送jsonp请求
使用一个叫做$.ajax()的方法
因为jQuery封装ajax函数的时候做了一个判断
根据你dataType传递的值来判断
if（dataType===‘jsonp’）{
//走一套动态创建script标签
//动态添加src属性
//动态插入到body
//动态的删除script
}else{
//按照ajax的一套流程封装
}
只要把dataType书写成‘jsonp’
就会发送jsonp请求
注意：发送jsonp请求默认不缓存（自动添加一个_=时间戳）

jQuery发送jsonp请求专用的配置项
1、jsonp：表示携带函数名的那个key
2、jsonpCallback：表示你自主定义的函数名
默认值是jquery自己组装的jQuery-版本号随机数_时间戳

ajax钩子函数

jQuery的全局钩子函数
也叫做全局ajax函数
出现在ajax的不同阶段
在一个ajax的整个周期中，会在不同的位置执行的函数
我们管这中再一个事情的生命周期上各个不同时期触发的函数叫做钩子函数（不是自主出发的函数，而是挂在其他的事情上，由其他的事情发生过程来触发）

ajaxstart（）
表在同一个作用域下多个ajax请求的时候
第一个ajax请求之前

ajaxSend（）
表示在每一个请求发送之前触发
只要有一个请求要执行send方法了，就会先触发钩子函数

ajaxSuccess（）
表示在每一个请求成功之后触发
只要有一个请求成功了，就会触发一次

ajaxError（）
表示在每一个请求失败之后触发
只要有一个请求失败了，就会触发一次
根据jQuery判定的失败

ajaxComplete
$(window).ajaxComplete(function(){
console.log(有一个请求完成了)
})

jQuery多库并存

使用
1、要求你把jQuery引入再最后面
先暂时把变量民的所有权交给jQuery
2、执行一个方法，jQuery把变量名的所有权交出去
表示我不再占用这个名字了

noConflict()
交出$的控制权

noConflict(true)
交出 $和jQuery 的控制权

深浅拷贝

1．赋值
把一个对象的地址赋值给另一个变量
两个变量操作同一个空间

2.浅拷贝
把对象里面的每一个成员，复制一份一模一样的内容
放到另一个对象里面
当你有某一个对象成员是复杂数据类型的时候
这个成员依旧是一样的
只是操作对象里面一层可以没有关系，如果再深层次就会出现问题

//深拷贝
for(var key in o1){
	if(typeof o1[key]==='object'){
		if(o1[key].constructor===Array){
			o2[key]=[]
		} else {
			o2[key]={}
		}
		for(var key2 in o1[key]){
			o2[key][key2]=o1[key][key2]
		}
	}else{
		o2[key]=o1[key]
	}
}

对象空间里面不管多少层，都是相对独立，没有关系
for in 遍历赋值
只要碰到某一个是复杂数据类型对象或者数组
再次进入到这个数据类型里面进行二次遍历

1：利用递归思想实现深拷贝
把第一遍遍历放在一个函数里面
如果遍历的时候，发现有一个数据是数组或者对象
从新调用函数

2:json
不管多复杂的数据类型，转换成json以后就是字符串
字符串的赋值时基本数据类型
赋值以后再转换回来

jQuery深浅拷贝

jQuery 里面提供了一个进行深浅拷贝的方法
$ .extend()
语法：>$ .extend(对象1，对象2，对象3，…)
把从第二个参数开始的每一个对象的数据拷贝到第一个对象中
是一个浅拷贝

语法.$.extend(true，对象1，对象2，对象3，…)
把从第个参数开始的每一个对象的数据拷贝到第二个对象中
是一个深拷贝

jQuery插件拓展机制

1.扩展到jQuery本身，作为全局方法调用
语法：$ .extend({你扩展的方法 }
使用：$ .extend({a:function(){}})
相当于扩展了一个a方法再 jQuery 本身
如果你向调用，就书写$.a()

2.扩展到jQuery的原型上，就是给jQuery的元素集合使用
语法：$ .fn.extend({你扩展的方法})
使用：$ .fn.extend({a：function（）{}}）
相当于扩展了一个a方法给jQuery，的元素集合
如果你想调用，就书写$（选择器）.a（）

插件拓展全选

使用插件扩展
扩展己写方法来操作全选
先准备一些扩展的内容

selectAll
判断元素集合内是不是所有的元素的 checked 都是 true
将来使用的时候：$（元素）.selectA11（）
返回一个结果，true 或者false
true表示元素集合内所有的元素checked都是trueI
false表示元素集合内至少有一个元素checked是false

将来你调用的时候 $（元素）.setchecked（）
你如果不传递，默认是true,全都设置checked为true
如果你传递了一个false,全都设置 checked 为 false
需要遍历元素集合
为了达到隐式迭代
我们封装的方法可以使用
但是使用完毕，到这里就结束了，不能继续链式编程了
因为要达到链式编程，每一个方法都要依靠元素集合调用
我这个方法执行完毕以后，返回值是 undefined
不能继续链式编程了
再方法里面this就是元素集合
return this
就能向外返回一个元素集合
就可以继续链式编程了

3.getChecked()
这个方法拿到元素集合内第一个元素的checked 属性
判断 this 内有没有数据
如果有，那么就返回第一个checked 属性
如果没有，那么就返回false

jQuery入口函数

jQuery入口函数
其实就是window.onload这个函数
语法:$().ready(function(){})
区别
window.onload:所有资源加载完毕后执行
$().ready():DOM结构加载完毕就执行