jQuery

（一）、jQuery简介

引入jQuery后，全局暴露两个变量
1.jQuery
2.$

插件、库和框架的区别
插件：实现某一个单一功能
库：封装各种功能和你需要的工具
框架：有自己完整的生态系统

（二）、选择器

选择器：对元素的获取

基本选择器

选择子元素

属性选择器也适用

特殊选择器

：first 第一个
：last 最后一个

（三）、筛选器

first() 元素集合里面的第一个

last() 元素集合里面的最后一个

eq(索引) 元素集合里面指定索引的那一个

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

nextAll
1.元素集合.nextAll()       获取到当前元素后面的所有兄弟元素
2.元素集合.nextAll(选择器) 获取到当前元素后面所有元素中指定选择器的那一个

nextUntil()
1.元素集合.nextUntil()
2.元素集合.nextUntil(选择器) 获取到当前元素后面所有兄弟元素，直到选择器元素为止(不包含选择器)

prev() 当前元素的上一个元素

prevAll()
1.元素集合.prevAll() 获取到当前元素上面的所有兄弟元素
2.元素集合.prevAll(选择器) 获取到当前元素上面的所有兄弟元素中指定选择器的那一个

prevUntil()
1.元素集合.prevUntil() 获取到当前元素上面所有的兄弟元素
2.元素集合.prevUntil() 获取到当前元素上面所有的兄弟元素，直带选择器元素为止(不包含选择器)

parent()
获取到当前的父元素

parents()
1.元素集合.parents()  拿到结构父级的所有父元素
2.元素集合.parents(选择器)  拿到结构父级里面所有父元素中符合选择器的那一个元素

children()
1.元素集合.childern 拿到该元素的所有子元素
2.元素集合.children(选择器) 拿到该元素的所有子元素中符合选择器的那一个元素

sinblings() 拿到该元素的所有兄弟元素，自己除外

find() 找到该元素中所有后代元素里面符合选择器条件的元素

index() 获取到的是该元素在其父元素里面的索引位置

（四）、jQuery操作文本

超文本内容：

文本内容：

value值：

（五）、jQuery操作元素类名

（六）、jQuery操作元素样式

1-3. 语法：元素集合.css({样式名1：样式值1，样式名2：样式值2，…}) 里面加的是对象
批量给行内设置样式
也有隐式迭代
单位是px可以不写

（七）、jQuery基础绑定事件

选项卡：

$('ul>li').on('click',funtion(){
    $(this).addClass('active').siblings().removeClass('active')
    $('ol>li').removeClass('active').eq($(this).index()).addClass('active')
})

（七）、jQuery的事件绑定

1-5.元素集合.on({事件类型1:事件处理函数，事件类型2:事件处理函数})
一次性给元素绑定多种事件
没法传递参数和事件委托

2.one()
用来绑定事件的方法
用法与on()相同
绑定的事件只能执行一次

3.off()

4.trigger()

（八）、jQuery的事件函数

唯一特殊事件：

（九）、jQuery的节点操作

1.创建节点：

2.插入节点：

2-3prepend()
语法：父元素.prepend(子元素)
把子元素插入到父元素内容，放在最前面的位置

2-4prependTo()
语法：子元素.prepend(父元素)
把子元素插入到父元素内容，放在最前面的位置

外部插入节点：

3.删除节点

4.替换节点

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

（十）、jQuery操作元素属性

attr和removeAttr

prop和removeProp


data和removeData

（十一）、jQuery获取元素尺寸

三套方法四种使用方式
不管在内面是否有占位，都能获取到元素的尺寸
1.

2.

4.

（十二）、jQuery获取位置关系

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


得到的是定位的数据
如果设置的是bottom和right会自动转化为top和left

（十三）、jQuery的基础动画

show() 显示
hide() 隐藏
toggle() 切换
三个语法相同，都是操作display
方法名(运动时间，运动曲线，回调函数)
回调函数是结束后触发

（十四）、jQuery的折叠动画

slideDown() 下拉隐藏
slideUp() 上拉隐藏
slideToggle() 切换显示和隐藏
定位bottom0 实现上往下拉

（十五）、jQuery的渐隐渐现动画

操作元素的opacity 达到效果

faseIn()
opacity 0-1

fadeOut()
opacity 1-0

fadeToggle()
切换

方法名(时间，运动曲线，回调函数)

fadeTo()
运动到指定透明度
方法名(时间，指定透明度，运动曲线，回调函数)

（十六）、jQuery的综合动画

可以按照设定去进行运动

animate({},时间，运动曲线，回调函数)
{}书写需要运动的属性
注意：颜色相关属性、2d和3d动画无法运动

（十六）、jQuery的停止动画

stop()
当代码执行到这句的时候，不管运动到什么程度，立刻停下来
运动到什么位置就停止在什么位置

finish()
当代码执行到这句，直接去到运动结束位置
直接完成本次动画

（十七）、jQuery发送Ajax

get请求

post请求

综合方法

async：是否异步，默认异步true
type/method：默认是get请求，可以更改其他请求方式
data：传递给后端的参数
可以是字符串/对象
dataType：期望后端返回的数据类型，是否执行json.pare()解析
success：接受一个函数数据类型，表示成功回调
success（res）{}
error：接受一个函数数据类型，表示失败回调 （解析失败也会走失败回调）
error(xhr,info,err){
xhr：封装后的Ajax对象
info：本次失败的错误信息
err：错误的详细信息
}
timeout:超时时间，超过时间还未响应会取消本次请求，走错误回调函数
cache：是否缓存，默认缓存true（请求地址相同会导致缓存）
缓存末尾没有时间戳
context：改变this指向 传递的谁this就指向谁

发送Ajax的promise：

回调函数和promise形式都写上，两个都会执行

（十八）、Ajax发送跨域请求

使用$.ajax()
只有把dataType书写成jsonp就会发送jsonp请求
jsonp默认不缓存

（十九）、全局钩子函数

由其他事情发生过程触发的函数
ajaxStart()
在同一个作用域下多个ajax请求时
第一个ajax请求之前会执行

ajaxSend()
表示每一个请求发送前触发
只要有一个请求要执行send，就会触发

ajaxStop()
表示在同一个作用域下最后一个ajax结束以后触发
当有多个请求，会在最后一个结束以后触发

（二十）、多库并存

将jQuery引入在最后面
暂时将变量名所有权交给jQuery
noConflict()交出变量名的所有权 交出$的控制权noConflict(true)交出$和jQuery的控制权
const 变量=$.noConflict(true) 自定义一个控制权

（二十一）、深浅拷贝

3.深拷贝
对象空间里面不管多少层，都是相对独立，没有关系
for in 遍历赋值
只要碰到复杂数据类型 对象/数组
再次进入里面进行二次遍历
利用递归思想实现深拷贝
方法1： 第一遍遍历放在函数里
如果有数组或对象重新调用函数
方法2：json

递归思想方法：

json方法：

jQuery的深浅拷贝

注意：进行拷贝必须传至少两个参数

（二十二）、jQuery的插件扩展

方法1：

方法2：

（二十三）、jQuery的入口函数

$().ready(funtion(){}) DOM结构加载完毕就执行
$(funtion(){}) 入口函数简写