必备-1.js各数据类型必知必会方法

最新推荐文章于 2023-04-30 00:30:00 发布

想淋场大雨

最新推荐文章于 2023-04-30 00:30:00 发布

阅读量486

点赞数 6

分类专栏：必备文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/pinganaaa/article/details/120928315

版权

必备专栏收录该内容

19 篇文章 6 订阅

订阅专栏

必备-1.js各数据类型必知必会方法

String

ES5的11个，ES6的6个

ES5

除了replace，其他常用方法不会改变原字符串

一共11个方法。

三对方法：
- charAt():得到指定位置字符，如果超出范围则返回undefined
- charCodeAt():得到指定位置字符的ASCII码
- indexOf（）：检索字符在字符串中第一次出现的位置
- lastIndexOf():检索字符在字符串最后一次出现的位置
- toUpperCase()：将字符串全部转为大写
- toLowerCase():将字符串全部转为小写
三个截取子串方法：
- subString（）：提取子串
- substr（）：提取子串
- slice（）：提取子串
一个其他方法：
- replace():替换指定字符
一个类型转换方法：
- split(“分隔符”):根据指定符号作为分割符将字符串分割成数组

ES6新增

字符串新增的常用方法有6个：

.includes(“ab”,2):判断字符串中是否包含某些字符或连续字符串，返回布尔值
- 第一个参数：想判断的字符串
- 第二个参数：开始搜索的位置
- 字符串的引用：网址参数键值对拼接，判断是否已经存在问号
.padStart(5,“ab”)/.padEnd(5,“ab”):
- .padStart从开头/.padEnd从结尾，补全字符串长度，原字符串长度大于或等于目标长度，则不进行补位
- 第一个参数：补全以后字符串应该有的长度
- 第二个参数：想用什么字符进行补位
- 如果省略第二个参数，默认使用空格补全长度
- 常应用在规范显示日期格式
.trimStart()/.trimEnd():清除字符串的首或尾空格，中间的空格不会清除
.trim():首尾空格都清除
- trim常用于表单提交的数据格式验证

Array

对象静态方法2个，ES5公有方法有20个，ES6公有方法有8个，一共30

Array静态方法2个

Array.from():将其他数据类型转换成数组
- 第一个参数：要遍历的对象
- 第二个参数： 回调函数，作用类似于数组的map方法，用于对每个元素进行操作，将处理后的值放入返回的数组
- 第三个参数：修改this指向，箭头函数无法修改this指向
- 参数类型可以是：
  - 所有可遍历的，但是可遍历的使用展开运算符更方便:[…str]
  - 拥有length属性的任意对象，只会转换length值个数据项。对象不够length值个键值对，用undefined填充
Array.isArray()：判断变量是否为数组，返回布尔值

ES520个

一共20个方法。

3小对：
- .push():数组尾部插入
- .pop():数组尾部弹出
- .shift():数组头部弹出
- .unshift():数组头部插入
- .indexof():获取指定值在数组中首次出现的下标，没有返回-1
- .lastIndexOf():获取数组中最后一次出现的数据下标
3个改变：
- .sort():排序
- .concat():多数组合并，需要新变量接收新数组，原数组不变
- .reverse():数组所有数组项置反
2个截取：
- .slice():截取子数组
- .splice():插入，替换，删除
2个转换类型：
- .toString():转为字符串
- .join():数组转字符串
7个迭代方法：
- .forEach():遍历数组项，不会返回新数组
- .map():遍历数组，可以返回一个新数组，会返回新数组
- arr.filter(callback)：筛选，迭代数组中的每一项，将条件符合的数据项放到一个数组中返回。
  - 筛选条件：是你回调函数return 后面加的条件。
  - 返回：新数组。
  - 与arr.map相似。
  - 如果符合条件的是基本类型，就复制值，如果是引用类型，则复制引用地址
- arr.reduce/reduceRight((x,item,index)=>{return 值}):迭代数组中的每一项,而且可以获取上一次迭代处理的结果[回调函数中的返回值]，再继续处理，实现处理结果的累积操作
  - 第一个参数：函数，存在三个实参
    - “x”:初始值是数组的第一项值，从数组第二项开始迭代
    - 每次迭代return的值，会赋值给下一项的x，实现累积操作
  - 第二个参数：x的初始值，没有第二个参数会比有第二个参数少迭代1次
    - 如果没有第二个参数，则x的初始值是数组的第一项值，数组从第二项开始迭代：首次迭代：x=arr[0] item=arr[1] index=1
    - 如果有，则x的初始值为第二个参数，数组从第一项开始迭代：首次迭代：x=第二个参数值 item=arr[0] index=0
- 2个判断数组各项是否符合条件：
  - arr.some(item=>{return item>10}):依次迭代数组中的每一项，只要一个item大于10，结果为true
  - arr.every(item=>{return item>10}):依次迭代数组中的每一项，只有全部item大于10，结果才为true，否则结果为false

ES6新增8个

arr.includes（“a”，3）:判断数组中是否有某个成员，判断标准是基本严格等于（===），但认为NaN全等于NaN
- 第一个参数：检测是否包含某个数据项
- 第二个参数：从第几项开始检测
- 应用：去重
arr.fill(value[start,end]):将arr的start到end索引的多项填充为value值，如果不写start和end，则表示所有项改为value值
arr.flat(n):数组扁平化,将多维数组降维度，原数组不变，返回新数组
- arr.flat(1):表示将arr降一维，如果arr开始是四维，那么现在是三维的
- arr.flat(Infinity):无论arr是几维，都扁平化为一维数组

arr.find()/findIndex():find找到某个值/findIndex找到某个值对应索引

find(10)：找到满足条件的某一个值，立即返回
findIndex：找到满足条件的某一个值，立即返回它的索引
第一个参数：回调函数，与forEach里的回到函数用法相同，函数体内写查找条件
第二个参数：改变this指向，如果不写第二个参数，默认指向window，箭头函数无法修改this

    var a = [2, 3, 4, 5, 10, 12].find(function (value, index, arr) {
        //返回条件
        return value > 9;
    },document);//this指向了document
  
    var b = [2, 3, 4, 5, 10, 12].findIndex(function (value, index, arr) {
        //返回条件
        return value > 9;
    })
    console.log(a);//10,返回的是属性值
    console.log(b);//4,返回的是索引值

应用：数据的筛选

arr.keys():得到的是索引的可遍历对象，可以遍历索引值。
arr.values():得到的是数据项的可遍历对象,可以遍历数据项值。
arr.entries():得到的是数据项+索引组成的可遍历对象，遍历出索引，值组成的数组
- 可以用解构赋值的方式，单独获取索引或数据项：for(var [key,value] of arr){}

Object

公有方法5个

把Object视为一个实例的私有方法21个

ES6新增的方法有：assign、is、getOwnPropertySymbols、Refelect对象

Object.prototype上的公有方法5个:obj.xxx()

toString:检测数据类型的：Object.prototype.toString.call([value]);
obj.valueOf()：返回obj的原始值,但是有些对象不能转成原始值类型，如：Object、Function...
obj.hasOwnProperty('property'):检测obj对象中是否存在property私有属性
obj.propertyIsEnumerable('property1')：判断obj对象中property1属性是否可枚举(遍历、迭代)
obj1.isPrototypeOf(obj2)：测试obj1是不是obj2的原型

把Object作为一个实例对象，其私有方法：Object.xxx()

跟规则没关系的方法3个：
- Object.assign(obj1,obj2,...):合并两个(或多个)对象，让obj2及以后的对象替换obj1中的内容返回obj1【ES6】
- Object.create(obj):创建一个空对象，并且把obj作为其原型对象
- Object.is(value1,value2):基于三个等于号，绝对相等进行比较的【ES6新增】
  - 特殊：Object.is(NaN,NaN)->true:这里可以判断一个值是不是NaN，做的也是全等比较
对对象的属性操作的方法8个：
- Object.defineProperty(obj,key,descriptor):对当前对象中的某个属性进行监听或劫持，以及设置一些规则
  - ```
  let proxy={...obj};
  
  Object.definePropery(obj,'name',{
  //以下三个属性的值默认为false
      //是否可以基于delete删除
      configurable:true,
       //是否可以修改值【不能和get/set】
      writable:true,
      //是否可以枚举的，如果是不可枚举的属性，则基于for/in循环或者Object.keys()等操作都无法获取这个属性
      enumerable:true,
      //当我们获取obj的name属性值的时候，会触发Getter函数，方法返回的值就是获取的属性值
      get(){
  	return obj.name;//不能这样用，因为每次获取都会触发get事件，最终形成死循环
      return proxy.name;//return的时候用代理对象，不让它重复触发get方法
  	},
      //当我们设置name属性值的时候，会触发SETTER函数，value是需要新设置的值
      set(vaule){
  
        	obj.name=value;//不能这样用，因为在这里设置，仍然会触发set方法，最终形成死循环
          proxy.name=value;//能这样用，使用代理对象，不让它重复触发set方法
      }
  })
  	//writable属性与get/set()方法不能同时存在
```
- descriptor：{对象类型}，描述，可以对对象中某个属性进行监听或劫持，可以规定属性是否可以【删、改、遍历…】
  - configurale:true:是否可以基于delete删除name属性
  - enumerable:true:是否是可枚举的name属性，如果不可枚举，则for/in/Object.key()等操作无法遍历到该属性
  - writable:true:是否可以修改值【只要设置了该描述，不管true或false，都不能使用get/set方法】
  - get(){return xxx}:对获取obj.name属性操作进行拦截，return的值，就是真正获取到的值
  - set(value){xxx}:对设置obj.name=value操作进行拦截，并执行函数体内的操作
- Object.getOwnPropertyDescriptor(obj,key):获取obj中key属性所设置的规则的状态(可删除/枚举/修改…)，
- Object.getOwnPropertyDescriptors(obj):获取obj中每一个属性所设置的规则的状态
- 获取当前对象不同类型的键或值5个：
  - Object.getOwnPropertyNames(obj):获取当前对象所有非Symbol类型的私有属性【含不可枚举的】
  - Object.getOwnPropertySymbols(obj):获取当前对象所有Symbol类型的私有属性【含不可枚举的】
  - Object.keys(obj):获取当前对象所有非Symbol类型且可枚举的私有属性名【不能获取不可枚举的】
  - Object.values(obj):获取当前对象所有非Symbol类型且可枚举的私有属性值
  - ES6新增一个Reflect对象，可以更快捷的对“对象”进行相关操作
    - Refelect.ownKeys(obj):获取所有私有属性【包含各种类型及可枚举和不可枚举的】
冻结2个：不让其设置defineProperty（get/set）劫持
- Object.freeze(obj):冻结，把一个对象进行冻结，目的是让其不能在再基于Object.defineProperty做劫持，后续可以基于Object.isFrozen(obj):检测对象是否是冻结的
封存2个：允许修改已存在的属性，禁止删除添加属性
- Object.seal(obj):封存对象，不允许添加或删除对象中的属性,但允许修改对象中存在的属性
- Object.isSealed(obj):判断一个对象是否封存了。
阻止扩展2个：禁止添加属性
- Object.preventExtensions(obj):把obj变为不可扩展对象
- Object.isExtensible(obj):判断一个对象是不是可扩展对象
获取和设置对象的原型2个：
- Object.getPropertyOf(obj):获取obj.__proto__指向的原型
- Object.setPropertyOf(obj,property):设置obj原型对象obj.__proto__===prototype
对象的属性与二维数组互相转换2个：
- Object.entries(obj):将对象中的每个可枚举的键值对转为数组，返回一个二维数组
- Object.fromEntries(arr):将二维数组的各数据项，转换为对象，返回一个对象

Math

ES5

一共10个常用方法：

两小对：

Math.ceil(1.2):2,向上取整
Math.floor(1.9)：1,向下取整
Math.min(1,2,3):求最大值

Math.max(1,2,3):求最小值

不能够求数组中的最大值，需要用展开运算符…转换一下

Math.min(...[1,2,3]);//结果为3 
...能够将数组展开为1,2,3

//两个数组拼接成一个数组，再加数据项，也可以用...展开运算符
var ary1=[1,2,3];
var ary2=[5,6,7];

var newary=[...ary1,...ary2,10];//结果就是拼接够的数组

2个求开平方和幂次方
- Math.sqrt(4):2，求开平方
- Math.pow(3,2):求幂次方，3的2次方
1个求随机数
- Matn.random():随机数，获取包含0，但不包含1的随机小数
  - 求n-m之间的随机小数：Math.random()*(m-n)+n;
  - 求n-m之间的随机整数,包含m：Math.round(Math.random()*(m-n)+n);
1个求四舍五入
- Math.round(1.5):2，四舍五入
- Math.round(-1.5),-1，负数比较特殊，只要比-1.5小就是舍，只要比-1.5大一点点，比如-1.51得到的结果就是-2
2个求圆周率和绝对值的
- Math.abs(-1):求绝对值，abs就是absolute的缩写，绝对的意思
- Math.PI:得到圆周率

Map

ES6

实例6中方法，1个属性

方法：

let m=new Map();创建一个map实例

m.set(键名：值)：向m集合实例中添加一个成员
- m.set(键名：值).set(键名：值)：可以使用链式写法，同时插入多个成员
- 使用set添加的新成员，键名如果已经存在了，后添加会覆盖新添加的
m.get(键名)：获取指定键名的成员，如果键名不存在，返回undefined，键名不一定是字符串
m.has(键名)：检查m实例中是否存在指定键成员，返回布尔值
m.delete(键名)：删除指定键名的成员，如果不存在该成员，什么也不会发生
m.clear()：无需参数，清除所有的成员
m.forEach(function(val,key,map){},document):遍历所有成员,forEach中存在两个参数
- 第一个参数回调函数function存在三个参数
  - val:属性值
  - key：键名
  - map：遍历的对象本身
- 第二个参数：改变this指向，如果没有写，则默认指向window

属性：

m.size:获取键值对的个数，比对象强，对象不存在大小

Set

实例5个方法，1个属性

方法：

s.add(1):给s添加一个成员,每次只能添加一个数据项，如果s里本身就存在1，则添加不成功
- s.add(1).add(2).add(3)：同时给s添加三个数据项
s.delete(3):删除s中的3成员，如果s本身没有3，则什么也不会发生，也不会报错
s.clear():不用传参数，一键清除所有的成员
s.has(1):判断s集合里面有没有1这个成员
s.forEach(function(val,key,set){},document):- 遍历集合中所有的成员数据项
- Set类型数据不能找到指定的某个成员，只能用forEach遍历
- Set中的forEach方法里面可以传两个参数，一个回调函数，一个指定this指向对象
  - val:是数据值项
  - key：是键名，在这里无效，key的值与value值相同
  - set：是遍历的集合本身
- 第二个参数：指定this指向对象，如果没有默认指向window
- forEach按照成员添加的顺序进行Set对象
- 遍历
属性：
- size：相当于数组中的length属性

RegExp

匹配方法
- reg.test(str):返回布尔值，检测str是否符合reg规则
捕获方法
- reg.exec(str):正则捕获字符串
  - 如果正则和字符串不匹配，则捕获结果为null
  - 如果匹配，则获取的是一个数组，这里面存放被捕获的字符串信息
  - ```
  //第一项：本次捕获的内容
  //index:0本次捕获内容的起始索引
  //input:被捕获的字符串整体，就是传入的str
```
- 捕获的懒惰性：如果字符串中有对象内容和正则匹配，每一次执行exec()只能捕获其中一个->我们尝试执行多次，但发现一个问题：执行N次每次获取的都是第一次匹配的内容
- reg.lastIndex:记录本次捕获开始的索引位置(从字符串中哪个索引开始捕获)，默认是0(从头开始找)
  - 原因：每一次执行exec，默认情况下lastIndex不变，还是零，这样下一次再捕获的时候，还是从字符串开始位置查找，这样导致每次捕获的都是第一个匹配的…
  - 如何解决捕获的懒惰型：设置全局修饰符g(global),这样在每次捕获后，lastIndex都会修改。
- 捕获的贪婪性：每次捕获都是按照正则最大的匹配结果捕获
  - 如何取消贪婪性：在量词元字符后面加？即可
字符串能用正则的方法：
- str.search(reg):查询首个与reg匹配的索引，如果没有就return-1
- str.match(reg):如果reg是全局匹配，则返回所有符合规则的字符串数组，如果reg不是全局匹配，则返回第一个匹配的字符串及详细信息数组。
- str.replace(reg,“a”):经常用到的需求
  - 如果正则中有g（全局捕获）,将所有符合正则的字符或子串替换成a，如果正则中没有g,则只替换第一个符合正则的字符
  - 如果第一项是正则，第二项是一个函数，则正则和字符串匹配几次，回调函数就会被执行几次
    - 每一次执行回调函数，都会把当前本次捕获的结果(既包含大正则捕获，也包含小分组捕获)，作为实参传给函数
    - 回调函数每一次返回啥，就把当前本次匹配的信息替换成啥
    - ```
    arr.replace(reg,(val,$1,$2)){}
    //val:表示大正则捕获的字符串
    //$1:表示第一个小分组中捕获的字符串
    //$2:表示第二个小分组中捕获的字符串
    //。。。。。
```
- str.split(reg):分割字符串为数组，可以使用正则表达式

Date

日期对象：17个方法：

得到时间实例的方法3种
- 使用new Date()可以获得当前时间的日期对象，它是object类型值
- 使用new Date(2020,11,1):获取指定时间的日期对象，这种写法不算时区
  - 第二个参数表示月份，从0开始计算，11就表示12月
- 也可以使用new Date(“2020-12-01”)这样的写法，这种写法算时区，中国属于东八区
  - 要注意月和日要是两位数字，不足两位的向前边补0
  - 这里的月写几就是几，从1开始计算，12就表示12月
获取年月日时分秒毫秒星期等单个数据的方法8种：
- .getFullYear():得到年份
- .getMonth():得到月份0-11，获取的月份，比真实月份少1
- .getDay():得到星期0-6，0代表星期日，1-6代表星期1-6
- .getDate():得到日期1-31
- .getHours():得到小时数0-23
- .getMinutes():得到分钟数0-59
- .getSeconds():得到秒数0-59
- .getMilliSeconds():得到毫秒0-999
3个，获取日期时间字符串的方法：
- .toLocaleString():获取本地【'2021/11/19 下午4:46:33'】格式的日期时间字符串
- .toLocaleDateString():获取本地【'2021/11/19'】格式的日期字符串
- .toLocaleTimeString():获取本地【'下午4:46:33'】的时间字符串
4个，将日期对象转为时间戳的方法：
- Date.prase():将日期对象转为时间戳，精确到秒
- .getTime():转为时间戳，精确到毫秒
- 日期对象*1:把日期对象类型转为值类型
- +日期对象：把日期对象类型转为值类型
1个：时间戳转为时间对象的方法：
- new Date(时间戳)：时间戳转为时间对象
获取服务器时间是格林威治时间，我们通过new Date(time);可以将它转为中国时间

DOM

一共有31种：其中获取元素的方法有9种，增删改克隆元素的方法有9种，获取关系元素的属性有13种

获取元素的方法有9种：

DOM的对象是document,可以通过document的内置方法，根据不同的方式获取元素

.getElementById(“元素的id名”)：根据id名获取元素，前面对象必须是document
- 特点：在测试时，在控制台中直接输入id名，就能够获取元素，可以直接把id名字当成变量直接去使用，不获取也可以，因为id是唯一的
.getElementsByName(“name属性值”)：根据name属性值获取元素，调用对象必须是document，name属性只能在表单元素中定义
.getElementsByTagName(“标签名”)：根据标签名获取元素，返回的结果是一个类数组对象
- .getElementsByTagName("*"):获取html文件中所有的标签，封装为一个类数组对象
.getElementsByClassName(“类名”)：根据类名获取元素，返回的结果是一个类数组对象

.documentElement:获取html元素

//获取一屏幕的宽
//body自带上下左右8像素的margin值，所以body获取的宽度会小于html
	document.documentElement.clientWidth||document.body.clientWidth;
//获取一屏幕的高
	document.documentElement.clientHeight||document.body.clientHeight;

.body:获取body元素
.head:获取head元素

元素节点的增删移动、克隆方法有9种：

创建及上树4种：
- document.createElement(‘标签名’);
- document.createTextNode(“文本内容”)；
- 父节点.appendChild(‘孤儿节点’)；
- 父节点.insertBefore(‘孤儿节点’)；
移动2种：
- 新父节点.appendChild(‘已经有父亲的节点’)；
- 新父节点.insertBefore(已经有父亲的节点’)；
删除1种：
- 父节点.removeChild(“要删除的子节点”)；
克隆2种：
- var 孤儿节点=老节点.clone();//只克隆老节点，不可隆老节点里的后代节点
- var 孤儿节点=老节点.clone(true);//实现深克隆，不仅克隆老节点，还克隆后代节点

关系属性有13种：

父：
- ols.parentElement：获取父元素
- ols.parentNode:获取父节点，与parentElement作用相同，因为父节点必须是元素
子：
- ols.childNodes：获取ols节点的子节点数组
- ols.children:获取ols节点的子元素数组
第一个子：
- ols.firstChild:获取ols节点的第一个子节点，可能是文本节点，也有可能是元素节点
- ols.firstElementChild：获取ols的第一个元素子节点
最后一个子：
- ols.lastChild:获取ols节点的最后一个子节点，可能是文本节点，也有可能是元素节点
- ols.lastElementChild：获取ols的最后一个元素子节点
哥哥：
- ols.previousSibling：获取ols节点的前一个兄弟节点，可能是文本节点，也可能是元素节点
- ols.previousElementSibling：获取ols节点的前一个兄弟元素节点
弟弟：
- ols.nextSibling：获取ols节点的后一个兄弟节点，可能是文本节点，也可能是元素节点
- ols.nextElementSibling：获取ols节点的后一个兄弟元素节点
儿子元素的个数：
- ols.childElementCount：获取ols子节点的个数

元素偏移量

DOM元素的偏移量属性有12种，方法有1种

offset、client、scroll、getBoundingClientRect()。

offset：
- child.offsetTop:子元素距离第一个有position定位祖先元素的top距离
- child.offsetLeft:子元素距离第一个有position定位祖先元素的left距离
- element.offsetWidth(水平方向):获取元素：content内容+左右padding+左右border宽度
- element.offsetHeight(垂直方向):获取元素：content内容+上下padding+左右border高度
- child.offsetParent:查询距离自己最近的有position定位的祖先元素，没有则默认是body元素
client：
- element.clientTop:上边框宽度
- element.clientLeft:左边框宽度，只有上左，没有下右的
- element.clientWidth：(水平方向)获取元素：content内容宽+左右padding-滚动条(**如果有)**宽度
- element.clientHeight：(垂直方向)获取元素：content内容高+上下padding-滚动条(**如果有)**高度
var newChild= child.getBoundingClientRect():获取某个元素相对于视窗的距离，有四个方向
- newChild.top:该元素顶部距离视窗顶部的距离
- newChild.bottom:该元素底部距离视窗顶部的距离
- newChild.left:该元素左边距离视窗左边的距离
- newChild.rightL该元素右边距离视窗右边的距离
scroll：
- element.scrollWidth:没有水平滚动条时，**scrollWidth=clientWidth；浏览器视口的宽度。有滚动条时，scrollWidth=pageWidth，**页面的宽度
- element.scrollHeight:没有垂直滚动条时，scrollHeight=clientHeight；有滚动条时,scrollHeight=pageHeight，内容的宽度
- html.scrollTop:垂直滚动条距离page顶部的距离
- html.scrollLeft:水平滚动条距离page左边的距离

jQuery

DOM操作：文本操作2个、值操作2个、属性操作4个、类操作6个、样式操作2个

节点操作：查找关系节点9个、过滤节点2个、创建插入删除8个

事件：1个

DOM操作

文本操作2个
- $(“p”).html();相当于DOM中p.innerHtml;
- $(“p”).text();相当于DOM中p.innerText;
值操作2个
- $(“input:eq(5)”).val()：相当于DOM中input.value;
- $(“input:eq(6)”).val(“aaa”)：设置属性值
属性操作4个
- $("#box").attr(‘name’)：获取name属性
- $("#box").attr(‘name’,“aaa”)：添加name属性和值
- $("#box").removeAttr(‘name’)：删除name属性
- $("#box").prop(‘checked’)：获取单属性时，用prop获取的是false和true
类操作6个
- $("#box").attr(“class”,"")：获取和设置
- $("#box").addClass(“class”,"")：追加类名
- $("#box").removeClass(“class”,"")：移除类名
- $("#box").removeClass()：移除所有类名
- $("#box").toggleClass(“main”):切换成main类名
- $("#box").hasClass(“main”)：是否有某个类名
样式操作2个
- $("#box").css(“color”)：读取css样式值
- $("#box").css({“propertyname”:“value”,“propertyname”:“value”})：同时设置多个样式

节点操作

查找关系节点9个
- $("#box").children()：获取子节点
- $("#box").children(“div”)：获取div子节点
- $("#box").prev()：找到上面紧邻的一个兄弟2
- $("#box").prevAll()：找到上面紧邻的所有兄弟
- $("#box").prevAll(“div”)：找到上面紧邻的所有div兄弟
- $("#box").next()：找到下面紧邻的一个兄弟
- $("#box").nextAll()：找到下面紧邻的所有兄弟
- $("#box").nextAll(“div”)：找到下面紧邻的所有div兄弟
- $("#box").parent()：找到父节点
过滤节点2个
- $(“ul”).find(".a");//查找
- (“ul li”).filter(".a");//过滤
创建、插入、删除节点8个
- 创建
  - var lis=$(“
  - aaa
  - ”)：创建
内部添加
- parent.append(lis)：在父盒子尾部添加
- parent.prepend(lis)：在父盒子头部添加
外部添加
- box.after(lis)：在box后面加
- box.before(lis)：在box前面加
删除DOM元素
- $(“ul”).remove()：完全删除，ul,li都删除
- $(“ul”).empty()：只是清空ul的内容，ul还存在
- $(“li”).remove(".one")：删除li中class="one"的

jquery事件

$(document).ready()：预执行函数，在DOM完成加载后就执行
- 简写：
  - $().ready(function(){…})
  - $(function(){…})
事件绑定：$(selector).on(事件类型,回调函数)

jquery请求ajax：

        // get方法
         $.get(url,data,success(response,status,xhr),dataType);
        //  post方法
        $.post(url,data,success(data, textStatus, jqXHR),dataType);

flex

container容器有七个属性：

display;flex-direction;flex-wrap;flex-flow;justify-content;align-items;align-content

flex项目默认沿flex容器的主轴排列

设置flex容器2个：
- display：flex->设置容器为块级弹性盒
- display: inline-flex->设置容器为行内块级弹性盒
设置flex容器主轴方向1个：
- flex-decuration:flex容器主轴方向
  - row（默认值）：水平方向
  - row-reverse：水平相反方向，所有项目从右开始往左排序
  - column：垂直方向
  - column-reverse：垂直相反方向,所有项目从下开始往上排序
设置项目是否换行1个：
- flex-wrap:定义项目如果一条轴线排不下，应该如何换行
  - nowrap：默认值，不换行，如果项目宽度总和超过容器宽度，项目会平局收缩
  - wrap:正向换行
  - wrap-reverse:反向换行，第一行与第二行交换位置
主轴方向和换行的复合属性1个：
- flex-flow:row no-wrap:默认值，横轴为主轴，不换行
定义项目在主轴上对齐方式1个，属性值6个:
- justfy-content:
  - flex-start:整体左对齐
  - flex-end：整体右对齐
  - center：整体居中
  - space-between：两端对齐，项目与项目间的间隔相等，项目与边框没有间隔
  - space-around：环绕对齐，项目两侧的间隔相等，项目与项目间的间隔，比项目与边框间隔大一倍
  - space-evenly：均分对齐，项目与边框之间，项目与项目之间间隔相同。
定义项目在交叉轴上对齐方式1个，属性值5个:
- align-items:
  - flex-start:起点对齐，默认轴时为顶部对齐
  - flex-end:终点对齐，默认轴时为底部对齐
  - center：垂直居中，交叉轴中点对齐，
  - baseline:基线对齐，就是文字的底线对齐
  - stretch(默认值)：==如果项目未设置高度，或者高度设为了auto，==那么默认沾满整个容器的高度
定义了多根轴线(多行)在交叉轴的对齐方式，属性值7个：
- align-content:必须设置了==flex-wrap：wrap，==这个属性才会生效
  - flex-start:多行整体从顶部开始，一行行对齐
  - flex-end:多行整体从底部开始，一行行对齐
  - flex-center：多行垂直居中。
  - space-between：与交叉轴两端对齐，轴线之间上下间隔平均分布
  - space-around:各行上下环绕对齐
  - space-evenly：均分对齐，项目与边框之间，项目与项目之间间隔相同。
  - stretch(默认值)：==如果各行项目未设置高度，或者高度设为了auto，==那么默认沾满该行的高度

容器中的项目有6个属性：

属性有6个：order;flex-grow;flex-shrink;flex-basis;flex;align-self
order:定义项目的排列顺序
- 数值越小，排列越靠前，默认是0
flex-grow:增长，定义项目的放大比例，默认为0，就是如果存在剩余空间，也不放大
- 将剩余空间平均分为所有项目flex-grow值和的份数，再按照值给他们分对应的分数
  - ```
  //三个盒子，他们的flex-grow分别为1,2,3，那么就把剩余空间平分为1+2+3=6份，再给他们按对应的1，2,3分给各个盒子。
```
- flex-grow：1;如果所有项目flex-grow都设为1，那他们等分剩余空间
flex-shrink:缩小，与flex-grow属性相反，默认值为1，如果空间不足，该项目会缩小
- flex-shrink:1;如果所有的项目flex-shrink属性为1，则空间不足时，所有项目会等比例缩小
- flex-shrink:0;如果有些项目值为0，有些项目值为1，则为0的不缩小，为1的等比例缩小
- flex-shrink为负值时不会生效
flex-basis：定义在分配多余空间之前，项目占距的主轴空间，有点像定义宽高，优先级比宽高的高
- ==默认值为auto，==也就是没有固定值
flex:是flex-grow，flex-shrink和flex-basis的简写形式，默认为0 1 auto
- flex：1->是flex：1 1 0%的缩写
align-self：允许单个项目有其他项目不一样的对齐方式，可以覆盖align-items
- 默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
- flex-start:设置单个项目顶部对齐
- flex-end:设置单个项目底部对齐
- center:设置单个项目垂直居中
- baseline:设置单个项目基线对齐
- stretch：==如果单个项目未设置高度，或者高度设为了auto，==那么默认沾满该行的高度

Promise

Promise实例的创建方式5种，实例的公有方法3种，类的静态方法5种

创建方式5种
- @1 new Promise([executor(resolve,rejecet){}])
  - resolve([value]): 实例状态fulfiled，实例的结果是[value]
  - rejecet([reason])：实例状态rejected，实例的结果是[reason]
- @2 执行Promise对象中的某些静态私有属性方法(Promise.resolve([value]),Promise.rejecte(reason))，也可以创造promise实例
- @3 执行p1.then([onfulfilled]，[onrejected]))方法，会返回一个全新的Promise实例【p2】
- @4 基于Promise.all/race/any([promises])也会返回一个新的promise实例【@p】
- @5 使用async修饰的函数，最后得到的也是一个Promise实例
【p】实例的公有方法3种
- @1 p.then([onfulfilled]，[onrejected])`:
  - [onfulfilled]：实例状态成功执行的函数
  - [onrejected]：实例状态失败执行的函数
- @2 p.catch([onrejected]):只有实例状态失败时执行的函数
  - .catch([onrejected])等价于.then([null]，[onrejected])
- @3 p.finally([onfinally]):不管状态是成功还是失败，都执行的函数
Promise类的静态方法5种
- Promise.resolve([value])：立即创建一个状态是fulfilled，值是[value]的实例
- Promise.reject([value])：立即创建一个状态是rejected，值是[reason]的实例
- Promise.all([promises]):与运算，[promises]是Promise实例的数组
  - 所有实例都成功，@p才成功，[值：按照数组的顺序，依次存储每个实例的结果]
  - 只要有一个实例失败，@p就失败,[值：本次失败的原因]
- Promise.any([promises]):或运算
  - 集合中只要一个实例成功，则@p就是成功的,[值：这个成功的结果]
  - 集合中如果所有实例失败，则@P才是失败的,[值：失败的原因的数组]
- Promise.race([promises]):竞赛
  - 比赛，集合中那个实例先返回结果，则以谁的为主[值：成功的结果或失败的原因]
- 如果集合中的某一项不是promise实例，则会默认把其编程状态为成功，值是这个值的promise实例

http状态码

状态码分类(判断响应)

1xx:信息响应类，(101、102)【快递正在路上】，表示服务器端接受了请求并正在处理
2xx:处理成功响应类,(200~206)【快递送到了你手上】，表示操作被成功接收并处理
3xx:重定向响应类，(300~307)【快递送到了快递柜】，表示为了完成指定动作，必须接受进一步处理
4xx:客户端错误，(400~417)【客户地址的错误】，客户请求包含语法错误或者不能正确执行
5xx:服务器端错误，(500~505)【商家无能的错误】，服务器不能正确执行一个正确请求

状态码	状态码英文名称	中文描述
1xx	2个	响应处理类
100	Continue	继续。客户端应继续请求
101	Switching Protocols	切换协议。服务器为了响应客户端的请求需要切换更高的http版本协议
2xx	7个	响应成功
200	OK	请求成功。一般用于GET与POST请求
201	Created	已创建。常出现在POST请求，后台已经创建了新的资源
202	Accepted	已接受。已经接受请求，但处理未完成
203	Non-Authoritative Information	非授权信息。请求成功。但获取的数据不是在你请求的服务器上得到的
204	No Content	空内容。服务器成功处理，但未返回内容。
205	Reset Content	重置内容。服务器处理成功，通知客户端重置文档视图。
206	Partial Content	部分内容。服务器成功处理了部分GET请求
3xx	8个	请求重定向：为了完成某个请求，必须接受进一步处理
300	Multiple Choices	多种选择。请求的资源存在于多个位置，可返回一个资源说明与地址列表供用户选择
301	Moved Permanently	永久移动。重定向到新URL，以后用新URL访问
302	Found	临时移动。与301类似。可以继续使用原有URI
303	See Other	会查找其它地址。与301类似。使用GET和POST请求查看
304	Not Modified	未修改。所请求的资源未修改，客户端可直接使用缓存
305	Use Proxy	使用代理服务器。所请求的资源必须通过代理访问
306	Unused	已废弃了
307	Temporary Redirect	临时重定向。与302类似。使用GET请求重定向
4xx	18个	客户端问题
`400`	Bad Request	请求的URI语法错误，服务器无法理解
`401`	Unauthorized	需要身份认证
402	Payment Required	还没有用
`403`	Forbidden	服务器接收了请求，但是拒绝做响应
`404`	Not Found	服务器根据请求的URI路径找不到资源（网页）。网站设计人员可设置"您所请求的资源无法找到"的个性页面
405	Method Not Allowed	请求所使用的方法被禁用了(如GET、POST等)
406	Not Acceptable	无法生成响应体：请求的资源内容特性无法满足请求头中的条件
407	Proxy Authentication Required	需要代理身份的验证
`408`	Request Time-out	请求超时：服务器等待客户端发送的请求时间过长
409	Conflict	处理请求时发生冲突。服务器完成客户端的 PUT 请求时可能返回此代码，
410	Gone	请求的资源已经不存在。410不同于404，如果资源以前有现在被永久删除了可使用410代码，网站设计人员可通过301代码指定资源的新位置
411	Length Required	服务器要求请求头中必须有Content-Length字段
412	Precondition Failed	客户端请求信息的前提条件错误:在服务器上测试前提条件时，部分请求标题字段中所给定的前提条件估计为FALSE，比如说服务器需要`If-None-Match` 参数，但是没有，就会报错。
413	Request Entity Too Large	请求实体过大。为防止客户端的连续请求，服务器可能会关闭连接。如果只是服务器暂时无法处理，则会包含一个Retry-After的响应信息
414	Request-URI Too Large	请求的URI过长。（URI通常为网址），服务器无法处理
415	Unsupported Media Type	不支持的媒体类型
416	Requested range not satisfiable	无法满足请求范围
417	Expectation Failed	执行失败，无法满足请求头信息的期望
5xx	6个	服务器端问题
500	Internal Server Error	服务器内部错误，无法完成请求
501	Not Implemented	服务器不接收请求，无法完成请求
502	Bad Gateway	网关请求错误：代理服务器收到远程服务器无效响应【与服务器建立连接了】
503	Service Unavailable	服务器超载或系统维护，无法响应。服务器暂时的无法处理客户端的请求。延时的长度可包含在服务器的Retry-After头信息中
504	Gateway Time-out	网关请求超时:充当网关或代理的服务器，未及时获得远端服务器的响应【没与服务器建立连接】
505	HTTP Version not supported	请求的http版本不支持

报文字段

字段名	说明
General(通用报文)	可以理解为是基本信息，5个
Request URL	http://www.aaa.cn/ —请求地址
Request Method	GET —请求的资源的方式。GET一般发送资源请求
Status Code	200 OK —服务器返回的状态码
Remote Address	123.57.205.204：80 —服务器的外网IP以及我请求的端口号
Response Headers	（响应头），10个
HTTP版本号	响应初始行
Date	服务器时间
Server	服务器端通过什么创建的web服务。
Connection	是否长连接==(keep-alive==)
Keep-Alive	保持常链接的时间
set-Cookie	将服务器处理生成的connect.sid放到响应头中带回去，客户端可以根据这个生成cookie缓存
ETag	是否设置协商缓存，以及缓存的周期 http1.1
Last-Modified	是否设置协商缓存，以及缓存的周期 http1.0
Cache-Control	是否设置强缓存，以及缓存的周期，http1.1
Expires	是否设置强缓存，以及缓存的周期，http1.0，一般是一个日期格式，他就是过期日期

Request Headers	(请求头)，12个
Accept	接收的文件格式：客户端接受什么类型的响应【image/jpeg…】
Accept-Encoding	接收的编码格式：【utf-8…】
Accept-Language	接收的语言:【zh-CN/en】
Cache-Control	==强缓存，HTTP1.1版本新增:==对缓存进行控制，如一个请求希望响应返回的内容在客户端要被缓存一年，或不希望被缓存就可以通过这个报文头达到目的。
Connection	ConnectionID 表示的就是TCP建立连接的ID，google可以提供最多6个TCP连接。
Cookie	把本地的Cookie带给服务器，Cookid（网络饼干，储存在用户本地终端上的数据）
Content-Type	传参给服务器内容的类型。
Host	虚拟主机名，http1.1提出的Host头域优化
if-Modified-Since	设置协商缓存后，请求头返回这个信息和服务器作对比，资源是否相同，http1.1
if-None-Match	设置协商缓存后，请求头返回这个信息和服务器作对比，资源是否相同，http1.0
Upgrade-Insecure-Requests	HTTP Upgrade-Insecure-Requests 请求头向服务器发送一个客户端对HTTPS加密和认证响应良好，并且可以成功处理的信号，可以请求所属网站所有的HTTPS资源。
User-Agent	当前浏览器的版本信息客户端发送的请求头信息，服务器就可以通过这个请求头接收到信息

ajax

Ajax的实例xhr的常用属性或方法？

创建一个Ajax实例：let xhr=new XMLHttpRequest();
ajax异步获取数据4步：
- let xhr=new XMLHttpRequest();创建ajax实例
- xhr.open(method,url,async);
  - method：请求类型，分为get和post方式；格式为字符串；
    - get: (get: 一般多用于获取数据/delete：删除请求/head：获得报文首部/options：询问支持的方式)
    - post:(post: 主要提交表单数据和上传文件/put对数据全部进行更新/patch只对更改过的数据进行更新)
  - url：请求地址；格式为字符串；
  - Async：是否异步(默认异步)；（true：异步；false：同步）
  - 例子：
    - ```
    xhr.open('get','one.txt?lx=1&name=xxx',true);
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//post 添加http头，发送信息至服务器时内容编码类型 
```
- xhr.onreadystatechange=function(){}：监听状态值变化的事件
- xhr.send():客户端发送给服务端的参数
  - get方法：xhr.send(null)：get方法只需在请求头中传参数，无需用send传
  - post方法：xhr.send(“name=‘lili’&age=12”):post方法需要用请求体传参数，需要用send传
属性8个：
- xhr.readyState:请求的状态值
- xhr.status：响应的HTTP状态码
- xhr.statusText：状态码的描述
- xhr.response：响应主体信息「服务器返回啥格式就是啥格式」
- xhr.responseText:以字符串格式获取
- xhr.responseXML:以XML格式获取
- xhr.responseType:存储服务器返回数据的格式
  - 空的 responseType 字符串与默认类型 "text" 相同。
- xhr.responseurl:响应端的url路径
常用事件5个：
- xhr.onreadystatechange:状态值改变时会触发的事件
- xhr.onabort:请求被强制中断时触发的事件
- xhr.onerror：报错时触发的事件
- xhr.ontimeout:请求超时时触发的事件
- xhr.upload.onprogress:监听文件上传的进度
配置xhr信息2个：
- xhr.timeout=1000：设置请求超时时间，单位为ms
- xhr.withCredentials=true:在跨域资源共享中，是否携带允许携带资源凭证【例如：cookie】，默认false
常用方法7个：
- xhr.abort()：中断请求
- xhr.opean():建立连接
- xhr.send():设置请求体要发送的信息
- xhr.overrideMimeType():覆盖，将会覆盖server端的MimeType,来解析传回来的数据,必须在send前使用
  - 例子:overrideMimeType("text/plain; charset=x-user-defined")
- 获取响应头信息的方法2个：
  - xhr.getAllResponseHeaders()：获取所有响应头的信息
  - xhr.getResponseHeader([key]):获取KEY对应的响应头信息
    - xhr.getResponseHeader("Date"):获取服务器响应时间，可能与真实时间有误差，在路上产生的延迟
- 设置请求头信息的方法1个：
  - xhr.setRequestHeader():设置请求头
    - xhr.setRequestHeader('name', 'tanghanlu');😕/请求头信息的内容不能是中文或者一些特殊符号

axios和fetch

axios.get([url],[config])或.post([url],[data],[config])中的[config]能够配置的属性：

我们配置的这些属性实际上是在给这次请求的xhr实例设置私有属性，不要以为都是在给请求头设字段。
get和post方法中都能配置的属性7个：
- baseUrl:[string]:配置请求地址的前缀
- headers:[object]:属性值是对象类型，作用同ajax中的xhr.setRequestHeader()
  - headers:{"Content-Type":application/json}:但是在get跟Post中，Content-Type属性一般不需要咱们手动改
  - headers:{"Name":"sjh"}:可以通过headers给请头添加我们想传的数据
- timeout:[number]:请求超时时间，数字类型但为是ms
- withCredentials:[boolean]:默认为false，true：表示允许跨域携带资源凭证，false：表示不允许
- responseType:[string]:把服务器返回的结果转为对应的数据格式，默认是json(服务器返回的结果，我们都把它转为json对象)，还有其他类型：‘arraybuffer/blob/document/json/text/strem’;
- onUploadProgress:[function]:监听文件上传进度
- validateStatus:[function]:里面是一个函数，函数中的return可以配置status决定状态值在什么范围才算请求成功，默认2xx为请求成功
get单独能配置的属性1个：
- get的创建:axios.get([url],[config])；对应的delete/head/opations方法都是用下面规范
  - [url]：放我们请求资源的对应接口路径，不带参数
  - [config]：用来配置请求信息，是一个对象类型，每个属性按照键值对的形式配置,
- params:[string/object]:属性值可以是字符串可以是对象
  - 对象:会将里面属性名和属性值拼接为键值对，问号拼接到URL后面
  - 字符串：无论字符串内写的是xxx，那直接在URL后面拼接为**“0=xxx”**
  - post请求中不能用params
post单独能配置的属性1个：
- post的创建：axios.post([url],[data],[config]);对应的put/patch方法也如下
  - url：字符串类型，请求的目标路径
  - [data]：可以是字符串类型，可以对象类型，post中请求体的信息，如同xhr.send(),中传的数据，但一般不会传字符串。
  - [config]：**对象类型，**配置请求的配置项
- transformRequest:function([data],[headers]){return xxx}:POST请求专用的方法，对请求主体进行格式处理
  - [data]获取的是axios.post()方法中的第二个参数的值，data必须是标准普通对象，我们在内部就可以给他做格式的处理,return什么，[data]请求体就会变成什么
  - 比如我们的[data]传的是JSON对象格式的，但后台想要urlencoded格式的，那我们就可以用transformRequest转换一下。

数据缓存

@1 cookie：小饼干
- document.cookie：获取所有Cookie
- document.cookie=“name=sjh”:设置Cookie,以字符串名值对的形式添加
@2localStorage：本地存储
- localStorage.setItem([key],[value]):设置一个项
- localStorage.getItem([key]):获取一项
- localStorage.removeItem([key]):移除某项
- localStorage.clear()：清除所有项
@3 sessionStorage：会话存储
- sessionStorage.setItem([key],[value]):设置一个项
- sessionStorage.getItem([key]):获取一项
- sessionStorage.removeItem([key]):移除某项
- sessionStorage.clear()：清除所有项

npm命令

npm :(node package manager)nodejs的包(模块)管理工具【同步下载】
cnpm:（china node package manager）中国版的包(模块)管理工具【同步下载】
nrm:（npm registry manager）npm镜像源管理工具【同步下载】
yarn：(yet another resource negotiator)另一种资源协助者【异步下载】

npm：

$node -v/--version:查看当前node的版本
$npm --version/-v:查看当前包的
$npm init -y :初始化项目，生成data.json配置文件
$npm （i）/install:启环境，安装data.json中需要的包（开发及生产环境）
$npm i --production:只安装data.json中生产环境需要的包
查看版本：
- $npm view xxx versions:查看某个模块所有版本
在本地安装：
- $npm i xxx --save（-S或不写）：安装生产依赖(开发和部署环境都能用)
- $npm i xxx --save-dev:安装开发依赖(只有开发环境能用)
在全局安装：
- $npm i xxx -g:将包安装在全局
安装不同的版本：
- $npm i xxx:安装稳定版本的最新版
- $npm i xxx@latest:安装稳定版本中的最新版
- $npm i xxx@next:安装最新版本
- $npm i xxx@3:安装第三代中的最后一个版本
- $npm i xxx@3.12.0:安装具体的某个版本
卸载：
- $npm uni xxx:卸载项目中xxx包
- $npm uni xxx -g:卸载全局中xxx包
切换使用的源：
- $npm ls:查看可用的源
- $npm use xxx:使用xxx源
使用安装在项目中的包的命令：
- $npm run AAA:执行package.json 中"script"脚本属性中的"AAA"配置的命令

nrm：

安装并切换为nrm作为源：
- $npm i nrm -g:在全局下安装nrm
- $nrm ls:查看可用源
- $nrm use xxx:使用某个源
- 后期使用还是基于npm操作即可！！

yarn：

使用yarn【强烈推荐使用】：
- $npm i yarn:安装yarn包，不建议在全局安装（虽然能装）
- $yarn add xxx:安装指定版本包或者放在开发依赖中，与npm类似
- $yarn remove xxx:移除
- $yarn install:跑环境，【简写：yarn】，安装项目中data.json中的依赖(生产+开发)
使用安装在项目中的包的命令：
- $yarn AAA:执行package.json 中"script"脚本属性中的"AAA"配置的命令

栅格系统

栅格系统有两种实现方式：float浮动实现和flex布局实现

float不适合移动端的响应式栅格系统，但兼容性好

flex时刻移动端的响应式栅格系统，但兼容性不好

栅格系统存在五种格式：xs、sm、md、lg、xl,其中xs一般为默认格式，所以类名省略xs
根据以上格式分别表现了不同大小范围时的类名，以下用xx代替
- .col-xx-0~.col-xx-12:占container的12分之几个格子
- .col-xx-offset-0~.col-xx-offset-12:从元素左边空出容器的12分之几个格子
- .col-xx-push-0~.col-xx-push-12:从元素当前位置，向左拉几个容器的格子
- .col-xx-pull-0~.col-xx-pull-12:从元素当前位置，向右推几个容器的格子
- .d-xx-block:表示元素在xx状态时显示
- .d-xx-none:表示元素在xx状态时隐藏

flex

主轴为默认的x轴，flex属性有三个属性值:flex-grow、flex-strink、flex-basis
我们可以通过设置第三个值来实现弹性分布
flex-basis:设置弹性宽度
col-xx-order-0~col-xx-order12:设置当前元素的权重
col-xx-order-last：order值设为最高，使元素移到最后.
col-xx-order-first:order值设为最低，使元素移到最前面.

事件对象-e

属性14种，方法两种

属性：14种

e.target:事件源对象，触发事件的元素
- e.target.tagName:触发事件的元素标签名大写
e.clientX/offsetX/pageX/screenX/x:事件发生的X坐标
e.clientY/offsetY/pageY/screenY/y:事件发生的Y坐标
- e.offsetX/Y:鼠标触发坐标，距离触发事件元素的左上的坐标
- e.clientX/Y:鼠标触发坐标，距离浏览器视口左上的坐标
- e.pageX/Y:鼠标触发坐标，距离page页面左上的坐标
- e.screenX/Y：鼠标触发坐标，距离屏幕左上的坐标
- e.x/y:
  - IE7/8/9/10/11：鼠标触发坐标，距离父盒子左上的坐标
  - chrome：与clientX/Y功能相同
e.key：按键内容a->a
e.code：英文按键字符a->keyA
e.keyCode:(键码)按键对应ASCII码:a->65，不区分大小写,应用在keydown和keyup事件中
e.charCode:(字符码)按键对应ASCII码，区分大小写，不能获取功能键应用在keypress事件中
e.eventPhase：事件传播的阶段
e.button:鼠标哪个按键被按下了
e.cancelBubble：布尔值，是否取消事件冒泡（IE）
e.returnValue：是否阻止事件默认行为（IE）

方法2个：

e.preventDefalt():阻止事件默认行为(新方法)
e.stopPropagation():取消传播事件冒泡（新方法）

事件句柄

以下都是事件句柄，绑定事件用onxxx

鼠标事件10个，键盘事件3个，表单事件4个，系统事件4个，移动端事件4个

鼠标事件10个
- click 单击
- dblclick 双击
- contextmenu 右键单击
- mousemove 鼠标移动
- mouseover 鼠标进入 /mouseout 鼠标离开
- mouseenter鼠标进入/mouseleave 鼠标离开
- mousedown鼠标按下/mouseup 鼠标抬起
键盘事件3个：
- 只有input、textarea、window、document.documentElement、document.body可以绑定键盘事件
  - keydown:键盘按下(功能性按键也会触发)
  - keyup键盘抬起/keydown键盘按下（功能性按键也会触发）
  - keypress键盘按键被按下并释放时发生（只针对字符，功能性按键不会触发）
表单事件4个：
- input:只要内容(value)改变就会被触发(常用于移动端)
- change:内容改变并且失去焦点时触发
- focus:当文本框获取焦点时触发
- blur:当文本框失去焦点时触发
系统事件4个：window对象
- scroll 监听滚动时触发
- load 监听页面渲染
- resize 视口改变时触发
- $(document).ready(),jQuery中的ready事件，原生没有->原生是document.DOMContentLoaded
移动端事件4个：
- click事件在移动端可以用，但有300ms的延迟
- 以下三个只能在移动端使用，电脑端不识别
- touchmove：手指移动
- touchstart：手机按下
- touchend：手机离开

异步微/宏任务

异步微任务7个，异步宏任务5个

异步微任务7个：
- requestAnimationFrame[存在争议]
- Promise.then/catch/finally
- async/await
- IntersectionObserver：(交叉观察者)监听我们当前DOM元素与可视窗口的交叉信息
- MutationObserver：（变异观察者）监听DOM元素改变的
- queueMicrotask ：(队列微任务)可以创建一个异步的微任务
- process.nextTick：[Node]执行下一个任务或队列
- …
异步宏任务5个：
- setTimeout/setInterval:定时器
- setImmdiate[Node的定时器]
- 事件绑定/队列
- xhr:XMLHttpRequest(ajax)/Fetch
- MessageChannel:消息通知队列（很少用）
- …

获取视口宽度

获取视口宽度
- window.innerWidth:视口宽度
- document.documentElement.clientWidth:视口宽度
- document.documentElement.getBoundingClientRect().width:视口宽度
- 如果考虑兼容性则他们三个做短路运算赋值
获取设备像素比
- window.devicePixelRatio：设备像素比