jQuary

jQuery的选择器

基本选择器

1.语法：$(选择器)
2.返回值：满足条件的所有元素（Id选择器除外，只选择第一个）

放在一个数组内返回，以集合的形式，叫做jQuery元素集合

css如何获取标签，这里就怎么填写参数

<script>
console.log($('div'))
console.log($('#box'))
console.log($('.box'))
console.log($('div > ul > li:nth-child(odd)'))
</script>

特殊选择器

1.语法：$(选择器)
对你已经存在的选择器进行修饰
.first
.last
.eq(数字)从0开始按照索引的第几个
.odd按照索引排列的奇数个
.even按照索引排列的偶数个

<script>
console.log($('li:odd'))js
console.log($('li:nth-child(even)'))css
</script>

筛选器
1.对jQuary的元素进行二次筛选
2.直接进行链式编程

jQuery筛选器

对元素进行二次筛选，只有jQuary元素集合才可以使用，原生DOM不能使用
1.first()
元素集合里的第一个

<script>
console.log($('li').first())
</script>

2.last

<script>
console.log($('li').last())
</script>

3.eq(索引)

<script>
console.log($('li').eq(2))

</script>

4.next()
当前元素的下一个

<script>
console.log($('li').next())

</script>

5.nextAll
语法：
1.元素集合.nextAll()获取当前元素后面的所有兄弟元素
2.元素集合.nextAll（选择器）获取当前元素后面所有元素中指定的哪一个
6.nextUntill()
语法：1.元素集合.nextUntil()获取当前元素后面所有兄
弟元素
2.元素集合.nextuntil(选择器)获取当前元素后面所有兄弟元素，直到选择器元素为止（不包含选择器元素）
7.prev()
当前元素的上一个元素
8.prevAll()
.元素集合.prevAll()获取当前元素后面所有兄
弟元素
.元素集合.prevAll(选择器)获取当前元素后面所有元素中指定的哪一个
9.prevUntil()
语法：1.元素集合.prevUntil()获取当前元素后面所有兄
弟元素
2.元素集合.prevuntil(选择器)获取当前元素后面所有兄弟元素，直到选择器元素为止（不包含选择器元素）
10.parent拿到当前元素父级元素
11.parents()
.元素集合.parents()拿到结构父级所有元素
.元素集合.parents()拿到结构父级里面
12.children()
元素集合.children()拿到该元素所有子元素
元素集合.children(选择器)拿到该元素所有子元素中符合选择器的元素
13.sinblings()
拿到该元素的兄弟元素自己除外
14.find
拿到该元素中所有后代元素里面符合选择器条件的元素
15.index()
在父元素的第几个

操作文本内容

1.html()
语法：
元素集合.html()
获取该元素的超文本内容，以字符串形式返回
元素集合.html（‘内容’）
设置元素集合内元素的超文本内容
完全覆盖式写入
隐式迭代：元素集合内部有多少元素就写入多少
2.text()
语法：
元素集合.text()
获取该元素文本内容，以字符串形式返回
元素集合.text()
设置集合内元素的文本内容
完全覆盖式写入
隐式迭代：元素集合内部有多少元素就写入多少
3.val()
语法：
元素集合.val()
获取元素集合内value值
元素集合.val(‘内容’)
设置集合元素内的value值
完全覆盖式写入
隐式迭代：元素集合内部有多少元素就写入多少

操作元素类名

1.addclass()
添加元素类名
2.removeclass()
删除元素类名
3.hasClass()
判断有没有类名
4.toggleClass()
切换类名
如果原先有就是删除
如果原先没有就是添加

<script>
$('div').addClass('box')
$('div').removeClass('box')
console.log($('div').hasClass('box'))
</script>

操作元素样式

1.css()
语法：元素集合.css(‘width’)
获取元素的某一个样式的值，不管行内还是非行内都可以获取

jQuery基础绑定事件

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

jQuery事件函数

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

jQuery唯一的特殊事件

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

jQuery节点操作

原生js的节点操作：
创建节点，插入节点，删除节点，替换节点，克隆节点
jQuery的节点操作
创建节点，插入节点，删除节点，替换节点，克隆节点
创建节点
( h t m l 结构字符串 ) 当 (html结构字符串) 当(html结构字符串)当()里面传递一个选择器的时候，就是获取元素
当( ) 里面传递一个 h t m l 结构字符串的时候，就是创建元素节点当 ()里面传递一个html结构字符串的时候，就是创建元素节点 当()里面传递一个html结构字符串的时候，就是创建元素节点当()里面传递了一个DOM元素节点的时候，就是转换成jQuery元素结合

插入节点

1.内部插入（父子关系插入）
append（）
appendTo（）
prepend（）
prependTo（）
2.外部插入（兄弟关系插入）
after（）
insertAfter()
before()
insertbefore()

删除节点

remove（）
empty（）

替换节点

replaceWith（）
replaceAll（）

克隆节点

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

jQuery操作元素

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

<script>
//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的属性

</script>

jQuery获取元素尺寸

1.width（）、height（）
获取的是元素内容位置的尺寸
2.innerWidth（）、innerHeight（）
获取的是元素内容+padding区域的尺寸
3.outerWidth（）、outerHeight（）
获取的是元素内容+padding+border区域的尺寸
4.outerWidth（true）、outerHeight（true）
获取的是元素内容+padding+border+margin区域的尺寸

jQuery操作位置关系

操作元素相对于某一个点的位置关系
1.offset（）
是一个读写方法
读取
语法：元素集合.offset
返回值：一个对象，里面包含一个X信息一个Y信息
相对谁：相对页面左上角的绝对坐标
注意：读取出来一个对象，你需要一个值得时候要继续".".不能链式编程
设置
语法：元素集合.offset（{top：xxx，left：xxx}）
设置的：设置的是相对于页面左上角的绝对位置
例子：$(‘div’).offset({top:30,left:30})
一定会把这个div挡在距离左上角30 30的位置
注意：设置的时候，如果父子元素都要动，要考虑先后顺序
2.position（）
是一个只读方法
读取
语法：元素集合.position()
返回值：一个对象，里面包含一个x信息，一个y信息
就是元素的定位关系
如果你定位的是right和bottom，那么会自动计算成left和top

jQuery动画

1.show（）
显示
2.hide（）
隐藏
3.toggle（）
切换，本身显示就隐藏，本身隐藏就显示
上面三个方法操作的就是display的none和block
三个语法相同：方法名（运动时间，运动曲线，回调函数）
运动时间：多久时间运动结束
运动曲线：上面方式运动
回调函数：运动结束后触发

jQuery的折叠动画

1.slideDown（）
下拉显示
2.slideUp（）
上拉隐藏
3.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()
当大妈执行到之举的时候，不管运动到什么程度，直接去到运动结束的位置
直接完成本次动画

jQuery发送ajax请求

1.jQuery发送了一个get请求
Jquery提供了一个函数，叫做. g e t ( ) 引入 J q u e r y 以后，会提供两个变量 1 、 .get() 引入Jquery以后，会提供两个变量 1、.get()引入Jquery以后，会提供两个变量1、2、jQuery
这两个都是函数数据类型
把这个函数当作一个对象，向他身上添加了一些成员（jQuer的全局方法，不需要依赖选择器，不需要元素集合，直接调用）
专门用来发送get请求
语法：$.get（地址，传递给后端的数据，回调给函数，期望返回的数据类型）
地址：请求地址（你可以自主拼接参数，不推荐）
数据：给后端的数据，可以写“key=value&key=value”，可以写{…}
回调：请求成功的回调，请求成功以后会触发
期望返回的数据类型：是不是执行解析响应体的操作
‘string’不解析
‘json’会执行一步JSON.parse（）

jQuery发送一个post请求
jQuery提供了一个全局方法叫做$.post()
专门用来发送post请求
发送post请求
语法：. p o s t ( 地址，携带给后端的数据，回调函数，期望后端返回的数据类型 ) 四个参数的意义和 .post(地址，携带给后端的数据，回调函数，期望后端返回的数据类型) 四个参数的意义和.post(地址，携带给后端的数据，回调函数，期望后端返回的数据类型)四个参数的意义和.get()一摸一样

2.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就指向谁）

jQuery发送ajax请求

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

跨域请求

非同源地址解决方案
1.jsonp
前端利用script标签和src属性绕开同源策略
和ajax没有关系，实际上不是在发送ajax请求
实际上是在请求一个js我呢见
2、代理
由一个同源的代理服务端转发请求
对于前端来说，依旧是正常发送请求
只不过把地址书写成代理地址
依旧是直接使用$.ajax()方法来发送只不过url位置书写代理标识符3、cors服务端允许指定客户端发送请求和前端没有关系前端正常发送请求使用$.ajax()

ajax钩子函数

jQuery的全局钩子函数
也叫做全局ajax函数
出现在ajax的不同阶段
在一个ajax的整个周期中，会在不同的位置执行的函数
我们管这中再一个事情的生命周期上各个不同时期触发的函数叫做钩子函数（不是自主出发的函数，而是挂在其他的事情上，由其他的事情发生过程来触发）
1.ajaxstart（）
表在同一个作用域下多个ajax请求的时候
第一个ajax请求之前
2.ajaxSend（）
表示在每一个请求发送之前触发
只要有一个请求要执行send方法了，就会先触发钩子函数
3.ajaxSuccess（）
表示在每一个请求成功之后触发
只要有一个请求成功了，就会触发一次
4.ajaxError（）
表示在每一个请求失败之后触发
只要有一个请求失败了，就会触发一次
根据jQuery判定的失败

jQuery多库并存

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

深浅拷贝

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

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

jQuery入口函数

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