ajax，jquery 小结

Ajax
什么是 ajax ？
Ajax
就是 JS 这个语言和 服务端 交互的手段
就是使用js的语法向后端发送请求
异步和后端交流的手段
最大特点就是局部刷新

a = async (异步)
j = javascript
a = and (和)
x = xml

发送 Ajax 请求
1.创建 ajax 对象
let xhr = new XMLHttpRequest()

2.配置请求信息
xhr.open(‘GET’, url, true)

3.发送请求
xhr.send()

4接受响应
xhr.onload = function () {
console.log(xhr.responseText)
}

ajax 状态码
readyState 状态码
描述当前处于ajax的哪一步上
0：表示创建一个ajax对象成功了
1：表示配置请求信息成功了（也就是执行完了open）
2：表示响应体已经回到了浏览器（但是还不能使用 因为此时还是一个响应报文的形式）
3：浏览器正在解析响应报文
4：浏览器分离响应体成功 可以使用了 本次请求结束
onreadystatechange 事件 当状态码改变 会触发(0 -4 )

闭包和继承
闭包
闭包的条件
1.在函数A内部直接或者间接返回一个函数B
2.在函数B内部使用这 函数A内部的数据
3.在A函数外部有一个变量接受这 函数B(一个不销毁的函数执行空间)
（函数内部的函数）(函数内部返回函数 才是闭包空间)

闭包的特点
1.延迟了变量的生命周期
2.函数外部可以操作函数内部的数据
3.保护变量私有化

统一有一个缺点
一个不会销毁的函数执行空间
容易导致内存泄漏

闭包的作用
当你需要延迟变量的生命周期的时候
或者你需要访问函数内部的私有变量的时候
（如果有别的方法 尽量不适用闭包函数）

间接的返回一个函数 （当你需要访问多个私有数据）
return 一个对象 或者数组 这个对象或者数组里面有个函数

继承
原型继承 (改变原型链的方式继承)
Student.prototype = new Person()
缺点: 继承的属性 没有继承在自己的身上
传递参数要在多个地方传递 不利于维护 阅读

借用构造函数继承
function Student() {
Person.call(this) //用的call 改变this指向
}
优点: 借用来的属性在自己身上 不需要_proto_ 上去找
缺点: 只能继承父类的属性 不能继承父类prototype上的方法
(一般构造函数的方法写在原型上 如果写在构造函数体内 如果 new 的实例越多 就开辟更多的函数空间 更占内存 所以把方法写在原型 上面)

组合继承
function Student() {
Person.call(this) //用的call 改变this指向
}
Student.prototype = new Person()
(一起使用)

es6的继承
class Student extends Person { (extends 关键字)
constructor() {
super() //在子类里面调用 借用父类的构造函数体
}
}
（class 子类 extends 父类）

jQuery
jQuery是一个 前端类库(方法库， 工具库);
jQuery 里面 95% 都是方法

jQuery 的优点:
无双不能的选择器
无处不在隐式迭代
无与伦比的链式编程
jQuery号称 全兼容

jQuery 的特殊选择器:
:first 获取第一个
:last 获取最后一个
:eq(索引) 获取索引位置的元素
:odd 获取索引为奇数
:even 获取索引为偶数的

jQuery 筛选器
用在 jQuery 选择的元素集合后面
都是方法 为了对选出来的集合 再进行筛选

first() 筛选当前集合的第一个
last() 筛选当前集合的最后一个
eq(n) 筛选当前集合索引为 n 的
next() 筛选当前元素的下一个兄弟元素
prev() 筛选当前元素的上一个兄弟元素
nextAll() 筛选当前元素的下面的所有兄弟元素
prevAll() 筛选当前元素的所有上面的兄弟元素
nextUntil(选择器) 筛选当前元素下面所有的兄弟元素 直到 选择器 为止 不包含 选择器
prevUntil(选择器) 筛选当前元素上面所有的兄弟元素 直到 选择器 为止 不包含 选择器
parent() 筛选当前元素的父元素
parents() 筛选当前元素的所有父元素 直到html 包括html
parents( 选择器 ) 筛选当前元素的所有父元素 的 符合 选择器 的 元素
parentsUntil( 选择器 ) 筛选当前元素上面所有父元素直到 选择器 为止 不包含 选择器
children() 筛选当前元素的 所有子元素
children( 选择器 ) 筛选当前元素 所有子元素 为 选择器的
siblings() 筛选当前元素的所有兄弟元素
find ( 选择器 )
(1) 在一个元素里面找后代 符合选择器的元素
(2)在一个元素集合里面找 后代元素
index()
找到当前元素的索引位置
拿到是一个数字

jQuery 操作文本内容

html() 操作文本内容 识别 html标签 可以拿到标签
如果是一个集合 那么就只能获取该集合的第一个元素的 内容 设置的时候 获取多少 设置多少 覆盖式写入

text() 操作文本内容 不识别html标签 拿不到标签
如果是一个集合 那么获取该集合 的所有内容

设置的时候 获取多少 设置多少 覆盖式写入

val() 操作 input 的 value 属性
如果是一个集合 那么就只能获取该集合的第一个元素的 value 设置的时候 获取多少 设置多少 覆盖式写入
都是读写的方法 不传参数 就是读取 写参数 就是设置
jQuery 操作类名
addClass( 要添加的类名 ) 添加类名
removeClass( 要删除的类名 ) 删除类名
hasClass( 要查找的类名 ) 判断有没有类名
toggleClass( 要切换的类名 ) 切换类名

jQuery 操作样式
css()
还可以链式编程
用法

css(‘width’) 获取
不管行内 非行内 都能获取 但是 获取到的 带 单位
css( ‘width’, ‘300’) 设置
获取多少 设置多少 设置的时候单位可以不写 默认添加px
css ({ }) 一下设置多个
传一个对象 可以一次性设置多个
jQuery 操作元素 属性

attr() 是一个读写的方法
attr(要读取的属性名) 读取
attr(属性名 , 属性值) 设置
所有属性都会显示在标签上
不管你设置的 是什么数据类型 都会变成字符串

removeAttr() 用来删除 attr（） 设置的属性
获取到多少 就删除多少 (针对 自定义属性)
可以删除 原生属性

prop() 一个读写的方法
prop(要读取的属性名) 读取
prop(属性名 , 属性值) 设置
非原生属性 不会显示在标签上
存储的是什么数据类型 获取就是什么数据类型
可以获取状态 attr() 不行 比如: checked

removeProp() 用来删除 prop（） 设置的属性
获取到多少 就删除多少(针对 自定义属性)
不能删除原生 属性

data() 一个读写的方法
data(要读取的属性名) 读取
data(属性名 , 属性值) 设置
data() 设置的都是自定义属性 和原生属性没关系
设置的属性 不会显示在 标签上
把自定义的属性 放在一起 规划一下
可以获取 H5 标准自定义属性
data- 就是标准自定义属性

removeData() 删除 data() 设置的属性

三个方法存储内容:

attr() 设置的自定义属性存储在标签身上
prop() 设置的自定义属性存在 对象里
data() 设置的自定义属性存在 专门的空间里
jQuery 绑定事件

on()
参数描述

on(事件类型 , 事件处理函数)
获取多少 元素 设置多少

on(事件类型 , 事件委托 , 事件处理函数)

on（事件类型 , 复杂数据类型 ,事件处理函数）
复杂数据类型是 触发事件传递的参数

on( 事件类型 , 事件委托 , 任意数据类型 , 事件处理函数)

on({ }) 传一个对象 可以绑定多个事件

one() 方法
参数和 on 一模一样

off() 方法 解绑事件
off(事件类型) 解绑该事件类型的所有事件函数
off(事件类型 , 事件处理函数 ) 解绑该事件类型 的 该事件处理函数