1. 1,JavaScript的基本介绍
   1. 历史简介
   2. 基本语法格式
      1. 内联/行内样式
      2. 内部样式
      3. 外部样式
   3. 基本语法
      1. 1,严格区分大小写
      2. 2,程序执行有顺序要求
      3. 3,每行JavaScript程序最好用分号结束
2. 2,JavaScript的变量
   1. 1,概念
      1. 存储在内存之中的带有名称的数据信息,其中存储的数据在程序执行过程中是可变的
      2. 存储数据的容器
   2. 2,语法
      1. var int = 100;
      2. var
         1. 关键字
         2. 第一次声明/定义变量时,必须有var关键词,之后使用变量,不需要关键词
      3. int
         1. 变量的名称
         2. 命名规范
            1. 严格区分大小写
            2. 只能是数字,字母,下划线_,并且不能以数字开头
            3. 不能使用JavaScript的关键词和保留词
            4. 小驼峰命名法
            5. 除首单词之外,其他单词的首字符大写
            6. 见名知意
      4. =
         1. 赋值符号
         2. 将右侧的表达式的执行结果,赋值给左侧变量
      5. 100
         1. 赋值的数值
   3. 3,重复赋值
      1. 对一个变量,重复赋值,后赋值的数据会覆盖之前赋值的数据
3. 3,数据类型
   1. 根据变量中存储的数据,在计算机程序中的存储方式不同,进行分类,称为数据类型
   2. 变量只是容器,容器是没有类型的,只有存储的数据,才有类型之分
   3. 分类
      1. 基本数据类型
         1. 布尔类型 boolean / bool
            1. true
            2. false
         2. 数值类型 number
            1. 整数 intent / int
            2. 安全范围 2的53次方
            3. 其他进制存储方法
            4. 二进制
            5. 0b / 0B
            6. 八进制
            7. 0
            8. 十进制
            9. 直接写
            10. 十六进制
            11. 0x / 0X
            12. 浮点数 float
            13. 17位有效数值
            14. 科学计数法
            15. 2e3
            16. 2000
            17. 2e-3
            18. 0.002
            19. NaN
            20. 不是数值
         3. 字符串类型 string / str
            1. 必须包裹在引号中
            2. JavaScript的字符串无法解析变量
            3. 字符串的拼接
            4. + 加号
            5. 符号两侧有字符串,执行拼接操作,都是数值,执行加法操作
         4. null
            1. 是一种特殊的数值,表示,空
         5. undefined
            1. 表示没有被正确赋值
      2. 引用数据类型
         1. 对象 object / obj
            1. 数组 array / arr
            2. 函数 function
            3. 对象 object / obj
   4. 转化
      1. 自动转化
         1. 计算机程序执行时,自动进行的转化
         2. 其他数据类型转化为布尔值
            1. if()语句
            2. false
            3. 0
            4. 数值0
            5. ''
            6. 空字符串
            7. null
            8. undefined
            9. NaN
            10. true
            11. 其他数值都转化为true
         3. 其他数据类类型转化为数值
            1. 算术运算时
            2. 布尔类型
            3. true
            4. 1
            5. false
            6. 0
            7. 字符串
            8. 转化字符串内容完全符合数值规范
            9. 直接转化为数值
            10. '12345'
            11. '123.45'
            12. '1e3'
            13. 不符合数字规范的,转化为NaN
            14. 只要有NaN参与的运算,结果都是NaN
         4. 其他类型转化为字符串
            1. 字符串拼接时
            2. 布尔类型,数值类型,null,undefined,都直接转化为字符串形式
      2. 强制转化
         1. 人为进行的转化
         2. 转化为数值类型
            1. Number()
            2. 与自动转化原则相同
            3. parseInt()
            4. 获取整数部分
            5. 数值,只获取整数
            6. 布尔类型
            7. NaN
            8. 字符串
            9. 从左起,只获取整数部分
            10. 100a --- 100
            11. 1e3 ---- 1
            12. 字符头转化为NaN
            13. parseFloat()
            14. 获取浮点数部分
            15. 数值,获取浮点数部分,只识别一个小数点
            16. 布尔类型
            17. NaN
            18. 字符串
            19. 从左起,只获取浮点数部分
            20. 100a --- 100
            21. 1e3 ---- 1000
            22. 字符头转化为NaN
            23. 非加法的运算
            24. 一般用作将数字字符串转化为数值类型
            25. 变量 - 0 变量*1 变量/1
         3. 转化为字符串类型
            1. String()
            2. 与自动转化原则相同
            3. 变量.toSting()
            4. ()中设定转化的数值进制
            5. 将其他进制到的数值,转化还原输出
            6. var int = ob001110011; console.log(int.toString(2))
            7. +字符串拼接
4. 4,运算符
   1. 按照功能划分
      1. 算术运算符
         1. +
         2. -
         3. *
         4. /
         5. %
            1. 结果的符号与被除数相同
            2. 整除的结果,余数是0
         6. **
            1. 尽量少用
      2. 赋值运算符
         1. =
            1. 将右侧表达式结果赋值给左侧变量
         2. +=
            1. 在左侧变量存储原始数据的基础上,再加上右侧表达式的结果,将最终的结果赋值给左侧变量
         3. -=
            1. 在左侧变量存储原始数据的基础上,再减去右侧表达式的结果,将最终的结果赋值给左侧变量
         4. *=
            1. 在左侧变量存储原始数据的基础上,再乘以右侧表达式的结果,将最终的结果赋值给左侧变量
         5. /=
            1. 在左侧变量存储原始数据的基础上,再除以右侧表达式的结果,将最终的结果赋值给左侧变量
         6. %=
            1. 在左侧变量存储原始数据的基础上,再对右侧表达式的结果求余数,将最终的结果赋值给左侧变量
         7. **=
            1. 左侧变量存储的原始数据为底数,右侧表达式的执行结果为指数,进行幂运算,将最终结果赋值给左侧变量
      3. ++ / --
         1. 每执行一次,变量存储的数值,改变1
         2. 前缀
            1. ++变量
            2. 当前位置,先完成自增,再参与程序的执行
         3. 后缀
            1. 变量++
            2. 当前位置,先完成其他程序的执行,再完成自增,下一个位置,体现自增的结果
      4. 比较运算符
         1. 结果是布尔类型,只能判断一个条件
         2. >
         3. <
         4. >=
         5. <=
         6. ==
            1. 先转化数据乐行,在判断数值是否相同
         7. ===
            1. 不转化数据类型
            2. 数据类型和数值必须都相同
         8. !=
         9. !==
      5. 逻辑运算符
         1. &&
            1. 逻辑与
            2. 两个条件都是true,结果是才是true,见false,就是false
            3. 第一个条件结果是false,第二个条件不执行
            4. 逻辑赋值
            5. $int = 表达式1 && 表达式2
            6. 表达式1,为true,表达式2执行,最终值为表达式2
            7. 表达式1,为false,表达式2不执行,最终数值为表达式1
         2. ||
            1. 逻辑或
            2. 两个条件都是false,结果才是false,见true,就是true
            3. 第一个条件,结果是true,第二个条件不执行
            4. 逻辑赋值
            5. $int = 表达式1 || 表达式2
            6. 表达式1,为true,表达式2不执行,最终数值为表达式1
            7. 表达式2,为false,表达式2执行,最终数值为表达式2
         3. !
            1. 对结果取反
            2. 最好对取反的对象添加()
   2. 按照参与单元划分
      1. 一元
         1. ++ -- !
      2. 二元
         1. 大部分都是二元运算符
      3. 三元
         1. ? :
         2. 表达式1 ? 表达式2 : 表达式3 ;
         3. 表达式1,为treu,执行表达式2 表达式1,为false,执行表达式3
5. 5,分支结构语句
   1. if判断
      1. if(){}
      2. if(){}else{}
      3. if(){}else if(){}esle{}
   2. switch()语句
   3. 总结
      1. 1,if语句多用于判断条件,switch()语句多用于判断是否是某个值
      2. 2,if语句多用于嵌套
      3. 3,在JavaScript语言中,switch()判断依据是 === 全等判断
6. 6,循环控制语句
   1. while()语句
      1. 循环逻辑
         1. 1,定义循环变量并且赋值初始值
         2. 2,判断是否符合进入循环的条件
         3. 3,执行循环体
         4. 4,执行步长
         5. 循环执行
      2. 基本语法
         1. var i = 0; // 初始值 while(i <= 10){ // 判断进入循环条件 console.log(i); // 循环体 i++; // 步长 }
         2. while()语句中,循环体和步长的顺序是可以改变的
   2. for()语句
      1. 循环逻辑
         1. 1,定义循环变量并且赋值初始值
         2. 2,判断是否符合进入循环的条件
         3. 3,执行循环体
         4. 4,执行步长
         5. 循环执行
      2. 基本语法
         1. for(var i = 0 ; i <= 10 ; i++){ console.log(i) }
         2. 执行原理和执行顺序与whie()语句完全相同
   3. break和continue
      1. break
         1. 终止当前循环,break之后的程序执行,以及break执行之后,剩余的循环
      2. continue
         1. 终止当前循环,continue之后的程序执行,但是会继续执行之后的循环次数
   4. 总结
      1. 1,for()循环更适合于循环嵌套
      2. 2,while()语句更适合于,未知循环次数或者是死循环
   5. 循环嵌套
      1. 循环之中,循环体也有另一个循环
      2. 1,内层循环定义循环时,往往会与外层循环有关联
      3. 2,内层执行循环时,外层循环变量数值保持不变的
   6. 算法
      1. 冒泡排序
         1. // 冒泡排序 // 两个单元,存储的数据进行比较,交换存储的数据 // 循环排序的次数,数组单元个数-1 for(var i = 0 ; i <= arr.length-1 -1 ; i++){ // 每次执行,完成一次排序,选出一个最大值,存储在位置是数组的最后 // 每次只循环到需要比较的倒数第二个数值 // 每次循环,之前确定的数值,不再参与比较 for(var j = 0 ; j <= arr.length-1 -1 - i ; j++){ // 当前存储的数值,大于下一位存储的数值,交换存储的数据 if(arr[j] > arr[j+1]){ var intM = 0; intM = arr[j]; arr[j] = arr[j+1]; arr[j+1] = intM; } } }
      2. 选择排序
         1. var arr = [5,4,3,2,1]; // 选择排序 // 比较出最小值的索引下标,如果与默认位置的索引下标不同,两个索引下标中存储的数据交换 // 定义排序执行的次数 数组单元那个数-1 for(var i = 0 ; i <= arr.length-1-1 ; i++){ // 完成一次的选择排序 // 默认起始位置,是当前排序的起始位置的下一个单元 // 已经排序好的单元,不再参与排序 // 默认最小值是当前循环的第一个单元 var index = i; for(var j = i+1; j <= arr.length-1 ; j++){ // 判断当前单元与默认单元的数值,如果当前单元数值小,存储当前单元的索引下标j if(arr[index] > arr[j]){ index = j; } } // 当循环结束,判断index的值,是不是还是i // 不是i,将i索引下标的数值,与index索引下标的数值(某次的j),数值交换 if(index != i){ var intM = 0; intM = arr[index]; arr[index] = arr[i]; arr[i] = intM; } }
7. 7,数组的简单操作
   1. 定义
      1. 存储数据单元的集合
      2. 可以存储多个数据单元
   2. 语法
      1. var arr = [ 1,2,3,4,5, ];
      2. 使用[]定义数组,多个数据单元之间使用逗号间隔
   3. 数组的属性
   4. 数组的操作
      1. 操作数据
         1. arr[索引下标]
      2. 修改数据
         1. 索引下标必须是已经存在索引下标
         2. arr[索引下标] = 数值
      3. 新增数据
         1. 索引下标是不存在的
         2. 索引下标必须是连续的
            1. 一般定义为 arr[arr.length] = 数据
         3. arr[索引下标] = 数值
      4. 删除数据
         1. 定义数值的长度属性,数值不能小于0
         2. arr.length = 数值
   5. 数值的循环遍历
      1. 通过for循环,生成所有的索引下标
      2. 循环变量是 从 0 至 最后一个单元的索引下标 arr.length-1
8. 8,函数
   1. 函数的概念
      1. 实现功能的代码块
         1. 将实现功能的代码进行封装调用
      2. 优点
         1. 简洁
            1. 封装的作用
         2. 任意位置都可以调用
         3. 重复使用
   2. 函数的定义
      1. 关键词
         1. function
      2. 函数的名称
         1. 命名规范与变量的命名规范相同
      3. 函数的执行体
      4. 函数的参数和返回值
   3. 函数的封装和调用
      1. 函数的封装
         1. 函数在封装阶段,并没有执行,只是定义函数
            1. 名称
            2. 参数
            3. 执行体
            4. 返回值
         2. 1,开辟一个存储空间,计算机系统,给这个空间定义一个内存地址
         3. 2,给这个空间定义一个内存地址
         4. 3,将定义的程序,存储在这个存储空间中
         5. 4,将这个存储空间的地址复制给变量存储
      2. 函数的调用
         1. 1,通过变量冲存储的内存地址,找到存储空间
         2. 2,调用存储空间中,存储的程序内容
         3. 3,执行程序内容
         4. 4,执行结果是return的返回值
   4. 函数的参数
      1. 是函数执行时,需要的数据
      2. 形参
         1. 定义在函数内部的参数,没有实际的数值,只是形式上的参数
      3. 实参
         1. 函数被调用时,赋值的实际数值
      4. 给函数参数定义默认值
   5. 函数的返回值
      1. return定义
      2. return的作用
         1. 定义返回值
            1. 定义的返回值,在函数执行时,可以被操作或者使用
         2. 终止函数中,之后的程序执行
   6. arguments
      1. JavaScript的关键词
      2. 是一个伪数组
         1. 可以会用length属性,可以使用[索引下标]语法
         2. 不能使用数组的操作方法
      3. 作用
         1. 以数组的形式存储所有的实参
         2. 在函数内部通过循环遍历的方式,使用调用所有的实参
         3. function fun(){ console.log(arguments); var sum = 0; for(var i = 0 ; i <= arguments.length-1 ; i++){ sum += arguments[i]; } return sum; } console.log(fun(1,2,5,6,100,200,-1000)) ;
   7. 函数的注释
      1. /* add() 累加求和函数 @param int a 累加求和的起始值,默认值是1 @param int b 累加求和的终止值 @return int sum 累加求和的返回值 按照指定数值范围,求自然数的累加求和 默认起始值是1 对于输入的数值,有格式要求,不是能是字符串,小数,负数 对于输入数值的大小顺序,没有要求 */ function add(a,b=1){ if(a > b){ var intM = 0 ; intM = a; a = b; b = intM; } var sum = 0; for(var i = a ; i <= b ; i++){ sum += i } return sum; }
   8. 递归函数
      1. 函数内部调用函数自己
      2. 语法简单,但是执行程序,占用大量内存,执行效率低
      3. 程序简单,执行次数少的情况,使用递归函数
9. 9,变量的作用域
   1. 作用域
      1. 变量的作用范围
      2. 全局作用域 / 全局变量
         1. 定义在函数之外的变量
      3. 局部(私有)作用域 / 局部(私有)变量
         1. 定义在函数内部的变量
   2. 作用域的基本原则
      1. 全局变量可以在函数内部直接使用,局部变量默认只能在函数内部使用
   3. 函数中变量的使用原则
      1. 调用使用
         1. 1,优先使用当前作用域中存储的变量
         2. 2,如果当前作用域没有这个变量,去父级作用域中,找这个变量
         3. 3,如果当前作用域和所有的父级作用域都没有这个变量,执行结果是undefined
         4. 4,不会去子级作用域找变量
      2. 赋值
         1. 1,优先对当前作用域的变量进行赋值
         2. 2,如果当前作用域没有这个变量,去父级作用域中,找这个变量
         3. 3,如果当前作用域和所有的父级作用域都没有这个变量,赋值语句升级为声明变量语句,并且声明的是一个全局变量
         4. 4,不会去子级作用域找变量
   4. JavaScript的预解释
      1. JavaScript是一门弱类型的,解释型的脚本语言
      2. 在一个JavaScript的程序中(在一个script标签中),要执行程序,会先对两个关键词,进行预解释 var function
      3. 如果先调用,后定义的变量,执行结果是undefined
      4. 如果先调用,后定义的函数,可以正常执行
      5. 预解释的无底线
         1. 不会执行的程序中,有var 或者 function,也会预解释
      6. 函数执行时,也有预解释
10. 10,对象的简单介绍
    1. 语法
       1. 字面量
          1. var obj = {}
       2. 构造函数语法
          1. var obj = new Object();
    2. 操作语法
       1. 对象.属性
          1. 点语法,不解析变量
       2. 对象[属性]
          1. 属性必须是字符串形式,除非是个变量
    3. 基本操作方式
       1. 与数组的基本操作方式相同
    4. 基本数据类型和引用数据类型的存储
       1. 栈
          1. 数据有序存放,先写入的数据,存放在下方
          2. 存储基本数据类型
          3. 存储应用数据类型的变量名称,变量名称中存储内存地址
       2. 堆
          1. 数据无序存放
          2. 存储引用数据类型的数据内容,生成一个内存地址
       3. 数据的调用
          1. 基本数据类型在栈中,直接通过调用变量名称,调用变量中存储的数据
          2. 引用数据类型,通过栈中存储的,变量名称中存储的内存地址,找到堆中对应的空间,调用其中存储的数据或者程序
11. 11,数组的操作方法
    1. JavaScript提供的函数方法
    2. 数组的基本方法
       1. 1,push()
          1. 作用
             1. 在数组的末位,新增单元
          2. 语法
             1. 数组.push(参数)
          3. 参数
             1. 新增的单元的数据,可以是一个或者多个,使用逗号间隔
          4. 返回值
             1. 新增单元之后,新数组的长度,单元个数
       2. 2,unshift()
          1. 作用
             1. 在数组的首位,新增单元
          2. 语法
             1. 数组.unshift(参数)
          3. 参数
             1. 新增的单元的数据,可以是一个或者多个,使用逗号间隔
          4. 返回值
             1. 新增单元之后,新数组的长度,单元个数
       3. 3,pop()
          1. 作用
             1. 在数组的末位,删除单元
          2. 语法
             1. 数组.pop()
          3. 参数
             1. 一次只能删除一个单元,没有参数
          4. 返回值
             1. 删除单元的数据内容
       4. 4,shift()
          1. 作用
             1. 在数组的首位,删除单元
          2. 语法
             1. 数组.shift()
          3. 参数
             1. 一次只能删除一个单元,没有参数
          4. 返回值
             1. 删除单元的数据内容
       5. 5,reverse()
          1. 作用
             1. 数组单元反转排序
             2. 不改变原始数组
          2. 语法
             1. arr.reverse()
          3. 参数
             1. 没有参数
          4. 返回值
             1. 反转之后的数组
       6. 6,concat()
          1. 作用
             1. 数组拼接
          2. 语法
             1. arr1.concat(arr2)
          3. 参数
             1. 需要拼接上的数组
          4. 返回值
             1. 拼接之后的新的数组
       7. 7,join()
          1. 作用
             1. 数组单元拼接为字符串
          2. 语法
             1. arr.join(参数)
          3. 参数
             1. 设定的间隔符号
             2. 默认为逗号
             3. 如果不需要间隔符号,需要设定为空字符串
       8. 8,splice()
          1. 作用
             1. 删除数组指定单元
          2. 语法
             1. arr.splice(参数1,参数2,参数3)
          3. 参数
             1. 参数1
             2. 删除单元的起始索引下标
             3. 参数2
             4. 从起始索引开始,删除的单元的个数
             5. 参数3
             6. 可选参数
             7. 删除的所有的单元,作为一个整体,用一个内容来替换
       9. 9,sort()
          1. 作用
             1. 数组的排序
          2. 默认按照首位的数值大小进行排序
          3. 按照数值的大小进行排序
             1. 数组.sort(function(a,b){return a-b})
             2. 从小到大
             3. 数组.sort(function(a,b){return b-a})
             4. 从大到小
    3. 数组的循环遍历方法
       1. for...in循环
       2. 可以遍历数组和对象
12. 12,字符串的基本操作方法
    1. 字符串是一个包装类型
       1. 如果按照数组的操作方式操作,可以包装自己为一个伪数组
       2. 有length属性,可以使用[]语法操作,但是不能使用数组的操作方法
       3. 不能通过修改length属性,修改字符串长度,不能通过给索引下标赋值,修改字符串内容
    2. 操作方法
       1. indexOf()
          1. 作用
             1. 查询某个字符串,是否是字符串内容
             2. 查询首次出现的位置的索引下标
          2. 参数
             1. 查询的字符
             2. 区分大小写
          3. 返回值
             1. 如果有匹配的字符,查询结果是索引下标
             2. 如果没有匹配内容,执行结果是-1
       2. lastIndexOf()
          1. 作用
             1. 查询某个字符串,是否是字符串内容
             2. 查询最后一次出现的位置的索引下标
          2. 参数
             1. 查询的字符
             2. 区分大小写
          3. 返回值
             1. 如果有匹配的字符,查询结果是索引下标
             2. 如果没有匹配内容,执行结果是-1
       3. toLowerCase()
          1. 作用
             1. 字符串内容全部小写
             2. 不会改变原始字符串
          2. 参数
             1. 需要改变的字符串
       4. toUpperCase()
          1. 作用
             1. 字符串内容全部大写
             2. 不会改变原始字符串
          2. 参数
             1. 需要改变的字符串
       5. charAt()
          1. 作用
             1. 获取指定索引对应的字符
          2. 参数
             1. 索引下标
       6. charCodeAt()
          1. 作用
             1. 获取指定索引对应字符的ASCII码表数值
          2. 参数
             1. 索引下标
       7. substring()
          1. 作用
             1. 截取字符串子串
          2. 参数
             1. 参数1
             2. 截取字符串的起始下标
             3. 参数2
             4. 截取字符串的结束下标
             5. 如果不写第二个参数,是截取至原串的最后一个字符
             6. 如果第二个参数是负数,是从起始字符位置向字符串起始位置开始截取,但是不包括第一个参数对应的字符
             7. 截取的子串,包括第一个参数,但是不包括第二个参数
       8. substr()
          1. 作用
             1. 截取字符串子串
          2. 参数
             1. 参数1
             2. 截取字符串的起始下标
             3. 如果第一个参数是负数,是从倒数第几个字符开始截取
             4. 参数2
             5. 截取字符串的字符个数
             6. 如果不写第二个参数,是截取至原串的最后一个字符
       9. split()
          1. 作用
             1. 字符串转化为数组
          2. 参数
             1. 参数1
             2. 间隔符号
             3. 参数2
             4. 转化数组的单元个数
             5. 不写第二个参数,就是按照间隔符号转化
       10. replace()
           1. 作用
              1. 字符串内容替换函数
              2. 默认执行懒惰模式,只替换第一个符合的内容
           2. 参数
              1. 换谁
              2. 原始字符串中,需要被替换掉的内容
              3. 换成谁
              4. 准备替换原始内容的新内容
13. 13,严格模式
    1. 'use strict'
    2. 注意问题
       1. 在学习时,不要使用严格模式,只有在封装函数,插件,框架时,会使用严格模式
       2. 使用严格模式,语法必须规范,并且,'use strict'必须要写在程序的第一行
       3. 经常出现的问题: 必须有var关键词,函数的形参不能重复定义,函数中没有this关键词..
       4. 不管分号
14. 14,this指向问题
    1. 普通函数
       1. 普通函数,this的指向,是函数之前的对象
       2. 声明方式
          1. window
          2. function fun(){} fun() // window.fun()
       3. 赋值方式
          1. window
          2. var fun = function(){} fun() // window.fun()
       4. 对象方式
          1. 绑定函数的对象
          2. var obj = { fun : function(){} } obj.fun()
       5. 事件绑定方式
          1. 绑定函数的标签
          2. 标签对象.onclick = function(){}
    2. 定时器
       1. this,指向的是window
       2. 箭头函数定义,this指向的是父级程序的this
    3. forEach()
       1. function中,this是undefined
       2. 箭头函数定义,this指向的是父级程序的this
    4. 箭头函数
       1. 指向的父级元素的this
       2. 如果父级元素有this,箭头函数的this就是父级元素的this
       3. 如果父级元素没有this,箭头函数的this指向window
    5. 构造函数
       1. this默认指向,通过构造函数生成的实例化对象
       2. 如果构造函数中,有事件绑定,事件绑定中的this指向的事件源
       3. 有时需要存储this,在事件绑定中使用
    6. 改变this指向
       1. call()
          1. 语法
             1. 函数.call(this指向 , 原函数的参数1, 原函数的参数2...)
       2. apply()
          1. 语法
             1. 函数.apple(this指向 , [原函数的参数1, 原函数的参数2...])
       3. bind()
          1. 语法
             1. const fun = 函数.bind(this指向)
             2. 将改变this指向之后的函数,作为返回值,新函数与原始函数之间的只有this指向不同
    7. this问题总结
       1. 需要注意在所有的函数中,this的指向问题
       2. 1,使用call()等方法,改变this的指向,箭头函数无法改变this指向的
       3. 2,可以通过将function,改为箭头函数,来实现改变this指向
       4. 3,在一个函数中,要使用两个this指向,先存储一个this,在事件中,使用变量,替换当前事件的this
    8. jQuery事件中的this
       1. 普通的事件绑定,this指向的是绑定事件的标签对象
       2. 第二个参数是事件委托,this指向的是触发事件的标签对象
          1. 例如,div标签中有span标签,给div绑定事件,然后通过事件委托,定义点击对象是span标签时,触发事件
          2. JavaScript中,this的指向始终是div标签对象
          3. jQuery中,事件委托的是span标签,this的指向就是span标签
    9. 注意
       1. 构造函数中,事件绑定中,定时器中,函数中调用函数,forEach中,的this问题
15. 15,ES5的数组操作方法
    1. indexOf()
       1. 作用
          1. 查找数组中是否有某个值
       2. 参数
          1. 需要查找的数值
       3. 返回值
          1. 如果有匹配内容,返回值是索引下标
          2. 没有匹配内容,返回值是-1
    2. forEach()
       1. 作用
          1. 循环遍历数组
          2. 只能循环遍历数组,不能遍历对象
       2. 语法
          1. 数组.forEach(function(形参1,形参2,形参3){循环体})
       3. 形参
          1. 形参1
             1. 存储数组单元的数值
          2. 形参2
             1. 存储数组单元的索引
          3. 形参3
             1. 存储原始数组单元
    3. map()
       1. 映射
       2. 语法
          1. 数组.map(function(value,key,arr){需要操作执行的程序})
       3. 返回值
          1. 按照条件,返回的新数组
    4. filter()
       1. 过滤
       2. 语法
          1. 数组.filter(function(value,key,arr){需要操作执行的程序})
       3. 返回值
          1. 按照条件,返回的新数组
    5. some()
       1. 有一个符合条件的就行
       2. 语法
          1. 数组.some(function(value){value的条件})
       3. 返回值
          1. 布尔类型
    6. every()
       1. 所有符合条件
       2. 语法
          1. 数组.every(function(value){value的条件})
       3. 返回值
          1. 布尔类型
16. 16,Math方法
    1. Math.random()
       1. 随机数
       2. 公式
          1. 生成 a - b 范围的整数 parseInt(Math.random()*(b+1-a) + a)
    2. Math.round()
       1. 四舍五入取整
    3. Math.floor()
       1. 向下取整
    4. Math.ceil()
       1. 向上取整
    5. Math.min()
       1. 返回参数中的最小值
    6. Math.max()
       1. 返回参数中的最大值
    7. Math.pow()
       1. 幂运算
    8. Math.sqrt()
       1. 平方根
    9. Math.abs()
       1. 绝对值
    10. 补充知识
        1. 字符串操作方法
        2. .toFixed()
           1. 转化为字符串,设定保留几位小数
17. 17.Date()方法
    1. 1,声明方法
       1. 一个字符串参数
          1. '2019-11-22 10:57:30'
          2. 没有秒是00秒
          3. 小时和分钟必须一起设定
          4. 不设定时间,2位月份,显示8点,1位月份,显示0点
          5. 日期月份不设定,默认都是以1
       2. 多个数值参数
          1. (2019 , 11 , 22 , 10 , 57 , 30)
          2. 设定多个参数,必须是2个以上参数
             1. 至少要有年份和月份
             2. 设定数值超出正常数值会进位
             3. 月份如果是数值形式,是0-11,对应1-12月
    2. 2,获取时间
       1. 时间对象.getFullYear()
          1. 4位年份
       2. 时间对象.getMonth()
          1. 月份
          2. 0-11
       3. 时间对象.getDate()
          1. 获取日期
       4. 时间对象.getDay()
          1. 获取星期
          2. 0表示星期日
       5. 时间对象.getHours()
          1. 小时
       6. 时间对象.getMinutes()
          1. 分钟
       7. 时间对象.getSeconds()
          1. 秒
    3. 3,获取当前时间的时间戳
       1. 时间对象.getTime()
       2. 从设定的时间到1970年1月1日0点0分0秒的时间差
       3. JavaScript中时间戳的单位是毫秒
18. 18,计时器
    1. 定时器
       1. setInterval
          1. 定时器
             1. 按照间隔时间,循环往复执行程序
             2. 执行多次
          2. 语法
             1. var time = setInterval( function(){执行的程序} , 间隔时间 ,单位毫秒)
             2. 变量中存储的是,这个定时器,是真个程序中的第几个定时器
    2. 延迟器
       1. setTimeout
          1. 延迟器
             1. 按照延迟时间,执行程序
             2. 只执行一次
          2. 语法
             1. var time = setTimeout( function(){执行的程序} , 延迟时间 ,单位毫秒)
             2. 变量中存储的是,这个定时器,是真个程序中的第几个定时器
    3. 清除定时器
       1. clearInterval(需要去除的定时器) clearTimeout(需要去除的定时器)
       2. 是可以混用的
    4. 异步操作
       1. 所有同步程序执行结束之后,再执行异步操作
       2. 所有的异步操作都是在同步操作执行结束之后,一起开始执行,时间间隔短的,先执行,显示效果
       3. 异步操作在操作之前,都存储在异步池中
19. 19,DOM操作
    1. 对文档的操作
       1. Doucment Object Model
       2. 文档对象模型
    2. 获取标签对象
       1. document.getElementById()
          1. 通过id的属性值
          2. 获取到的是一个标签
       2. document.getElementsByTagName()
          1. 标签名称
          2. 获取到的是有一个伪数组
          3. 可以通过[]语法操作,可也以通过forEach()循环遍历
       3. document.getElementsByClassName()
          1. class的属性值
          2. 获取到的是有一个伪数组
          3. 可以通过[]语法操作,可也以通过forEach()循环遍历
       4. document.getElementsByName()
          1. name 属性的属性值
          2. 获取到的是有一个伪数组
          3. 可以通过[]语法操作,可也以通过forEach()循环遍历
       5. document.querySelector()
          1. 可以通过多种方式获取标签对象,只获取符合条件的第一个标签
          2. 方式
             1. '#id属性值'
             2. '.class属性值'
             3. '标签名称'
             4. 'css选择器'
             5. '[属性="属性值"]'
             6. '父级标签>子级标签'
       6. document.querySelectorAll()
          1. 获取所有符合条件的标签,执行结果是一个伪数组
          2. 方式
             1. '#id属性值'
             2. '.class属性值'
             3. '标签名称'
             4. 'css选择器'
       7. 特殊标签对象的获取
          1. body
             1. document.body
          2. head
             1. document.head
          3. titile
             1. document.title
          4. html
             1. document.documentElement.
    3. 获取标签的属性
       1. 标签对象.id
          1. id属性的属性值
       2. 标签对象.className
          1. class属性的属性值
       3. 标签对象.title
          1. title属性的属性值
       4. 只要是标签对象中,具有的属性,都可以获取
          1. conosle.dir(标签对象)
    4. 设定标签属性
       1. 标签对象.id = 数值
          1. 设定id 属性的属性值
       2. 标签对象.className = 数值
          1. 设定class 属性的属性值
       3. 标签对象.title = 数值
          1. 设定title 属性的属性值
       4. 只要是标签支持的属性都可以设定属性值
       5. 布尔属性的属性值
          1. true
          2. false
    5. 内容的读取和设定
       1. innerHTML
          1. 可以解析支持标签
       2. innerText
          1. 不支持解析标签,标签只是以字符串的形式输出
       3. 都是全覆盖操作
    6. 行内样式的读取和设定
       1. 只能获取到行内样式的设定的css属性和属性值
       2. 标签对象.style.css样式
       3. 不支持减号,去除减号,第二个单词首字符大写
       4. 获取标签执行时的样式属性值
          1. 有可能是行内样式,有可能是非行内样式设定的显示效果
          2. if(window.getComputedStyle){ // 这个方法是可以使用的 console.log(window.getComputedStyle(oDiv).width); }else{ // 兼容IE的方法 console.log(oDiv.currentStyle.width); }
       5. 有px单位
    7. 标签的占位
       1. 宽高 + padding + border
          1. 宽
             1. offsetWidth
          2. 高
             1. offsetHeight
       2. 宽高 + padding
          1. 宽
             1. 标签对象.clientWidth
          2. 高
             1. 标签对象.clientHeight
       3. 边框线宽度
          1. 上
             1. 标签对象.clientTop
          2. 左
             1. 标签对象.clientLeft
       4. margin
          1. 上
             1. 标签对象.offsetTop
          2. 左
             1. 标签对象.offsetLeft
       5. 没有px单位
20. 20,BOM操作
    1. Browser Object Model
       1. 浏览器对象模型
       2. 对浏览器的操作
          1. 浏览器是一款独立的软件,如果要操作浏览器,必须要浏览器自己本身同意,BOM操作就是通过浏览器同意的操作方式,可以操作浏览器
    2. 获取浏览器的宽度高度
       1. window.innerWidth
          1. 浏览器宽度
       2. window.innerHeight
          1. 浏览器高度
    3. 浏览器地址栏信息
       1. window.location
       2. 获取url地址
          1. window.location,href
       3. 设定url地址
          1. 编程式导航
          2. 给标签添加事件,触发事件时,设定一个跳转url地址
          3. oDiv.onclick = function(){ window.location.href = 'http://www.baidu.com'; }
    4. 浏览器对象信息
       1. window.navigator
       2. window.navigator.userAgent
          1. 浏览器的星号,内核,版本信息等
       3. window.navigator.appVersion
          1. 浏览器的版本信息
       4. window.navigator.appName
          1. 浏览器软件名称,统一都是网景
       5. window.navigator.platform
          1. 获取电脑的操作系统信息
    5. 浏览器的历史记录
       1. window.history
       2. window.history.length
          1. 历史记录次数
          2. 浏览了几个网页,有几次
       3. window.history.back()
          1. 上次一次浏览的页面
       4. window.history.forward()
          1. 下一次浏览的页面
       5. window.history.go(数值)
          1. 设定跳转的浏览器次数
          2. 从第一次浏览器的页面,跳转到第5次浏览器的页面,数值是4
    6. 浏览器的弹出层
       1. window.alert()
          1. 提示框
       2. window.prompt()
          1. 输入框
       3. window.confirm()
          1. 确认框
21. 21,浏览器常见事件
    1. 浏览器弹窗事件
       1. window.alert()
          1. 提示框
       2. window.prompt()
          1. 输入框
       3. window.confirm()
          1. 确认框
    2. 浏览器事件
       1. window.onload
          1. 加载事件
       2. window.onscroll
          1. 滚动条事件
       3. window.onresize
          1. 视窗窗口大小改变事件
       4. window.location
          1. 浏览器地址栏
       5. window.navigator
          1. 浏览器信息
       6. window.history
          1. 浏览器历史记录
       7. window.open()
          1. 新窗口打开事件
       8. window.close()
          1. 关闭当前窗口
    3. 鼠标事件
       1. 标签对象.onclick
          1. 鼠标左键点击事件
       2. 标签对象.ondblclick
          1. 鼠标左键双击事件
       3. 标签对象.oncontextmenu
          1. 鼠标右键事件
       4. 标签对象.onmousedown
          1. 鼠标按下事件
       5. 标签对象.onmouseup
          1. 鼠标抬起事件
       6. 标签对象.onmousemove
          1. 鼠标移动事件
       7. 标签对象.onmouseover
          1. 鼠标移入事件
       8. 标签对象.onmouseout
          1. 鼠标移出事件
       9. 标签对象.onmouseenter
          1. 鼠标移入事件
       10. 标签对象.onmouseleave
           1. 鼠标移出事件
       11. 鼠标经过边界线的时候会触发,经过事件源和子级标签时都会触发
       12. 鼠标经过边界线的时候会触发,之后经过事件源时会触发,子级不会触发
    4. 键盘事件
       1. 键盘事件只能给可以被选中的标签绑定,例如input,select,textarea,button,a,或者绑定给document或者window
       2. 标签对象.onkeydown
          1. 键盘按下
       3. 标签对象.onkeyup
          1. 键盘抬起
       4. 多个按键事件
          1. e.keyCode
             1. 键盘按键对应的编号数值
          2. e.ctrlKey
             1. ctrl是否被按下
             2. 结果是布尔类型
          3. e.altKey
             1. alt是否被按下
             2. 结果是布尔类型
          4. e.shiftKey
             1. shift是否被按下
             2. 结果是布尔类型
          5. document.onkeydown = function(e){ e = e || window.event; if( e.ctrlKey && e.shiftKey && e.keyCode == 86 ){ console.log('我按了三个键'); } }
    5. 表单事件
       1. onfocus
          1. 标签获取焦点时触发
       2. oninput
          1. 标签输入内容时触发
       3. onchange
          1. 标签失去焦点,并且输入内容有改变时,触发
       4. onsubmit
          1. 事件必须绑定给form标签
          2. 当表单提交时触发
    6. 触摸事件
       1. 标签对象.ontouchstart
          1. 触摸开始
       2. 标签对象.ontouchend
          1. 触摸结束
       3. 标签对象.ontouchmove
          1. 触摸移动
    7. 特殊事件
       1. 标签对象.ontransitionend
          1. 当过渡结束时触发
       2. 标签对象.onanimationend
          1. 当动画结束时触发
22. 22,浏览器属性
    1. 浏览器的宽度高度
       1. 包含滚动条
          1. 有没有文档类型声明,执行结果都相同
          2. window.innerWidth
          3. window.innerHeight
       2. 不包含滚动条
          1. 有文档类型声明,获取的是窗口大小,没有文档类型声明,获取的是,body也就是整个页面的大小(谷歌浏览器)
          2. document.documentElement.clientHeight
          3. document.documentElement.clientWidth
    2. 获取浏览器上卷的高度
       1. 有文档类型声明
          1. document.documentElement.scrollTop
       2. 没有文档类型声明
          1. document.body.scrollTop
       3. 兼容方式
          1. 逻辑或赋值方式
             1. var height = document.documentElement.scrollTop || document.body.scrollTop;
23. 23,标签属性操作
    1. setAttribute()
       1. 作用
          1. 设定标签属性属性值
          2. 设定的属性,只能通过getAttribute()方法来获取
       2. 语法
          1. 标签对象.setAttribute('参数1' , '参数2')
       3. 参数
          1. 参数1
             1. 添加的属性
          2. 参数2
             1. 属性值
    2. getAttribute()
       1. 作用
          1. 获取标签的属性以及属性值
       2. 语法
          1. 标签对象.getAttribute('参数')
       3. 参数
          1. 需要获取的属性
    3. 总结
       1. 在标签对象中原生存在的属性,可以使用 点语法或者[]语法,直接操作标签对象获取,也可以用点语法和[]语法直接进行设定
       2. 自定义属性,最好使用setAttribute()来设定,通过getAttribute()来获取
24. 24,节点的操作
    1. 概念
       1. 文档中的所有内容,都是节点,标签,文本,注释,属性等
    2. 获取
       1. 父级对象.childNodes
          1. 获取父级对象中的所有子级节点
       2. 父级对象.children
          1. 获取父级对象中的元素节点/标签节点
       3. 父级对象.firstChild
          1. 获取父级对象中的第一个节点
       4. 父级对象.lastChild
          1. 获取父级对象中的最后一个节点
       5. 父级对象.firstElementChild
          1. 获取父级对象中的第一个元素节点
       6. 父级对象.lastElementChild
          1. 获取父级对象中的最后一个元素节点
       7. 标签对象.previousSibling
          1. 当前标签对象的上一个兄弟节点 (哥哥)
       8. 标签对象.nextSibling
          1. 当前标签对象的下一个兄弟节点 (弟弟)
       9. 标签对象.previousElementSibling
          1. 当前标签对象的上一个兄弟元素节点 (哥哥)
       10. 标签对象.nextElementSibling
           1. 当前标签对象的下一个兄弟元素节点 (弟弟)
       11. 标签对象.parentNode
           1. 获取标签对象的父级节点
       12. 标签对象.attributes
           1. 获取标签对象的所有属性
    3. 类型,名称,内容
       1. 节点类型
          1. 标点对象.nodeType
             1. 返回值是一个数值
             2. 元素节点,类型数值是1
             3. 属性节点,类型数值是2
             4. 文本节点,类型数值是3
             5. 注释节点,类型数值是8
       2. 节点名称
          1. 标点对象.nodeName
             1. 元素节点,名称是标签名称
             2. 属性节点,名称是属性名
             3. 文本节点,名称是#text
             4. 注释节点,名称是#comment
       3. 节点内容
          1. 标点对象.nodeValue
             1. 元素节点,内容是null
             2. 属性节点,内容是属性值
             3. 文本节点,内容是节点内容
             4. 注释节点,内容是注释内容
    4. 设定节点
       1. 创建
          1. 创建一个标签节点/元素节点
             1. document.createElement('你要创建的标签节点')
          2. 创建一个文本节点
             1. document.createTextNode('你要创建的文本内容')
          3. 通过setAttribute()定义标签节点的属性,以及属性值
       2. 将节点写入页面中
          1. 在父级元素的末位添加节点
             1. 标签对象.appendChild('添加的节点')
          2. 在父级中的某个标签之前,添加节点
             1. 父级元素.insertBefore(你要添加的子级节点 , 你要添加在哪个节点之前)
       3. 删除节点
          1. 父级元素.removeChild(你要删除的子级节点)
       4. 克隆节点
          1. cloneNode()
             1. 只克隆标签本身
          2. cloneNode(true)
             1. 克隆标签本身和标签子级内容
25. 25,事件操作
    1. 1,事件的三个组成部分
       1. 事件源
          1. 绑定事件的标签对象
       2. 事件类型
          1. 绑定的是什么事件
       3. 事件处理函数
          1. 触发事件时执行的程序
    2. 2,事件对象
       1. 是一个JavaScript自动定义的对象,这个对象中,存储与事件相关的数据信息
       2. 获取事件对象
          1. 标签对象.事件类型 = function(e){ e = e || window.event }
       3. e.type
          1. 事件类型
    3. 3,鼠标点击的坐标
       1. 事件源边框线内,左上角为坐标原点
          1. offsetX
          2. offsetY
       2. 坐标原点是视窗窗口的左上角
          1. clientX
          2. clientY
       3. 坐标原点是HTML文档的左上角
          1. pageX
          2. pageY
       4. client和page的区别
          1. 页面滚动时,两个数值有区别,如果页面没有移动,两个数值是相同的
    4. 4,鼠标点击的内容
       1. 鼠标点击对象的信息,存储在target属性中
          1. innerText
             1. 点击标签的本文内容
          2. tagName
             1. 点击标签的标签名称
             2. 标签名称是大写字符
          3. id
             1. id属性值
          4. className
             1. class属性值
    5. 5,事件的传播
       1. 点击子级标签会触发父级标签上相同类型的事件
    6. 6,事件的阻止传播
       1. function stopBubble(e){ if(e.stopPropagation){ e.stopPropagation(); }else{ e.cancelBubble = true; } }
    7. 7,事件的委托
       1. 通过给父级标签,添加事件,通过判断,来给子级标签定义不同的执行程序
       2. 1,父级中,有多个需要添加相同类型的事件,但是事件处理函数不同
       3. 2,动态生成的标签,使用事件委托方式更方便
    8. 8,事件的监听/事件的注册
       1. 一个标签,相同的事件类型,默认只能绑定最后一个事件处理函数
       2. 如果需要给有一个标签,相同的事件类型,添加多个时间处理函数,必须使用事件的监听语法
       3. function myAddEvent( ele , type , fun){ // 判断 addEventListener这个方法是否存在 if(ele.addEventListener){ ele.addEventListener(type , fun); }else{ ele.attachEvent('on'+type , fun); } }
    9. 9,事件的移除
       1. 标签对象.removeEventListener('事件类型' , 事件处理函数)
       2. 只能移除当顶的是一个传参的函数名称
          1. // 绑定事件 绑定的事件函数是fun oDiv.addEventListener('click' , fun); // 清除事件 清除的时间处理函数是fun oDiv.removeEventListener('click' , fun);
    10. 10,阻止默认事件的执行
        1. 方法1
           1. e.preventDefault();
           2. 普通浏览器
        2. 方法2
           1. e.returnValue = false;
           2. 低版本IE浏览器
        3. 方法3
           1. return false;
           2. 并不能阻止所有的执行
        4. 兼容语法
           1. if (e.preventDefault) { e.preventDefault(); } else { e.returnValue = false; }
26. 26,ES6的基本语法
    1. 变量的定义
       1. let
          1. 定义变量
          2. 不能重复声明定义相同的变量
          3. 如果有{},只存在于{}中
          4. 不会被预解释
       2. const
          1. 定义常量
          2. 不能重复声明定义相同的常量,赋值之后,存储的数据不能被改变
          3. 如果有{},值存在于{}中
          4. 不会被预解释
    2. 箭头函数
       1. var fun = () => {}
       2. 只有表达式函数,可以写成箭头函数 function fun(){} 这样正常定义的函数不能写成箭头函数
       3. 箭头函数不能被预解释
       4. 箭头函数的this指向的是父级程序的this指向
       5. 如果父级不是函数,没有this指向,箭头函数的this指向的是window
       6. 箭头函数的this指向,不能被改变
       7. 箭头函数没有arguments
       8. 简写语法
          1. 如果箭头函数只有一个参数,()可以不写
          2. 如果箭头函数的执行体,只有一行代码,可以省略{}
    3. 改变this指向
       1. call()方法
          1. 函数.call(指向的对象 , 原始函数参数1,原始函数参数2...)
       2. apply()方法
          1. 函数.apply(指向的对象 , [原始函数参数1,原始函数参数2....])
       3. bind()方法
          1. 函数.bind(指向的对象)
          2. 不会立即执行函数,而是生成一个新的,改变了this指向的函数
          3. 只有this指向与原始函数不同,其他都完全相同
    4. 立即执行函数
       1. 立即执行函数,不能被重复调用
       2. 立即执行函数的this,指向window
       3. 语法
          1. (函数(){})()
          2. !函数(){}()
          3. ~函数(){}()
          4. 函数的参数,在立即执行()中定义
             1. function(str){ console.log(str) }
             2. (function(str){console.log(str)}) ('北京')
    5. 模板字符串
       1. ` 字符串内容 `
       2. 支持换行
       3. 可以解析变量
          1. 变量必须使用${'变量'}包裹
    6. 解构语法
       1. 数组的解构
          1. var [变量1 , 变量2 , ...] = [1,2,3....]
             1. 将数组中的数值,依次赋值给[ ] 中的变量
          2. var [变量1 , 变量2 , [变量3] ...] = [ 1 , 2 , [ 3 , 4 , ] ...]
             1. 解构多维数组
          3. 多维数组转化为一维数组
             1. 使用 .toString() , 转化为以逗号间隔的字符串,再转化为数组
       2. 对象的解构
          1. var {变量1 , 变量2 ....} = {属性1 , 属性2 }
             1. 将对象中的属性存储的属性值,赋值给{}中的变量,这个变量必须是对象中存在的属性
          2. var {变量1 : 别名 , 变量2 : 别名 ....} = {属性1 , 属性2 }
             1. 给变量添加别名
          3. var {变量1 : { 属性2 : 别名 }} = {属性1 : {属性2 } }
             1. 解构多维对象
    7. 展开运算符
       1. ...数组
          1. 将数组的数值展开,一一使用
    8. 合并运算符
       1. var fun = (...形参)=>{}
       2. 将所有的实参,以数组的形式存储在形参中,作用于arguments相同
27. 27,轮播图
    1. 运动函数
       1. 以动画效果形式,实现标签的运动效果
       2. 核心思想
          1. 通过定时器,逐步完成需要的位移效果
       3. 参数
          1. 执行运动的标签对象
          2. 需要执行运动的属性属性值
             1. 对象形式
             2. { left : 500 , top : 500 , opacity : 0 }
          3. 当所有的运动都结束时,执行的程序
             1. 参数形式
       4. 在轮播图中,通过运动函数来实现图片的轮播
       5. 步骤过程
          1. 1,
             1. 定义一个变量,来存储定时器
             2. 对象类型
          2. 2,
             1. 循环遍历,第二个参数,对象中的每一个单元,生成一个对应的运动定时器
             2. 1,获取标签的初始属性值
             3. 当前循环的运动属性,对应的属性值
             4. 添加一个判断
             5. ,如果是透明度,要获取方式是获取浮点数,获取结果要乘以100
             6. 如果不是透明度,获取整数部分
             7. 2,定义定时器
             8. 将定时器存储在对象变量中,对象中的单元属性是运动属性,数值是setInterval的执行结果(1,2,,3...)
             9. 1,定义步长
             10. 目标数值 - 初始值 / 次数 (一般不超过10次)
             11. 步长如果是正数,向上取整
             12. 入股欧式负数,向下取整
             13. 2,每次运动,改变的数值
             14. 初始值 += 步长
             15. 3,将新的初始值数据,赋值给标签对象
             16. 添加判断
             17. 如果是透明度, 初始值 / 100
             18. 如果不是透明度,拼接 px 单位
             19. 4,判断是否到达最终位置
             20. 当前初始值 == 最终位置数值
             21. 清除当前定时器
             22. 清除当前移动属性对应的定时器
             23. 删除对象变量中存储的对应的定时器单元
             24. 5,判断对象变量,是否是一个空对象
             25. 如果是空对象,证明所有的定时器都已经停止,执行运动停止时执行的函数,也就是参数3
    2. 轮播图
       1. 定义html,css
       2. JavaScript部分
          1. 1,获取标签对象
          2. 2,轮播图步骤
             1. 1
             2. 根据原始轮播图,定义焦点按钮
             3. 循环遍历轮播图li单元
             4. 1,生成一个li标签
             5. 2,给li标签添加属性 num = i+1
             6. 3,给第一个li添加样式
             7. 4,将li写入页面ol中
             8. 2
             9. 复制原始轮播图中,第一个和最后一个li
             10. 最后一个写入为ul中的第一个标签
             11. 第一个写入为ul中的最后一个标签
             12. 根据新的ul中li的单元个数,设定ul的宽度 li个数 * li宽度
             13. 将ul向左移动一个li的宽度
             14. 3
             15. 自动轮播
             16. 定义定时器,定时器中调用move运动函数
             17. 4
             18. 定义运动终止函数
             19. 判断index的数值
             20. 如果是新ul的长度-1,让index为1,根据新的index值,执行对ul的赋值定位操作
             21. 如果是0,赋值index为新ul的length-2,根据新的index值,执行对ul的赋值定位操作
             22. 焦点的样式改变
             23. 循环遍历ol中的li,清除所有的样式
             24. 给num 等于 index 的标签,添加样式
             25. 给变量赋值为false
             26. 5
             27. 移入移出
             28. 鼠标移入父级div,让自动轮播定时器停止
             29. 鼠标移出父级div,再次执行自动轮播函数
             30. 6
             31. 左右切换
             32. 给父级div添加点击事件,并且判断
             33. 如果点击的是左链接
             34. index--,根据新的index值,执行move函数
             35. 如果点击的是右链接
             36. index++,根据新的index值,执行move函数
             37. 7
             38. 焦点
             39. 给ol添加点击事件,并且判断
             40. 如果点击的是li标签
             41. 获取li标签,num属性
             42. 将index赋值为num
             43. 根据新的index值,执行move函数
             44. 8
             45. 解决点击过快问题
             46. 定义一个变量,存储数值为false
             47. 给左右切换和焦点,添加判断
             48. 如果变量是true,执行return,终止之后的程序执行
             49. 给变量赋值为true
28. 28,正则表达式
    1. 语法
       1. 字面量
          1. let reg = /正则表达式/;
       2. 构造函数
          1. let reg = new RegExp();
    2. 方法
       1. test()
          1. 是否符合正则规范
       2. exec()
          1. 捕获
    3. 规范
       1. 元字符
          1. \d
             1. 数字
          2. \D
             1. 非数字
          3. \w
             1. 数字,字母,下划线
          4. \W
             1. 非数字,字母,下划线
          5. \s
             1. 空格
          6. \S
             1. 非空格
          7. .
             1. 换行
       2. 边界符
          1. ^
             1. 起始
          2. $
             1. 结束
       3. 限定符
          1. *
             1. 0 --- 正无穷
          2. +
             1. 1 --- 正无穷
          3. ?
             1. 0 --- 1
          4. {n}
             1. n次
          5. {n,}
             1. n --- 正无穷次
          6. {n,m}
             1. n --- m 次
       4. 特殊符号
          1. \
             1. 如果符合转义符规范,按照转义符执行,如果是正则规范,按照正则执行
          2. |
             1. 逻辑或
          3. ()
             1. 当做一个整体执行
          4. [ ]
             1. 表示是任意一个内容即可
          5. -
             1. a 至 b
          6. [^]
             1. 非内容
          7. 写在表达式之外的
             1. /表达式/i
             2. 不区分大小写
             3. /表达式/g
             4. 全局验证
       5. 相关函数
          1. search()
             1. ()中的参数可以是正则表达式
          2. match()
             1. 默认只查找符合规范的第一个内容
             2. 如果 /表达式/g 查找全局
          3. replace()
             1. 默认只替换一次
             2. 参数1,如果是/表达式/g,替换全局
             3. 实际操作中,如果有变量参与
             4. eval(),执行正则表达式变量
29. 29,面向对象
    1. 概念
       1. 面向对象是一种编程思想
          1. 通过实例化对象,调用其中的方法和属性,实现项目功能
    2. 优点
       1. 高内聚,低耦合
    3. 语法规范
       1. 构造函数名称,首字符大写
       2. 构造函数中不能定义return
       3. 属性定义在构造函数中,方法定义在prototype中
    4. 工厂模式
       1. function CreateObj(参数){ this.属性1 = 属性值; this.属性2 = 参数; } CreateObj.prototype.fun = function(){ console.log(this.属性1,this.属性2); }
30. 30,ES6的构造函数语法
    1. 在ES6中,专门新增了一个关键词 class ,用于声明构造函数
    2. class 构造函数名称 { constructor(形参){ this.属性1 = 参数; } 实例化对象方法(){ 程序内容 } } const 实例化对象 = new 构造函数(实参); 实例化对象.方法();
31. 31,PHP
    1. 基本概念
       1. 是一门服务器端的弱类型的脚本语言
       2. 作用
          1. 实现服务器前端的数据操作
    2. 基本语法
       1. 1,所有的PHP程序都必须定义在起始和结束标识符之间 <?php 程序内容 ?>
       2. 2,如果结束标识符之后,没有其他程序,必须要忽略结束标识符
       3. 3,php程序必须以 ; 分号 结束
       4. 4,PHP程序严格区分大小写
    3. 变量
       1. PHP中以$来定义变量,使用变量时,也必须带$符号
       2. $int = 100;
    4. 数据类型
       1. 原始数据类型
          1. 标量类型
             1. 布尔类型
             2. 字符串类型
             3. PHP中字符串中支持解析变量,必须是双引号才执行解析变量
             4. 如果字符串中,没有需要解析的内容,使用单引号,效率更高
             5. 为了防止变量与字符串冲突,变量必须使用 { } 包裹
             6. echo "今天{$int}度";
             7. 整数类型
             8. 浮点数类型
             9. JavaScript中浮点数最多17位有效数值
             10. php中14位有效数值
          2. 复合类型
             1. 数组
             2. PHP中数组单元的属性,可以是字符串
             3. $arr = [1,2,3,4,5];
             4. 默认也是索引属性
             5. $arr = [ 'name'=>'张三', 'age' =>18, 'sex' =>'男', ];
             6. 定义关键属性
             7. 对象
             8. 函数
          3. 特殊类型
             1. null
             2. 资源类型
       2. 伪类型
          1. 混合类型
          2. 数值类型
          3. 可回调类型
          4. void类型
    5. 运算符
       1. 字符串拼接运算符
          1. PHP中是 . 点
    6. 分支结构语句
       1. if...else if...else
          1. else if 之间的空客,写不写都行
       2. switch
          1. PHP中,switch进行的是 == 等于比较
          2. JavaScript中,switch进行的是 === 全等比较
    7. 循环结构语句
       1. 没有for in 循环语句
       2. foreache语句语法区别较大
          1. 针对数组的循环遍历
          2. foreach( 数组变量 as 自定义变量1 => 自定义变量2 ){ 循环体内容; }
             1. 循环遍历数组中的所有单元,将单元的键名存储在自定义变量1中,将数据存储在自定义变量2中
          3. foreach( 数组变量 as 自定义变量1 ){ 循环体内容; }
             1. 如果只有一个自定义变量,存储的是数组单元的数据
    8. PDO
       1. PHP7.0版本以后提供的最新的操作数据库的API方法
       2. 操作步骤
          1. 1,定义配置参数,链接MySQL服务器
             1. 参数
             2. $dsn = 'mysql:dbname=html1926;host=127.0.0.1;port=3306';
             3. $user = 'root';
             4. $pwd = 'root';
             5. $pdo = new PDO($dsn,$user,$pwd);
             6. 通过PHP中PDO构造函数,创建一个实例化的PDO对象,参数是之前定义的三个参数
          2. 2,定义并且执行SQL语句
             1. 执行SQL语句
             2. 查询语句
             3. $stmt = $pdo->query($sql);
             4. 使用query()来执行,参数是定义的SQL语句
             5. 执行结果是一个对象
             6. 非查询语句 (增,删,改语句)
             7. 使用exec()来执行,参数是定义的SQL语句
             8. 执行成功是影响的数据数量
             9. 执行成功,有时影响数据数量也可以是0条
             10. 执行失败是false
          3. 3,获取执行结果,显示在页面中
             1. fetchAll()
             2. 获取执行结果集中的所有数据,组成新的数组,参数是PDO::FETCH_ASSOC,设定数组为关联数组
             3. $arr = $stmt->fetchAll(PDO::FETCH_ASSOC)
             4. fetch()
             5. 获取执行结果集中的第一条数据,组成新的数组,参数是PDO::FETCH_ASSOC,设定数组为关联数组
             6. $arr = $stmt->fetch(PDO::FETCH_ASSOC)
             7. rowCount()
             8. 获取查询结果集中的数据数量
             9. $stmt->rowCount();
          4. 注意
             1. JavaScript中,对于对象的操作,是点符号,PHP中对于对象的操作,是->符号
32. 32,数据库
    1. 数据库的基本概念
       1. 存储数据的仓库
          1. 以特定的电子形式，存储和输出数据的仓库
       2. 分类
          1. 网状型数据库
          2. 层次型数据库
          3. 关系型数据库
             1. MySQL
          4. 非关系型数据库
             1. MongoDB
       3. 基本语法
          1. MySQL数据表存储引擎统一为InnoDB；
          2. MySQL数据库、数据表的编码方式统一为UTF8；
          3. SQL语句必须以分号结尾；
          4. MySQL关键字与函数名称全部大写；
          5. 数据库名称、表名称、字段名称等全部小写；
    2. 数据类型
       1. 整数类型
          1. M
             1. 设定存储数值的位数
             2. 实际项目中一般不定义
             3. 实际项目时,没有任何作用,即时超出设定位数,没有超出数值范围,都可以存储
          2. TINYINT(M)
             1. 大小
             2. 1个字节
             3. 范围
             4. -128 - 127(默认范围)
             5. 0-255
          3. SMALLINT(M)
             1. 大小
             2. 2个字节
             3. 范围
             4. -32768到32767
             5. 0到65535
          4. MEDIUMINT(M)
             1. 大小
             2. 3个字节
             3. 范围
             4. -8388608到8388607
             5. 0到16777215
          5. INT(M)
             1. 大小
             2. 4个字节
             3. 范围
             4. -2147483648到2147483647
             5. 0到4294967295
          6. BIGINT(M)
             1. 大小
             2. 0到4294967295
             3. 范围
             4. -9223372036854775808到9223372036854775807
             5. 0到18446744073709551615
       2. 浮点数类型
          1. M,D
             1. M
             2. 整个数值的位数,包括整数部分和小数部分
             3. D
             4. 整个数值中,小数部分的位数
             5. 整数部分的位数
             6. M-D
          2. FLOAT(M,D)
             1. 单精度小数
             2. 范围
             3. -3.4e38至3.4e38
             4. 最多7位小数
          3. DOUBLE(M,D)
             1. 双精度小数
             2. 范围
             3. -1.7e308至1.7e308
             4. 最多15位小数
          4. DECIMAL(M,D)
             1. 定长浮点数
             2. 范围
             3. 65位数值
             4. 最多30位小数
       3. 字符串类型
          1. M
             1. 设定存储字符串的长度
          2. CHAR(M)
             1. 定长字符
             2. 范围
             3. 0至255个字符
          3. VARCHAR(M)
             1. 变长字符
             2. 范围
             3. 理论上最多存储65535个字符
          4. TINYTEXT(M)
             1. 范围
             2. 255 个字符
          5. TEXT(M)
             1. 范围
             2. 65535 个字符
          6. MEDIUMTEXT(M)
             1. 范围
             2. 16777215 个字符
          7. LONGTEXT(M)
             1. 4294967295 个字符 或者 4G
       4. 时间类型
          1. YEAR()
             1. 存储年份
             2. 2
             3. 两位年份
             4. 4
             5. 四位年份
          2. TIME()
             1. 存储时间
             2. 格式：HH:MM:SS
          3. DATE()
             1. 存储年月日
             2. 格式: YYYY-MM-DD
          4. DATETIME()
             1. 存储年月日,时分秒
             2. 格式: YYYY-MM-DD HH:MM:SS
          5. TIMESTAMP()
             1. 自动获取并且存储当前时间
    3. 字段属性和约束
       1. 属性
          1. UNSIGNED
             1. 非负
          2. ZEROFILL
             1. 补零
             2. 添加ZEROFILL属性,会自动添加UNSIGNED属性
       2. 约束
          1. NOT NULL
             1. 非空,输入数据不能为空
          2. DEFAULT
             1. 默认值
          3. UNIQUE KEY
             1. 唯一约束,不能输入重复数据
          4. PRMARY KEY
             1. 主键约束,一般都定义字段为id名称
             2. 与 AUTO_INCREMENT 自增属性捆绑使用
             3. 主键约束的字段,数据不能重复,不能为空
          5. FOREIGN KEY
             1. 外键约束,在联合查询中使用
    4. 数据查询语句
       1. SELECT `字段`,`字段`... FROM `表名`
          1. 查询指定字段的所有数据
       2. SELECT `字段`,`字段`... FROM `表名` WHERE `字段` 约束条件
          1. 查询指定字段的符合条件的数据
          2. > < >= <= <>不等于 AND 逻辑与 OR 逻辑或
       3. SELECT `字段`,`字段`... FROM `表名` WHERE `字段` 约束条件 ORDER BY 字段1 排序方式 , 字段2 排序方式
          1. 按照指定字段的排序方式显示查询结果
          2. ASC
             1. 升序,小---大,默认方式,可以不设定
          3. DESC
             1. 降序,大---小
       4. SELECT `字段`,`字段`... FROM `表名` WHERE `字段` 约束条件 ORDER BY 字段1 排序方式 , 字段2 排序方式 LIMIT 起始数据索引 , 显示数据数量
          1. 分页查询
    5. 数据的更新操作
       1. UPDATE `表名` SET `字段` = 数据 , `字段` = 数据...;
          1. 给指定字段的所有数据更新
       2. UPDATE `表名` SET `字段` = 数据 , `字段` = 数据... WHERE `字段` 约束条件;
          1. 给指定字段中,符合条件的的数据更新
       3. 注意:SQL语句中没有 += 等赋值运算符, 只能使用 `age` = `age`+1
    6. 数据的删除操作
       1. DELETE
          1. DELETE FROM `表名`;
             1. 删除表结构中的所有数据
          2. DELETE FROM `表名` WHERE `字段` 约束条件;
             1. 删除表结构中的符合条件的数据
       2. TRUNCATE
          1. TRUNCATE TABLE `表名`
             1. 删除表结构中的所有数据
       3. 区别
          1. 1,DELETE保留id主键值,TRUNCATE不保留id主键值
          2. 2,DELETE可以逐行删除,TRUNCATE只能删除所有
          3. 3,DELETE支持回滚操作,TRUNCATE不支持
          4. 4,DELETE支持触发器操作,TRUNCATE不支持
33. 33,HTTP协议
    1. 概念
       1. 发送请求和接收响应时,执行的协议
    2. 建立连接
       1. 三次握手
          1. 为了确认客户端和服务器都能正常的接收和发送信息
          2. 第一次
             1. 客户端发送给服务器
             2. 客户端
             3. 知道自己可以发送消息
             4. 服务器
             5. 知道客户端可以发送消息
             6. 知道自己可以接收消息
          3. 第二次
             1. 服务器发送给客户端
             2. 客户端
             3. 知道自己能接收消息
             4. 知道服务器可以发送消息
             5. 知道服务器可以接收消息
             6. 服务器
             7. 知道自己可以发送消息
          4. 第三次
             1. 客户端发送给服务器
             2. 服务器
             3. 知道客户端可以接收消息
    3. 断开连接
       1. 四次挥手
          1. 第一次
             1. 客户端发送给服务器
             2. 告诉服务器,客户端要断开和你的连接了
          2. 第二次
             1. 服务器发送给客户端
             2. 服务器知道客户端要断开连接了,我也要关闭我自己了
          3. 第三次
             1. 服务器发送给客户端
             2. 服务器已经关闭了,不会再发送消息了,但是可以接收消息
          4. 第四次
             1. 客户端发送给服务器
             2. 客户端知道服务器关闭了,知道服务器不发送消息了
             3. 客户端告诉服务器,客户端也要关闭了,不再接收消息了,但是可能随时发送消息
    4. 发送请求
       1. 请求报文
          1. 请求行,请求头,请求空行,请求体
    5. 接收影响
       1. 响应报文
          1. 响应行,响应头,响应体
    6. get请求和post请求的区别
       1. get请求的特点
          1. 参数会显示在地址栏中
          2. 会被浏览器自动缓存
          3. 请求内容的大小,受到浏览器地址栏存储信息长度的限制
          4. get请求方式,多用于从服务器获取信息
          5. 相对不安全
       2. post请求的特点
          1. 参数不会显示在地址栏中
          2. 不会被浏览器缓存
          3. 理论上参数大小不受限制,但是各个服务器,对post请求大小有限制
          4. post请求方式,多用于向服务器发送信息
          5. 相对安全
34. 34,cookie和localStorage
    1. cookie
       1. 概念
          1. 每个浏览器都有的一个独立的存储空间(一个文本文件)
          2. 在相同域名下,可以使用同一个cookie,不用域名有不同的cookie
       2. 作用
          1. 存储数据信息,前端和后台都可以对cookie进行操作
       3. 设定
          1. php
             1. 设定
             2. setcookie()
             3. 参数1
             4. cookie的名称
             5. 参数2
             6. cookie的数值
             7. 参数3
             8. cookie的时效
             9. time() + 时间(单位:秒)
             10. 说明
             11. 服务器时间和本地中国时区有-8的小时的时差,php的setcookie()函数,会根据本地时区,自动转化为服务器时间
             12. 读取
             13. $COOKIE
             14. 在预定义变量中,存储所有的cookie,可以通过数组的方式,调用其中的某个cookie的数值
          2. JavaScript
             1. document.cookie
             2. 来操作cookie
             3. 设定
             4. function mySetCookie(key, value, time) { let t = new Date(); let t1 = t.getTime() - 8 * 60 * 60 * 1000 + time * 1000; t.setTime(t1); document.cookie = `${key}=${value};expires=${time ? t : ''}`; }
             5. 三个参数,是cookie的名称,数据,和时效
             6. 读取
             7. 将cookie字符串,转化为cookie对象
             8. function getCookie(cookieStr){ const obj = {}; let arr = cookieStr.split('; '); arr.forEach(function(item){ let newArr = item.split('='); obj[newArr[0]] = newArr[1]; }) return obj; }
       4. 删除
          1. cookie是没有删除操作的
          2. 一旦cookie的时效过期,会自动删除
          3. 时效以服务器时间为准
    2. localStorage
       1. 概念
          1. 也是一个浏览器提供的本地存储空间
          2. 只要是同一个浏览器,执行的程序都可以获取到localStorage存储的数据
       2. 作用
          1. 存储本地数据,所有的页面程序都可以调用
       3. 相关操作
          1. 设定
             1. localStorage.setItem('设定的键名' , '设定的数值')
          2. 获取
             1. localStorage.getItem('获取的键名')
          3. 删除
             1. localStorage.removeItem('获取的键名')
          4. 清除
             1. localStorage.clear()
    3. 两者的区别
       1. 1
          1. cookie : 同源才能访问
          2. localStorage: 所有的前端页面都可以访问
       2. 2
          1. cookie : 前端,后端都可以操作
          2. localStorage: 只有前端可以操作
       3. 3
          1. cookie : 默认的有效时间是会话级别
          2. localStorage: 默认的有效时间是永久性的
       4. 4
          1. cookie : 必须是键值对形式的字符串
          2. localStorage: 必须是普通字符串或者json字符串
       5. 5
          1. cookie : 一般存储大小为4K
          2. localStorage: 一般存储大小为20M
35. 35,ajax请求
    1. 作用
       1. 前后端重要的交互手段
    2. 特点
       1. 不用刷新或者跳转页面,而是通过发送请求,给后台传参,并且接收返回的内容
       2. 是异步操作,不会影响同步程序的执行
       3. 操作灵活,简便
       4. 是面向对象的编程方法
    3. 基本步骤
       1. 建立一个ajax对象
       2. 设定ajax请求的地址和方法
       3. 接收响应体
       4. 将响应体渲染到页面中
    4. get方式请求步骤
       1. 1,创建ajax对象
          1. 需要兼容处理方式
          2. let xhr = {}; if(XMLHttpRequest){ xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject('Microsoft.XMLHTTP'); }
       2. 2,定义open()
          1. xhr.open(参数1,参数2,参数3);
          2. 参数1
             1. 传参方式,get
          3. 参数2
             1. 传参地址
             2. 之后可以拼接参数,语法与超链接传参语法一致
          4. 参数3
             1. 是否异步
             2. 默认值
             3. true,异步执行
             4. 设定值
             5. false,同步执行
             6. ajax请求一般都是异步执行
       3. 3,设定send()
          1. xhr.send()
       4. 4,获取响应体
          1. 标准浏览器
             1. xhr.onload = function(){}
          2. 兼容低版本IE浏览器
             1. xhr.onreadystatechange = function(){}
          3. 当ajax状态码为4,并且请求状态码为2XX时,请求成功,可以获取响应体
             1. xhr.readyState == 4 && /^2\d{2}$/.test(xhr.status)
    5. post方式请求步骤
       1. 1,创建ajax对象
          1. 需要兼容处理方式
          2. let xhr = {}; if(XMLHttpRequest){ xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject('Microsoft.XMLHTTP'); }
       2. 2,定义open()
          1. xhr.open(参数1,参数2,参数3);
          2. 参数1
             1. 传参方式,get
          3. 参数2
             1. 传参地址
             2. post方式,不在请请求地址之后拼接参数
          4. 参数3
             1. 是否异步
             2. 默认值
             3. true,异步执行
             4. 设定值
             5. false,同步执行
             6. ajax请求一般都是异步执行
       3. 3,定义响应头
          1. xhr.setRequestHeader('content-type' , 'application/x-www-form-urlencoded');
       4. 4,设定send()
          1. xhr.send(参数)
          2. 参数必须是字符串形式,语法格式与超链接传参格式相同,但是没有?
       5. 5,获取响应体
          1. 标准浏览器
             1. xhr.onload = function(){}
          2. 兼容低版本IE浏览器
             1. xhr.onreadystatechange = function(){}
          3. 当ajax状态码为4,并且请求状态码为2XX时,请求成功,可以获取响应体
             1. xhr.readyState == 4 && /^2\d{2}$/.test(xhr.status)
36. 36,跨域和jsonp
    1. 基本概念
       1. 同源
          1. 用一个域名下,可以发送请求,并且获取响应体
          2. 不同域名下,只能发送请求,不能获取响应体
       2. 跨域
          1. 实现给不同域名发送请求,并且获取响应体
    2. 实现方式
       1. jsonp
          1. 原理
             1. 通过script标签中,定义src的属性为跨域访问的对象
             2. 获取跨域请求中,后台返回的响应体,响应体是后台程序执行的输出字符串,将这个字符串在script标签中按照,JavaScript的语法格式执行,下过就是一段JavaScript程序
          2. 传参
             1. 在地址栏之后拼接参数,语法格式与超链接传参语法格式相同
             2. 一般传参搜索的关键词和执行函数的名称
          3. 后台程序
             1. 返回数据,定义为回调函数的参数
             2. 前端程序,在函数中,根据参数,直接执行程序,渲染页面
       2. 代理服务器
          1. 设定Apache或者nginx服务器的配置文件,由Apache或者nginx完成跨域操作
       3. 代理服务器特点
          1. 正向代理
             1. 客户端--->代理服务器--->服务器
          2. 反向代理
             1. 服务器--->代理服务器--->客户端
       4. 基本步骤
          1. 1,设定服务器配置文件
             1. 以nginx为例
             2. 找到配置文件,在server{}中定义代理选项
             3. location = /自定义代理名称 { proxy_pass 代理请求的url地址; }
          2. 2,定义ajax请求
             1. 在定义open()时,第二参数是使用 /自定义代理名称
             2. 如果是get方式,可以拼接参数
             3. 如果是post方式,就按照ajax,post方式,执行步骤即可
37. 37,promise
    1. 委托执行一个异步请求,并且返回异步请求执行的结果
    2. 关键状态
       1. 执行中
       2. 执行成功
       3. 执行失败
    3. 基本语法
       1. const p = new Promise(function(参数1,参数2){ 执行内容; }) // then调用的函数和参数1,调用的函数,是同一个函数 p.then(function(){ 执行内容 }) // catch调用的函数和参数2,调用的函数,是同一个函数 p.catch(function(){ 执行内容 })
38. 38 , async 和 await
    1. 将多个异步执行,按照同步执行的顺序来执行,之前的异步执行没有结束,之后的异步执行不会开始执行
    2. 基本语法格式
       1. async function fun(){ let a = await new Promise(); let b = await new Promise(); let c = await new Promise(); }
          1. 定义3个异步执行,按照同步执行的顺序,从上至下执行3个异步,第一个异步执行完毕,执行第二个异步,第二异步执行完毕才会执行第三个异步
39. 39,闭包
    1. 作用
       1. 调用函数内部数据的方法之一
       2. 延长变量的生存周期
       3. 生成一个不销毁的执行空间
    2. 优点和缺点
       1. 1,不销毁执行空间
          1. 优点:延长了变量的生命周期
          2. 缺点:执行空间不被销毁,一直存在,会引起内存溢出,会导致内存泄露,会被作为攻击对象
       2. 2,变量私有化
          1. 优点:不会污染全局变量
          2. 缺点:外界无法访问函数中的变量,
       3. 在函数外部可以访问函数内部的数据
          1. 外部访问
          2. 函数的执行空间不会被销毁,有可能引起内存的溢出
    3. 闭包的条件
       1. 函数的执行空间必须不被销毁
       2. 函数的返回值是一个函数
       3. 内部函数(返回值函数)访问外部函数(定义的函数)的数据
    4. 基本语法
       1. function fun1(){ var int = 100; return function fun2(){ var num = int; return num; } } // 调用fun1,f1是return的返回值 let f1 = fun1(); // 调用f1,也就是return的返回值函数 let f2 = f1();
       2. 实际应用中,如果是事件绑定,绑定的往往是 立即执行函数 oDvi.addEventlistener('click' , (function(){})())
40. 40,继承
    1. 基本概念
       1. 子类从父类继承属性和方法
    2. 作用
       1. 优化代码,简化程序
    3. 方法1
       1. 在原型链上,添加父类生成的实例化对象
       2. // 定义父类 function Father(name,age){ this.name = name; this.age = age; } Father.prototype.fun = function(){ console.log(`${this.name}今年${this.age}岁了`); } // 通过父类,生成实例化对象 const p = new Father('李四' , 20); // 定义子类 function Son(){} // 在子类的prototype中,添加父类的实例化对象 Son.prototype = p; // 通过子类,生成实例化对象 // 子类实例化对象,就具有父类的所有属性和方法 const s = new Son();
    4. 方法2
       1. 只继承属性
       2. // 装备一个父类 function Father(name,age){ this.name = name; this.age = age; } Father.prototype.fun = function(){ console.log(this.name,this.age); } function Son(sex){ // 在子类中,调用父类 // 通过call方法来改变父类构造函数的this指向 // 相当于在当前位置生成父类的属性 // 并且this指向子类构造函数的this Father.call(this , '张三',18) // 我们自己定义的子类的属性 this.sex = sex; } // 子类执行时需要的参数 const s = new Son('女');
    5. 方法3
       1. 组合继承
          1. 两种继承方式一起使用
       2. // 准备一个父类 function Father(name,age){ this.name = name; this.age = age; } Father.prototype.fun = function(){ console.log(`${this.name}今年${this.age}岁了`); } // 定义子类 function Son(sex){ Father.call(this,'张三',18); this.sex = sex; } // 继承方法,也会继承属性,但是这个属性的存储位置不同 Son.prototype = new Father('李四',20 ); // 给子类自定义方法,要写在Son.prototype赋值之后 Son.prototype.f =function(){ console.log(this.name,this.sex); } const s = new Son('男');
          1. 在实例化对象中,直接存储的是通过call方法,继承的父类的属性和属性值
          2. 在实例化对象的__proto__中,存储的是通过添加父类实例化对象,继承的属性和属性值
    6. ES6的继承语法
       1. 关键词
          1. extends
             1. 继承
          2. super
             1. 设定继承属性的参数
       2. class Son2 extends Father2{ constructor(name,age,sex){ super(name,age); this.sex = sex; } f(){ console.log(this.name,this.age,this.sex); } }
41. 41,设计模式
    1. 概念,作用
       1. 解决程序中的某个问题,而特别定义的程序规范
    2. 单例模式
       1. 作用
          1. 同一个构造函数,生成的实例化对象应该指向的是同一个对象
       2. 基本原理
          1. 1,为了不造成全局变量污染,使用函数封装程序,使用闭包来调用程序
          2. 2,使用闭包,函数的返回值,必须是也是函数
          3. 3,通过判断生成实例化对象.
             1. 如果是第一次执行构造函数,生成实例化对象并且返回
             2. 之后再执行构造函数,直接返回之前的实例化对象
       3. 代码规范
          1. 1,一个变量,存储的是一个立即执行函数的执行结果
          2. 2,立即执行函数返回值是一个函数
          3. 3,在函数中定义构造函数
          4. 4,返回值函数中,通过判断,生成实例化对象,并且返回实例化对象
       4. 基本代码
          1. const Utils = (function () { // 先定义一个构造函数 class setElement { constructor() { } setCss(ele,styleObj) { for (let key in styleObj) { ele.style[key] = styleObj[key]; } } setEvent(ele,event,fun){ ele.addEventListener(event,fun) } } // 定义一个空对象 let obj = undefined; return function(){ if(!obj){ // 调用执行构造函数,不需要参数 obj = new setElement(); } return obj; } })();
    3. 组合模式
       1. 作用
          1. 通过一个调用,执行所有需要执行的程序
    4. 观察者模式
       1. 作用
          1. 用于订阅---发布消息
          2. 当一个对象的状态发生改变,所有依赖于这个对象的对象,都要发送通知,并且根据程序主动更新数据,主要是解决了主体对象与观察者对象之间的功能的耦合
       2. 核心内容
          1. 1,消息盒子
             1. 存储事件类型和事件处理函数
          2. 2,on方法
             1. 定义事件类型和事件处理函数
          3. 3,emit方法
             1. 定义发布消息
          4. 4,off方法
             1. 取消关注
          5. 5,delete方法
             1. 删除事件类型
       3. 代码
          1. class Observer{ constructor(){ // 定义消息盒子 this.message=[]; } // 绑定事件类型和事件处理函数到消息盒子中 on(type,fun){ if(!this.message[type]){ this.message[type] = [fun]; }else{ this.message[type].push(fun); } } // 执行事件,发布消息 emit(type,...agr){ if(!this.message[type]){ return; } let event = {type:type,agr:agr}; for(var i = 0 ; i <= agr.length-1 ; i++){ let tmp = agr[i]; tmp(event); } } // 删除事件处理函数 off(type,fun){ if(!this.message[type]){ return; } for(var i = 0 ; i <= this.message[type].length-1 ; i++){ var f = this.message[type][i]; if(f === fun){ this.message[type].splice(i,1); i--; } } } // 删除整个事件类型 delete(type){ if(!this.message[type]){ return; } delete(this.message[type]); } }
          2. const obj = new Observer(); obj.on('byCar' , fun1); obj.on('byCar' , fun1); obj.on('byCar' , fun2); obj.on('byCar' , fun3); obj.on('byHouse' , fun4); obj.on('byHouse' , fun5); obj.on('byHouse' , fun6); obj.emit('byCar' , fun1,fun3); obj.off('byCar' , fun3); obj.off('byCar' , fun1); obj.delete('byCar'); function fun1(){ console.log('买法拉利') } function fun2(){ console.log('买兰博基尼') } function fun3(){ console.log('买科尼塞克') } function fun4(){ console.log('买三居室') } function fun5(){ console.log('买别墅') } function fun6(){ console.log('买城堡') }
42. 42,数据劫持
    1. 与观察者模式配合使用,完成双向数据绑定
    2. 语法
       1. Object.defineProperty()
       2. 参数1
          1. 需要劫持的对象
       3. 参数2
          1. 劫持对象的键名
       4. 参数3
          1. 劫持键名的相关设定
          2. 必须是对象类型
          3. 设定方法
             1. value:数据
             2. 设定劫持数据的数值
             3. get(){}方法
             4. 通过return来定义劫持单元的数据
             5. 定义的数据,不能被修改
             6. set(){}方法
             7. 当企图修改被劫持单元数据时,触发set()方法
    3. 注意
       1. 问题1
          1. 如果劫持的键名不存在,就是在给对象新增单元
          2. 新增的单元如果使用value:数据;的语法形式来设定,设定的数据不能被修改
       2. 问题2
          1. 如果坚持的键名已经存在,使用value:数据;的语法形式来设定,设定的数据可以被修改
       3. 问题3
          1. 使用get()方法来劫持数据时,value:数据;的语法形式就不能使用
43. 43,SET集合类型
    1. 集合类型,类似于数组类型,但是不接受重复数据
    2. 语法
       1. const s = new Set()
       2. 在()中,定义集合类型的数据,必须是数组的形式
    3. 操作
       1. 1,定义
          1. const set = new Set([100,200,300,true,false,'北京','上海',{name:'张三'} , [1,2,3,4]]);
       2. 2,使用
          1. 方法1
             1. SET集合中的单元,不能直接使用,要转化为数组,再来使用
             2. const arr = [...set]; console.log(arr[0]);
          2. 方法2
             1. 直接通过...展开运算符,展开使用
             2. console.log([...set][0])
       3. 3,新增
          1. set对象.add(数据)
       4. 4,删除
          1. set对象.delete(数据)
       5. 5,清除
          1. set对象.clear()
       6. 6,长度
          1. set对象.size
       7. 7.遍历
          1. set对象.forEach()
          2. 注意:
             1. SET只是类似数组,并不是真的数组,使用forEach循环遍历SET对象,function(){}中设定的参数1,参数2,都是SET单元的数据,参数3是原始的SET对象
44. 44,MAP类型
    1. 类似于对象的数据类型,以键值对的形式存储数据
    2. 基本语法
       1. const map = new Map()
    3. 操作
       1. 1,定义
          1. const m = new Map([['name','张三'] , ['age',100] , [{a:100} , '数据'] , [ [1,2,3] , '数组'] , [ function(){console.log(123)} , '函数' ] ]);
          2. 参数必须是二维数组的形式
          3. 每一个二维数组,必须有2个单元,第一个单元是键名,第二个单元数数据
       2. 2,新增
          1. map对象.set(参数1,参数2)
          2. 参数1
             1. 定义新增单元的键名
          3. 参数2
             1. 定义新增单元的数据
          4. 注意
             1. m.set( a , 100); 和 m.set( 'a' , 100); 定义之后,map类型中的显示效果不同
             2. 参数1,不能是变量,不支持变量
       3. 3,使用
          1. map对象.get(键名) 方法
          2. 不管map中显示的形式是什么,只要通过get(键名),一定可以获取到数据
       4. 4,删除
          1. map对象.delete(键名)
       5. 5,清除
          1. map对象.clear()
       6. 6,遍历
          1. map对象.forEach()
          2. 语法等于普通forRach()相同
       7. 7,判断是否是map中的成员
          1. map对象.had(键名)
          2. 执行结果为布尔类型
45. 45,jQuery
    1. 基本介绍
       1. 网站
          1. 中文
             1. http://jquery.cuishifeng.cn/
          2. 官网
             1. https://jquery.com/
       2. 核心
          1. 封装好的,前端的方法库
          2. 就是一个JavaScript程序文件
       3. 优点
          1. 强大的选择器机制
          2. 优质的隐式迭代
          3. 无所不能的链式编程
       4. 两个全局外部接口
          1. jQuery
          2. $
    2. jQuery的选择器
       1. jQuery通过选择器获取的标签对象,都是伪数组的形式
       2. 转化
          1. JavaScript语法获取的标签对象,不能使用jQuery语法操作,jQuery语法获取的标签对象,也不能使用JavaScript语法操作,必须要相互转化
          2. JavaScrip标签对象转化为jQuery标签对象
             1. $(js对象)
          3. jQuery标签对象转化为JavaScript标签对象
             1. $(jQuery标签对象)[索引下标]
       3. 方法
          1. 1,通过id选择器
             1. $('#id选择器名称')
          2. 2,通过calss选择器
             1. $('.class选择器名称')
          3. 3,通过标签名称
             1. $('标签名称')
          4. 4,通过css选择器
             1. $('ul>li')
             2. $('[name="abc"]')
             3. $('div#box')
          5. 5,通过结构伪类选择器
             1. $('ul>li:first')
             2. 第一个
             3. $('ul>li:last')
             4. 最后一个
             5. $('ul>li:eq(索引)')
             6. 按照索引,获取标签对象
             7. $('ul>li:odd()')
             8. 获取索引数值是奇数的标签
             9. 索引数值是奇数,标签个数是偶数
             10. $('ul>li:even()')
             11. 获取索引数值是偶数的标签
             12. 索引数值是偶数,标签个数是奇数
    3. jQuery的筛选器
       1. 在通过jQuery选择器获取到的标签对象的基础上,再使用筛选器,获取符合条件的标签
       2. 1
          1. $( ).first()
             1. 第一个
       3. 2
          1. $( ).last()
             1. 最后一个
       4. 3
          1. $( )..eq()
             1. 按照下标获取
       5. 4
          1. $( ).prev()
             1. 上一个兄弟
       6. 5
          1. $( ).next()
             1. 下一个兄弟
       7. 6
          1. $( ).prevAll()
             1. 之前所有兄弟
       8. 7
          1. $( ).nextAll()
             1. 之后所有兄弟
       9. 8
          1. $( ).siblings()
             1. 上下所有的兄弟
       10. 9
           1. $( ).parent()
              1. 直接父级
       11. 10
           1. $( ).parents()
              1. 所有父级
              2. 最后两个一定是body和html
       12. 11
           1. $( ).find(条件)
              1. 找寻子级中符合条件的标签
       13. 12
           1. $( ).end( )
              1. 返回链式编程的上一个操作对象
              2. 与parent()的区别
              3. parent()
              4. 是当前操作标签的父级标签
              5. end()
              6. 是返回链式编程中,当前操作标签的上一个操作的标签
    4. jQuery的属性操作
       1. 注意,属性操作不是样式操作
       2. 关键词
          1. prop
             1. 最新版本的jQuery已经弃用,不推荐使用
          2. attr
             1. 推荐使用的关键词
       3. 获取指定属性的属性值
          1. $( ).attr('属性')
       4. 设定指定属性的属性值
          1. $( ).attr('属性' , 属性值)
          2. 可以设定自定义属性以及属性值
       5. 删除指定属性
          1. $( ).removeAttr('属性')
    5. jQuery的class类名操作
       1. 注意,这里是进行的class的类名操作,不是进行样式操作
       2. 1
          1. 新增class类名属性值
             1. $( ).addClass('类名')
             2. 新增类名,是在原有类名的继承上,新增的类名
       3. 2
          1. 删除class类名属性值
             1. $( ).removeClass('类名')
       4. 3
          1. 判断是否有这个类名
             1. $( ).has('类名')
             2. 返回值是布尔类型
             3. 不可以继续链式编程
       5. 4
          1. 切换类名
             1. $( )toggleClass('类名')
             2. 如果有这个类名就做删除类名操作,如果没有这个类名就做添加类名炒作
       6. 特别注意
          1. 如果jQuery的操作,是获取或者设定操作,那么可以继续执行链式编程
          2. 如果jQuery的操作,是返回值操作,那么不可以继续执行链式编程
    6. jQuery的内容操作
       1. $( ).html()
          1. 全覆盖操作
          2. 可以解析标签
          3. 没有参数
             1. 获取标签对象的内容
          4. 设定参数
             1. 设定标签对象的内容
       2. $( ).text()
          1. 全覆盖操作
          2. 不能解析标签
          3. 没有参数
             1. 获取标签对象的内容
          4. 设定参数
             1. 设定标签对象的内容
       3. $( ).val()
          1. 全覆盖操作
          2. 没有参数
             1. 获取标签对象的数据
          3. 设定参数
             1. 设定标签对象的数据
          4. 注意
             1. select>option
             2. 获取数据时,是从select标签对象获取
             3. 设定数据时,要设定在option标签上
             4. input>file
             5. 只能获取数据,不能设定数据
    7. jQuery的css样式操作
       1. 1
          1. $( ).css(属性)
             1. 获取标签对象的指定css样式属性的属性值
       2. 2
          1. $( ).css(属性 , 属性值)
             1. 设定标签对象的指定css样式属性的属性值
             2. 单一属性属性值的设定
       3. 3
          1. $( ).css({ 属性:属性值 , 属性:属性值 })
             1. 设定标签对象的指定css样式属性的属性值
             2. 参数只有一个,为对象语法形式
             3. 批量设定属性属性值
    8. jQuery的事件
       1. on()语法绑定
          1. 语法1
             1. $( ).on(事件类型 , 事件处理函数)
          2. 语法2
             1. $( ).on(事件类型 , 标签名称 , 事件处理函数)
             2. 执行事件委托效果,只有点击对象与设定的标签名称相同时,才会触发效事件,执行事件处理函数
          3. 语法3
             1. $( ).on(事件类型 , {属性:属性值} , 事件处理函数)
             2. 对象类型的参数,作用是给事件对象e中存储参数
             3. 参数存储在 e.data 中
          4. 语法4
             1. $( ).on(事件类型 , 标签名称 , {属性:属性值} , 事件处理函数)
             2. 事件委托和传参同时设定
       2. 简写语法绑定
          1. $( ).事件类型(事件处理函数)
          2. jQuery中标签对象支持的事件类型,一般都可以写成简写语法形式
          3. 一般JavaScript中支持的事件类型,也都可以使用简写语法形式
       3. 特殊事件绑定
          1. $( ).hover(参数1,参数2)
          2. 参数1
             1. 函数或者传参函数
             2. 鼠标移入标签对象时触发
          3. 参数2
             1. 函数或者传参函数
             2. 鼠标移出标签对象时触发
          4. 鼠标只有经过当前绑定事件的标签对象的编辑线时,才会触发事件,经过子级标签时,不会触发函数
       4. 事件的删除
          1. $( ).off(事件类型 , 事件处理函数)
       5. 事件的发布
          1. 直接执行已经给标签对象绑定的事件处理函数
          2. $('div').on('click' , function(){ console.log('我是绑定的内容') }); $('div').trigger('click');
       6. one()方法绑定事件
          1. 绑定的事件处理函数,只会执行一次
          2. $( ).one(事件类型 , 事件处理函数)
       7. 阻止事件传播,阻止冒泡
          1. event.stopPropagation()
       8. 阻止默认事件执行
          1. event.preventDefault()
       9. return false
          1. 阻止所有
    9. jQuery的元素操作
       1. 新增元素
          1. $('设定的标签')
          2. 可以设定标签的名称,属性,内容,id,class,style等等
       2. 写入元素
          1. 父级元素结束位置,新增标签
             1. 父级元素.append(子级元素)
             2. 子级元素.appendTo(父级元素)
          2. 父级元素起始位置,新增标签
             1. 父级元素.prepend(子级元素)
             2. 子级元素.prependTo(父级元素)
          3. 已有元素之后,新增标签
             1. 已有元素.after(新增元素)
             2. 新增元素.insertAfter(已有元素)
          4. 已有元素之前,新增标签
             1. 已有元素.before(新增元素)
             2. 新增元素.insertBefore(已有元素)
       3. 修改元素
          1. 把旧元素.replaceWith(替换的新元素)
          2. 新元素.replaceAll(旧元素)
       4. 删除元素
          1. 删除标签对象的内容
             1. $( ).empty()
          2. 删除标签对象自己本身
             1. $( ).remove()
       5. 克隆元素
          1. 语法1
             1. $( ).clone()
             2. 只可能标签以及标签的所有内容,不克隆标签本身的
          2. 语法2
             1. $( ).clone(参数1)
             2. 是否克隆元素身上的事件
             3. 默认值是 false 不克隆事件
             4. 默认会也克隆子级元素身上的事件
          3. 语法3
             1. $( ).clone(参数1 , 参数2)
             2. 是否克隆子级元素身上的事件
             3. 默认值是 true 克隆子级事件
    10. jQuery的元素占位
        1. 1, $( ).height() $( ).width()
           1. 获取 内容
           2. 参数如果是数值,就是设定属性值
        2. 2, $( ).innerHeight() $( ).innerWidth()
           1. 获取 内容 +padding
           2. 参数如果是数值,就是设定属性值
        3. 3, $( ).outerHeight() $( ).outerWidth()
           1. 获取 内容 + padding + border
           2. 参数如果是数值,就是设定属性值
        4. 4, $( ).outerHeight(true) $( ).outerWidth(true)
           1. 获取 内容 + padding + border + margin
        5. 总结
           1. 如果设定好了 属性 ,获取到的属性值会保持不变,有没有box-sizing: border-box;不影响结果
           2. 普通盒模型
              1. 占位 = 内容 + padding + border + margin
              2. width,height,设定的是 内容
           3. 怪异盒模型
              1. 占位 = 内容 + padding + border + margin
              2. width,height,设定的是 内容 + padding + border
           4. 不同盒模型属性,如果只定定义了width和height,获取数据结果是不同的
    11. jQuery的元素位置
        1. 1,获取css属性值
           1. 通过 $( ).css(属性) 方式,获取属性值
           2. 获取的结果都有 px 单位
           3. 如果是有定位属性,没有设定数值,获取结果是 0px
           4. 如果没有设定定位属性,获取结果是 auto
        2. 2, $( ).offset()
           1. 标签和文档的距离
              1. 如果没有滚动,也是和视窗窗口的距离
           2. 获取结果是一个对象,有两个单元 left 和 top
           3. 可以设定数据,也是定义为对象的形式
           4. 如果css定义的样式,和设定的样式,数据有差距,通过定位来调整,margin值不变
        3. 3, $( ).position()
           1. 获取标签和父级元素之间的间距
           2. 只获取的是定位的属性,不计算margin
           3. 只能获取,不能设定
           4. 获取结果是一个对象,两个单元 left 和 top
    12. jQuery的动画
        1. 1
           1. $( ).show()
              1. 让元素动画显示
              2. 参数1
              3. 时间 单位是毫秒
              4. 参数2
              5. 可选参数 运动方式 linear
              6. 参数3
              7. 可选参数 运动结束时执行的函数,回调函数
        2. 2
           1. $( ).hide()
              1. 让元素动画隐藏
              2. 参数1
              3. 时间 单位是毫秒
              4. 参数2
              5. 可选参数 运动方式 linear
              6. 参数3
              7. 可选参数 运动结束时执行的函数,回调函数
        3. 3
           1. $( ).toggle()
              1. 切换元素隐藏显示
              2. 显示的时候隐藏,隐藏的时候显示
              3. 参数1
              4. 时间 单位是毫秒
              5. 参数2
              6. 可选参数 运动方式 linear
              7. 参数3
              8. 可选参数 运动结束时执行的函数,回调函数
        4. 4
           1. $( ).slideDown()
              1. 让元素下拉显示
              2. 参数1
              3. 时间 单位是毫秒
              4. 参数2
              5. 可选参数 运动方式 linear
              6. 参数3
              7. 可选参数 运动结束时执行的函数,回调函数
        5. 5
           1. $( ).slideUp()
              1. 让元素上卷隐藏
              2. 参数1
              3. 时间 单位是毫秒
              4. 参数2
              5. 可选参数 运动方式 linear
              6. 参数3
              7. 可选参数 运动结束时执行的函数,回调函数
        6. 6
           1. $( ).slideToggle()
              1. 让元素上下切换
              2. 参数1
              3. 时间 单位是毫秒
              4. 参数2
              5. 可选参数 运动方式 linear
              6. 参数3
              7. 可选参数 运动结束时执行的函数,回调函数
        7. 7
           1. $( ).fadeIn()
              1. 让元素逐渐显示
              2. 参数1
              3. 时间 单位是毫秒
              4. 参数2
              5. 可选参数 运动方式 linear
              6. 参数3
              7. 可选参数 运动结束时执行的函数,回调函数
        8. 8
           1. $( ).fadeOut()
              1. 让元素逐渐消失
              2. 参数1
              3. 时间 单位是毫秒
              4. 参数2
              5. 可选参数 运动方式 linear
              6. 参数3
              7. 可选参数 运动结束时执行的函数,回调函数
        9. 9
           1. $( ).fadeToggle()
              1. 让元素渐隐渐现
              2. 参数1
              3. 时间 单位是毫秒
              4. 参数2
              5. 可选参数 运动方式 linear
              6. 参数3
              7. 可选参数 运动结束时执行的函数,回调函数
        10. 10
            1. $( ).fadeTo()
               1. 渐渐变化到指定的透明度
               2. 参数1
               3. 时间 单位是毫秒
               4. 参数2
               5. 指定的透明度
               6. 参数3
               7. 可选参数 运动方式 linear
               8. 参数4
               9. 可选参数 运动结束时执行的函数,回调函数
        11. 点击过快
            1. 当前动画没有结束,又触发了下一次动画
            2. 默认
               1. 执行完当前动画之后,再依次执行最后触发的动画
            3. $( ).stop().动画
               1. 当前动画立即停止,也就是不再执行之后的动画,从当前停止的位置开始,立即执行下一个动画效果
            4. $( ).finish().动画
               1. 当前动画立即结束,也就是立即执行到当前动画的终止位置,从当前动画的终止位置开始,执行下一个动画效果
    13. jQuery的自定义动画
        1. $( ).animate()
           1. 参数1
              1. 运动的属性 , 数据类型必须是对象类型
           2. 参数2
              1. 时间,单位毫秒
           3. 参数3
              1. 运动方式
           4. 参数4
              1. 回调函数,运动结束后执行的程序
        2. 注意
           1. 1,属性值,有没有px都可以,但是规范最好都统一
           2. 2,动画都是同时结束的
           3. 3,极个别浏览器版本支持颜色的改变,但是最好不用jQuery的动画实现颜色改变
           4. 4,动画效果不支持 display , 要使用透明度
    14. jQuery的隐式迭代
        1. jQuery中默认对获取的标签对象数组中的所有内容都执行操作
        2. $('ul>li').addClass('active');
           1. 给所有的li标签,都添加上class类名
        3. jQuery的tab切换/选项卡
           1. $('ul>li').click(function(){ $(this) // this是js的语法,添加$()包裹,才能用jq方法操作 .addClass('active') // 给当前点击标签添加class类名 .siblings().removeClass('active') // 点击li的所有兄弟 .parent() // 找到的是ul .next() // 找到的是ol .find('li') // 找到ol中的所有li .removeClass('active') .eq($(this).index()) // 找到与点击标签索引相同的ol中的li标签 .addClass('active') // 添加class类名 })
    15. jQuery的请求方式
        1. get方式
           1. $.get()
           2. 参数1:传参地址
           3. 参数2:传参的参数,可以是键值对的字符串,也可以是对象
           4. 参数3:传参成功,执行的程序
           5. 参数4:期望的返回值数据类型
        2. post方式
           1. $.post()
           2. 参数1:传参地址
           3. 参数2:传参的参数,可以是键值对的字符串,也可以是对象
           4. 参数3:传参成功,执行的程序
           5. 参数4:期望的返回值数据类型
        3. ajax方式
           1. 参数只能有一个,必须是对象形式
           2. url : 请求地址
           3. data : 请求参数 可以是键值对字符串或者对象
           4. type : 请求方式 get / post 默认是get方式
           5. dataType : 期望的返回值类型 json --- 将响应体按照json格式转化
           6. success : 请求成功之后,执行的函数
           7. async : true 是否异步
           8. error : 请求失败时执行的函数
           9. timeout : 设定请求超时的时间,超过设定的时间,就认为是请求失败 单位是毫秒
           10. cache : true 浏览器是否缓存
           11. context : 执行请求成功或者失败的回调函数时,this的执行设定
    16. jQuery的全局函数
        1. $.(window).ajaxStart(function(){})
           1. 请求开始时触发,只会触发一次
        2. $(window).ajaxSend(function(){})
           1. ajax请求,执行send()时触发
           2. 有一个发送请求就会触发一次
        3. $(window).ajaxSuccess(function(){})
           1. ajax请求,成功时触发
           2. 有一个请求成功就会触发一次
        4. $(window).ajaxError(function(){})
           1. ajax请求,失败时触发
           2. 有一个请求失败就会触发一次
        5. $(window).ajaxComplete(function(){})
           1. ajax请求,完成时触发
           2. 有一个请求完成就会触发一次
        6. $(window).ajaxStop(function(){})
           1. ajax请求,结束时触发
           2. 所有请求结束的时候,会触发一次
    17. jQuery的扩展方法
        1. 可以向jQuery中,添加自定义方法
        2. 语法1
           1. jQuery.extend()是添加自定义方法的关键词
           2. 参数是对象的形式,对象的属性是自定义函数的名称,对象的属性值是自定义函数的程序
           3. jQuery.extend({ 自定义函数名1:function(){自定义函数程序}, 自定义函数名2:function(){自定义函数程序}, })
        3. 语法2
           1. jQuery.fn.extend()是添加自定义方法的关键词
           2. jQuery.fn.extend({ 自定义函数名1:function(){ return 相关操作 }, 自定义函数名2:function(){ return 相关操作 }, }
    18. jQuery的其他操作方法
        1. $( ).index()
           1. 获取标签对象,在伪数组中的的索引值
        2. $( ).each(function(参数1,参数2){})
           1. 循环遍历
           2. 参数1
              1. 索引值
           3. 参数2
              1. 标签对象
              2. 标签对象是JavaScript的语法格式,要想使用jQuery语法,必须加$( )
46. 特别内容--浏览器兼容处理
    1. 1,浏览器卷去的高度
       1. var height = document.documentElement.scrollTop || document.body.scrollTop;
    2. 2,获取非行内样式属性
       1. if(window.getComputedStyle){ // 这个方法是可以使用的 console.log(window.getComputedStyle(oDiv).width); }else{ // 兼容IE的方法 console.log(oDiv.currentStyle.width); }
       2. 实际效果是获取标签执行的样式属性值
    3. 3,获取事件对象
       1. 标签对象.事件类型 = function(e){ e = e || window.event }
    4. 4,事件的监听/事件的注册
       1. function myAddEvent( ele , type , fun){ // 判断 addEventListener这个方法是否存在 if(ele.addEventListener){ ele.addEventListener(type , fun); }else{ ele.attachEvent('on'+type , fun); } }
    5. 5,阻止事件的传播
       1. function stopBubble(e){ if(e.stopPropagation){ e.stopPropagation(); }else{ e.cancelBubble = true; } }
    6. 6,阻止默认事件的执行
       1. if (e.preventDefault) { e.preventDefault(); } else { e.returnValue = false; }
    7. 7,建立ajax对象
       1. let xhr = {}; if(XMLHttpRequest){ xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject('Microsoft.XMLHTTP'); }
    8. 8,获取ajax响应体
       1. 标准浏览器
          1. xhr.onload = function(){}
       2. 兼容浏览器
          1. xhr.onreadystatechange = function(){}