Tomcatcn

2021-01-12

js

js基础

ECMAScript

ECMAScript 是由ECMA 国际（原欧洲计算机制造商协会）进行标准化的一门编程语言，这种语言在万维网上应用广
泛，它往往被称为 JavaScript 或 JScript，但实际上后两者是 ECMAScript 语言的实现和扩展。
ECMAScript：ECMAScript 规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准。
更多参看MDN: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/JavaScript_technologies_overview
js书写位置
- 1. 行内式 JS
    
     可以将单行或少量 JS 代码写在HTML标签的事件属性中（以 on 开头的属性），如：onclick
     注意单双引号的使用：在HTML中我们推荐使用双引号, JS 中我们推荐使用单引号
     可读性差，在html中编写JS大量代码时，不方便阅读；
     引号易错，引号多层嵌套匹配时，非常容易弄混；
     特殊情况下使用
- 1. 内嵌 JS

 可以将多行JS代码写到

 利于HTML页面代码结构化，把大段 JS代码独立到 HTML 页面之外，既美观，也方便文件级别的复用
 引用外部 JS文件的 script 标签中间不可以写代码
 适合于JS 代码量比较大的情况

变量
- var age = 18;
  age = 81; // 最后的结果就是81因为18 被覆盖掉了
- 同时声明多个变量时，只需要写一个 var，多个变量名之间使用英文逗号隔开。
  var age = 10, name = ‘zs’, sex = 2;
- 变量名规范
  -  由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成，如：usrAge, num01, _name
     严格区分大小写。var app; 和 var App; 是两个变量
     不能以数字开头。 18age 是错误的
     不能是关键字、保留字。例如：var、for、while
     变量名必须有意义。 MMD BBD nl → age
     遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。 myFirstName
     推荐翻译网站：有道爱词霸
- 变量类型
  - JavaScript 拥有动态类型，同时也意味着相同的变量可用作不同的类型：
    var x = 6; // x 为数字
    var x = “Bill”; // x 为字符串
    - 不使用var声明变量的时候，变量是全局对象（window对象）属性，在全局中使用var声明变量是全局变量,windows属性可以删除，变量不可删除
  - 简单数据类型（Number,String,Boolean,Undefined,Null）
    - 简单类型又叫做基本数据类型或者值类型，复杂类型又叫做引用类型。  值类型：简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此叫做值类型
      string ，number，boolean，undefined，null
    - Number
      - JavaScript 数字类型既可以用来保存整数值，也可以保存小数(浮点数）。
        var age = 21; // 整数
        var Age = 21.3747; // 小数
      - // 1.八进制数字序列范围：0~7
        var num1 = 07; // 对应十进制的7
        var num2 = 019; // 对应十进制的19
        var num3 = 08; // 对应十进制的8
        // 2.十六进制数字序列范围：0_9以及AF
        var num = 0xA;
        
        现阶段我们只需要记住，在JS中八进制前面加0，十六进制前面加 0x
      - JavaScript中数值的最大和最小值
        alert(Number.MAX_VALUE); // 1.7976931348623157e+308
        alert(Number.MIN_VALUE); // 5e-324
      - 数字型三个特殊值
        alert(Infinity); // Infinity
        alert(-Infinity); // -Infinity
        alert(NaN); // NaN
         Infinity ，代表无穷大，大于任何数值
         -Infinity ，代表无穷小，小于任何数值
         NaN ，Not a number，代表一个非数值
      - isNaN()
        用来判断一个变量是否为非数字的类型，返回 true 或者 false
    - string
      - 字符串型可以是引号中的任意文本，其语法为双引号 “” 和单引号’’
        var strMsg = “我爱北京天安门~”; // 使用双引号表示字符串
        var strMsg2 = ‘我爱吃猪蹄~’; // 使用单引号表示字符串
        // 常见错误
        var strMsg3 = 我爱大肘子; // 报错，没使用引号，会被认为是js代码，但js没有这些语法
      - HTML 标签里面的属性使用的是双引号，JS 这里我们更推荐使用单引号。
      - 类似HTML里面的特殊字符，字符串中也有特殊字符，我们称之为转义符。
        转义符都是 \ 开头的，常用的转义符及其说明如下：
      - 字符串长度
        
        var strMsg = “我是帅气多金的程序猿！”;
        alert(strMsg.length); // 显示 11
      - 字符串拼接
        
         多个字符串之间可以使用 + 进行拼接，其拼接方式为字符串 + 任何类型 = 拼接之后的新字符串
         拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串
      - 字符串索引下标
    - 布尔型 Boolean
      - console.log(true + 1); // 2
        console.log(false + 1); // 1
    - Undefined 和 Null
      - var variable;
        console.log(variable); // undefined
        console.log(‘你好’ + variable); // 你好undefined
        console.log(11 + variable); // NaN
        console.log(true + variable); // NaN
      - var vari = null;
        console.log(‘你好’ + vari); // 你好null
        console.log(11 + vari); // 11
        console.log(true + vari); // 1
  - 复杂数据类型（object)
    
     引用类型：复杂数据类型，在存储时变量中存储的仅仅是地址（引用），因此叫做引用数据类型
    通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等
    - 数组
      - var 数组名 = new Array() ；
        var arr = new Array(); // 创建一个新的空数组
      - //1. 使用数组字面量方式创建空的数组
        var 数组名 = []；
        //2. 使用数组字面量方式创建带初始值的数组
        var 数组名 = [‘小白’,‘小黑’,‘大黄’,‘瑞奇’];
        
         数组的字面量是方括号 [ ]
         声明数组并赋值称为数组的初始化
         这种字面量方式也是我们以后最多使用的方式
      - 数组中可以存放任意类型的数据，例如字符串，数字，布尔值等。
        var arrStus = [‘小白’,12,true,28.9];
      - 数组的索引
        
        // 定义数组
        var arrStus = [1,2,3];
        // 获取数组中的第2个元素
        alert(arrStus[1]);
      - 数组的长度
        
        数组名.length
      - 数组中新增元素
        
        通过修改 length 长度新增数组元素
        
        var arr = [‘red’, ‘green’, ‘blue’, ‘pink’];
        arr.length = 7;
        console.log(arr);
        console.log(arr[4]);
        console.log(arr[5]);
        console.log(arr[6]);
        
        通过修改数组索引新增数组元素
        
        var arr = [‘red’, ‘green’, ‘blue’, ‘pink’];
        arr[4] = ‘hotpink’;
        console.log(arr);
  - typeof 可用来获取检测变量的数据类型
    var num = 18;
    console.log(typeof num) // 结果 number
    - null 类型是object
    - 字面量
      字面量是在源代码中一个固定值的表示法，通俗来说，就是字面量表示如何表达这个值。  数字字面量：8, 9, 10
       字符串字面量：‘黑马程序员’, “大前端”  布尔字面量：true，false
  - 数据类型转换
    - toString()
      - var a = 1 ; a.toString()
    - String
      - 强制转换String(a)
    - 三种转换方式，我们更喜欢用第三种加号拼接字符串转换方式，这一种方式也称之为隐式转换。
    - 数字转换
      - 浮点数也是属于number类型
    - 转换为布尔型
      -  代表空、否定的值会被转换为 false ，如 ‘’、0、NaN、null、undefined
         其余值都会被转换为 true
        console.log(Boolean(’’)); // false
        console.log(Boolean(0)); // false
        console.log(Boolean(NaN)); // false
        console.log(Boolean(null)); // false
        console.log(Boolean(undefined)); // false
        console.log(Boolean(‘小白’)); // true
        console.log(Boolean(12)); // true
运算符
- 表达式
  - 表达式：是由数字、运算符、变量等以能求得数值的有意义排列方法所得的组合
    简单理解：是由数字、运算符、变量等组成的式子
    表达式最终都会有一个结果，返回给我们，我们成为返回值
- 算数运算符
  - % 返回除法的余数 9%2=1
  - 浮点数值的最高精度是 17 位小数，但在进行算术计算时其精确度远远不如整数。
    var result = 0.1 + 0.2; // 结果不是 0.3，而是：0.30000000000000004
    console.log(0.07 * 100); // 结果不是 7，而是：7.000000000000001
  - 所以：不要直接判断两个浮点数是否相等 !
- 递增和递减运算符
  - 如果需要反复给数字变量添加或减去1，可以使用递增（++）和递减（ – ）运算符来完成。
  - 递增和递减运算符必须和变量配合使用。
  - 前置递增运算符
    - 使用口诀：先自加，后运算
      var num = 10;
      alert(++num + 10); // 21
  - 后置递增运算符
    - 使用口诀：先运算，后自加
      var num = 10;
      alert(10 + num++); // 20
  - 开发时，大多使用后置递增/减，并且代码独占一行，例如：num++; 或者 num–;
- 比较运算符
  - 等于 ==
    - 只要值相等
    - console.log(18 == ‘18’);
  - 全等
    - 要两边数据类型和值相等
    - console.log(18 === ‘18’);
- 逻辑运算符
  - 概念：逻辑运算符是用来进行布尔值运算的运算符，其返回值也是布尔值。后面开发中经常用于多个条件的判断
  - && 等于 and
    - 两边都是 true才返回 true，否则返回 false
  - || 等于 or
    - 只要有一边true返回ture
  - ! 等于 not
    - 对条件取反
  - 短路运算（逻辑中断）
    - 短路运算的原理：当有多个表达式（值）时,左边的表达式值可以确定结果时,就不再继续运算右边的表达式的值;
    - 逻辑与  语法：表达式1 && 表达式2  如果第一个表达式的值为真，则返回表达式2  如果第一个表达式的值为假，则返回表达式1
      console.log( 123 && 456 ); // 456
      console.log( 0 && 456 ); // 0
      console.log( 123 && 456&& 789 ); // 789
  - 逻辑中断（短路操作）
    - 逻辑或  语法：表达式1 || 表达式2  如果第一个表达式的值为真，则返回表达式1  如果第一个表达式的值为假，则返回表达式2
      console.log( 123 || 456 ); // 123
      console.log( 0 || 456 ); // 456
      console.log( 123 || 456 || 789 ); // 123
- 赋值运算符
  - var age = 10;
    age += 5; // 相当于 age = age + 5;
    age -= 5; // 相当于 age = age - 5;
    age *= 10; // 相当于 age = age * 10;
- 运算符优先级
  -  一元运算符里面的逻辑非优先级很高
     逻辑与比逻辑或优先级高
流程控制
- 顺序结构
  - 代码的先后顺序，依次执行
- 分支结构
  - if 语句
    - 1. 语法结构
        // 条件成立执行代码，否则什么也不做
        if (条件表达式) {
        // 条件成立执行的代码语句
        }
  - if else语句（双分支语句）
    - 1. 语法结构
        // 条件成立执行 if 里面代码，否则执行else 里面的代码
        if (条件表达式) {
        // [如果] 条件成立执行的代码
        } else {
        // [否则] 执行的代码
        }
  - if else if 语句(多分支语句)
    - // 适合于检查多重条件。
      if (条件表达式1) {
      语句1；
      } else if (条件表达式2) {
      语句2；
      } else if (条件表达式3) {
      语句3；
      …
      } else {
      // 上述条件都不成立执行此处代码
      }
  - 三元表达式
    - 1. 语法结构
        表达式1 ? 表达式2 : 表达式3;
      - 表达式1为真，返回表达式2，为假返回表达式3
    - 简单理解：就类似于 if else （双分支）的简写
  - 分支流程控制 switch 语句
    - switch( 表达式 ){
      case value1:
      // 表达式等于 value1 时要执行的代码
      break;
      case value2:
      // 表达式等于 value2 时要执行的代码
      break;
      default:
      // 表达式不等于任何一个 value 时要执行的代码
      }
    - 没有break会执行从匹配的case开始的代码
    - switch 表达式的值会与结构中的 case 的值做比较
    - 在匹配全等(===)
    - 与if lese if 优势，switch 用于比较确定值，比如一个变量的值，if用于范围
    - switch 条件判断成功后，就直接去执行，而if有几次条件就会判断几次
    - switch使用分支较多，if else 适用分支少的时候
- 循环结构
  - for 循环
    - 1 语法结构
      for 循环主要用于把某些代码循环若干次，通常跟计数有关系。其语法结构如下：
      for(初始化变量; 条件表达式; 操作表达式 ){
      //循环体
      }
  - while循环
    - while (条件表达式) {
      // 循环体代码
      }
    - 可以判断条件复杂的表达式
  - do while 循环
    - do {
      // 循环体代码 - 条件表达式为 true 时重复执行循环体代码
      } while(条件表达式);
    - 现执行一次，再判断是否执行
    - 会少执行一次循环体
  - continue 关键字用于立即跳出本次循环，继续下一次循环
  - break 关键字用于立即跳出整个循环（循环结束）
函数
- 函数：就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。
- 函数声明
  - 自定义函数
    - 声明函数
      // 声明函数
      function 函数名() {
      //函数体代码
      }
    - function 是声明函数的关键字,必须小写
    - 由于函数一般是为了实现某个功能才定义的，所以通常我们将函数名命名为动词，比如 getSum
  - 匿名函数
    - // 这是函数表达式写法，匿名函数后面跟分号结束
      var fn = function(){…}；
      // 调用的方式，函数调用必须写到函数体下面
      fn()
    -  因为函数没有名字，所以也被称为匿名函数
    -  这个fn 里面存储的是一个函数
    -  函数表达式方式原理跟声明变量方式是一致的
    -  函数调用的代码必须写到函数体后面
- 函数调用
  - // 调用函数
    函数名(); // 通过调用函数名来执行函数体代码
- 函数封装
  - 函数的封装是把一个或者多个功能通过函数的方式封装起来，对外只提供一个简单的函数接口
- 函数的参数
  - 在声明函数时，可以在函数名称后面的小括号中添加一些参数，这些参数被称为形参
    - function 函数名(形参1, 形参2 , 形参3…) { // 可以定义任意多的参数，用逗号分隔
      // 函数体
      }
  - 同样也需要传递相应的参数，这些参数被称为实参。
  - 函数形参和实参个数不匹配问题
    - function sum(num1, num2) {
      console.log(num1 + num2);
      }
      sum(100, 200); // 形参和实参个数相等，输出正确结果

sum(200); // 实参个数少于形参，多的形参定义为undefined，结果为NaN
- sum(100, 400, 500, 700); // 实参个数多于形参，只取到形参的个数

	- 函数的返回值

		- // 声明函数

function 函数名（）{
…
return 需要返回的值；
}
// 调用函数
函数名(); // 此时调用函数就可以得到函数体内return 后面的值
-  在使用 return 语句时，函数会停止执行，并返回指定的值
 如果函数没有 return ，返回的值是 undefined
- return 只能返回一个值。如果用逗号隔开多个值，以最后一个为准。

	- arguments的使用

		- 当我们不确定有多少个参数传递的时候，可以用 arguments 来获取
		- 所有函数都内置了一个 arguments 对象，arguments 对象中存储了传递的所有实参
		- arguments展示形式是一个伪数组，因此可以进行遍历。伪数组具有以下特点：

 具有 length 属性
 按索引方式储存数据
 不具有数组的 push , pop 等方法
- function maxValue() {
var max = arguments[0];
for (var i = 0; i < arguments.length; i++) {
if (max < arguments[i]) {
max = arguments[i];
}
}
return max;
}
console.log(maxValue(2, 4, 5, 9));
console.log(maxValue(12, 4, 9));

	- 函数可以调用另外一个函数
	- 支持函数式编程

- 立即执行函数

	- (function() {})() 或者 (function(){}())
	- 主要作用： 创建一个独立的作用域。 避免了命名冲突问题

- 动画函数

	- 核心原理：通过定时器 setInterval() 不断移动盒子位置。
	- 实现步骤：

获得盒子当前位置
让盒子在当前位置加上1个移动距离
利用定时器不断重复这个操作
加一个结束定时器的条件
注意此元素需要添加定位，才能使用element.style.left
- 移动盒子前提，盒子是可以使用top和left属性，也就是绝对定位和固定定位
  - 动画函数简单封装
    注意函数需要传递2个参数，动画对象和移动到的距离。
  - 动画函数给不同元素记录不同定时器
    如果多个元素都使用这个动画函数，每次都要var 声明定时器。我们可以给不同的元素使用不同的定时器（自
    己专门用自己的定时器）。
    核心原理：利用 JS 是一门动态语言，可以很方便的给当前对象添加属性。
  - 缓动效果原理
    - 步骤
      - 缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢停下来
      - 思路：
      - 让盒子每次移动的距离慢慢变小，速度就会慢慢落下来。
      - 核心算法： (目标值 - 现在的位置 ) / 10 做为每次移动的距离步长
      - 停止的条件是：让当前盒子位置等于目标位置就停止定时器
      - 注意步长值需要取整
    - 动画函数多个目标值之间移动
      - 可以让动画函数从 800 移动到 500。
        当我们点击按钮时候，判断步长是正值还是负值
如果是正值，则步长往大了取整
如果是负值，则步长向小了取整
- 无缝滚动
  - ③ 图片无缝滚动原理
    ④ 把ul 第一个li 复制一份，放到ul 的最后面
    ⑤ 当图片滚动到克隆的最后一张图片时，让ul 快速的、不做动画的跳到最左侧： left 为0 ⑥ 同时num 赋值为0，可以从新开始滚动图片了
  - 节流阀
    - 子主题 1
      - 防止轮播图按钮连续点击造成播放过快。
      - 节流阀目的：当上一个函数动画内容执行完毕，再去执行下一个函数动画，让事件无法连续触发。
      - 核心实现思路：利用回调函数，添加一个变量来控制，锁住函数和解锁函数。
      - 开始设置一个变量 var flag = true;
      - If(flag) {flag = false; do something} 关闭水龙头
      - 利用回调函数动画执行完毕， flag = true 打开水龙头

作用域
- 一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这
  个名字的作用域。作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。
- JavaScript（es6前）中的作用域有两种：
  - 块作用域由 { } 包括。
  - 全局作用域
    - 作用于所有代码执行的环境(整个 script 标签内部)或者一个独立的 js 文件。
    - 在函数外部定义的变量，全局变量，任何地方都可调用
    - 特殊情况下，在函数内不使用 var 声明的变量也是全局变量（不建议使用）
    - 全局变量：在任何一个地方都可以使用，只有在浏览器关闭时才会被销毁，因此比较占内存
  - 局部作用域
    - 作用于函数内的代码环境，就是局部作用域。因为跟函数有关系，所以也称为函数作用域。
    - 在函数内部定义的变量，局部变量，只能函数内部使用
    - 函数的形参实际上就是局部变量
    - 只在函数内部使用，当其所在的代码块被执行时，会被初始化；当代码块运行结束后，就会被
      销毁，因此更节省内存空间
- JS 没有块级作用域（es6之前）
  - 在其他编程语言中（如 java、c#等），在 if 语句、循环语句中创建的变量，仅仅只能在本 if 语句、本循
    环语句中使用
  - Js中没有块级作用域（在ES6之前）。
  - if(true){
    var num = 123;
    console.log(123); //123
    }
    console.log(123); //123
- 作用域链
  -  只要是代码，就至少有一个作用域
  - 如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域
  - 根据在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问，就称作作用域链
  - function f1() {
    var num = 123;
    function f2() {
    console.log( num );
    }
    f2();
    }
    var num = 456;
    f1();
  - 采取就近原则的方式来查找变量最终的值。
预解析
- 在当前作用域下, JS 代码执行之前，浏览器会默认把带有 var 和 function 声明的变量在内存中进行提前声明或者定义
- 学习预解析能够让我们知道为什么在变量声明之前
  访问变量的值是 undefined，为什么在函数声明之前就可以调用函数。
- 变量预解析（变量提升）
  - 变量的声明会被提升到当前作用域的最上面，变量的赋值不会提升。
    - console.log(num); // 结果是多少？
      var num = 10; // ？
- 函数预解析（函数提升）
  - 函数的声明会被提升到当前作用域的最上面，但是不会调用函数。
对象Object
- 无序的
- 在 JavaScript 中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。
- 对象是由属性和方法组成的。
  -  属性：事物的特征，在对象中用属性来表示（常用名词）
     方法：事物的行为，在对象中用方法来表示（常用动词）
- 分类
  - 自定义对象
  - 内置对象
    - Math对象
      - Math 对象不是构造函数，它具有数学常数和函数的属性和方法
      - Math.PI // 圆周率
        Math.floor() // 向下取整
        Math.ceil() // 向上取整
        Math.round() // 四舍五入版就近取整注意 -3.5 结果是 -3
        Math.abs() // 绝对值
        Math.max()/Math.min() // 求最大和最小值
      - 随机数方法 random()
        
        random() 方法可以随机返回一个小数，其取值范围是 [0，1)，左闭右开 0 <= x < 1
    - 日期对象
      -  Date 对象和 Math 对象不一样，他是一个构造函数，所以我们需要实例化后才能使用
         Date 实例用来处理日期和时间
      - 获取当前时间必须实例化
        var now = new Date();
        console.log(now);
      - Date() 构造函数的参数
        如果括号里面有时间，就返回参数里面的时间。例如日期格式字符串为‘2019-5-1’，可以写成new Date(‘2019-5-1’)
        或者 new Date(‘2019/5/1’)
      - 方法
      - 获取总毫秒数
        
        // 实例化Date对象
        var now = new Date();
        // 1. 用于获取对象的原始值
        console.log(date.valueOf())
        console.log(date.getTime())
        // 2. 简单写可以这么做
        var now = + new Date();
        // 3. HTML5中提供的方法，有兼容性问题
        var now = Date.now();
    - 数组对象
      -  instanceof 运算符，可以判断一个对象是否属于某种类型
         Array.isArray()用于判断一个对象是否为数组，isArray() 是 HTML5 中提供的方法
        
        var arr = [1, 23];
        var obj = {};
        console.log(arr instanceof Array); // true
        console.log(obj instanceof Array); // false
        console.log(Array.isArray(arr)); // true
        console.log(Array.isArray(obj)); // false
      - 添加删除数组元素的方法
      - 数组排序
        
        reverse
        
        无参数，倒序数组，返回新数据组
        
        sort
        
        var arr = [1, 64, 9, 6];
        arr.sort(function(a, b) {
        return b - a; // 降a序
        // return a - b; // 升序
        });
        console.log(arr);
      - 数组索引
        
        indexOf() 返回第一个符合的索引
        
        lastIndexOf() 返回最后一个符合的索引
      - 数组转字符串
      - 课下查询
    - 字符串对象
      - 基本包装类型
        为了方便操作基本数据类型，JavaScript 还提供了三个特殊的引用类型：String、Number和 Boolean。
        基本包装类型就是把简单数据类型包装成为复杂数据类型，这样基本数据类型就有了属性和方法。
      - // 下面代码有什么问题？
        var str = ‘andy’;
        console.log(str.length);
        
        按道理基本数据类型是没有属性和方法的，而对象才有属性和方法，因为 js 会把基本数据类型包装为复杂数据类型，其执行过程如下：
        // 1. 生成临时变量，把简单类型包装为复杂数据类型
        var temp = new String(‘andy’);
        // 2. 赋值给我们声明的字符变量
        str = temp;
        // 3. 销毁临时变量
        temp = null;
        
        js 会把基本数据类型包装为复杂数据类型
      - 字符串的不可变
        
        指的是里面的值不可变，虽然看上去可以改变内容，但其实是地址变了，内存中新开辟了一个内存空间。
        
        var str = ‘abc’;
        str = ‘hello’;
        // 当重新给 str 赋值的时候，常量’abc’不会被修改，依然在内存中
        // 重新给字符串赋值，会重新在内存中开辟空间，这个特点就是字符串的不可变
        // 由于字符串的不可变，在大量拼接字符串的时候会有效率问题
        var str = ‘’;
        for (var i = 0; i < 100000; i++) {
        str += i;
        }
        console.log(str); // 这个结果需要花费大量时间来显示，因为需要不断的开辟新的空间
      - 查找
        
        indexOf()
        
        lastIndexOf()
      - 根据位置返回字符串
      - 字符串方法
      - replace() 方法用于在字符串中用一些字符替换另一些字符。
        其使用格式如下：
        replace(被替换的字符串，要替换为的字符串)；
      - split()方法用于切分字符串，它可以将字符串切分为数组。在切分完毕之后，返回的是一个新数组。
        例如下面代码：
        var str = ‘a,b,c,d’;
        console.log(str.split(’,’)); // 返回的是一个数组 [a, b, c, d]
      -  toUpperCase() //转换大写
         toLowerCase() //转换小写
  - 浏览器对象
    - 浏览器对象属于我们JS 独有的，我们JS API 讲解
- 创建对象的三种方式
  - 利用字面量创建对象
    - { } 里面采取键值对的形式表示
       键：相当于属性名
       值：相当于属性值，可以是任意类型的值（数字类型、字符串类型、布尔类型，函数类型等）
    - var star = {
      name : ‘pink’,
      age : 18,
      sex : ‘男’,
      sayHi : function(){
      alert(‘大家好啊~’);
      }
      };
  - 利用 new Object 创建对象
    - 跟我们前面学的 new Array() 原理一致
    - var andy = new Obect();
      andy.name = ‘pink’;
      andy.age = 18;
      andy.sex = ‘男’;
      andy.sayHi = function(){
      alert(‘大家好啊~’);
      }
  - 利用构造函数创建对象
    - 构造函数：是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与 new 运算符一起使用。我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面
    - function Person(name, age, sex) {
      this.name = name;
      this.age = age;
      this.sex = sex;
      this.sayHi = function() {
      alert(‘我的名字叫：’ + this.name + ‘，年龄：’ + this.age + ‘，性别：’ + this.sex);
      } }
      var bigbai = new Person(‘大白’, 100, ‘男’);
      var smallbai = new Person(‘小白’, 21, ‘男’);
      console.log(bigbai.name);
      console.log(smallbai.name);
    - 注意
      - 构造函数约定首字母大写。
      - 函数内的属性和方法前面需要添加 this ，表示当前对象的属性和方法。
      - 构造函数中不需要 return 返回结果。
      - 当我们创建对象的时候，必须用 new 来调用构造函数。
    - new 在执行时会做四件事情：
      - 在内存中创建一个新的空对象。
      - 让 this 指向这个新的对象。
      - 执行构造函数里面的代码，给这个新对象添加属性和方法。
      - 返回这个新对象（所以构造函数里面不需要return）。
- 对象的调用
  - 对象里面的属性调用 : 对象.属性名 console.log(star.name) // 调用名字属性
  - 对象里面属性的另一种调用方式 : 对象[‘属性名’]，必须加引号 console.log(star[‘name’]) // 调用名字属性
  - 对象里面的方法调用：对象.方法名() ，注意这个方法名字后面一定加括号
- 遍历对象属性
  - 其语法如下：
    for (变量 in 对象名字) {
    // 在此执行代码
    }
    - for (var k in obj) {
      console.log(k); // 这里的 k 是属性名
      console.log(obj[k]); // 这里的 obj[k] 是属性值
      }

Web API

Web API 是浏览器提供的一套操作浏览器功能和页面元素的 API ( BOM 和 DOM )。

API 是为我们程序员提供的一个接口，帮助我们实现某种功能，我们会使用就可以了，不必纠结内部如何实现
Web API 主要是针对于浏览器提供的接口，主要针对于浏览器做交互效果。
Web API 一般都有输入和输出（函数的传参和返回值），Web API 很多都是方法（函数）
学习 Web API 可以结合前面学习内置对象方法的思路学习

DOM ——文档对象模
- 文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。
  通过 DOM 提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）
- DOM 树
- 获取页面元素
  -  根据 ID 获取
    - 语法：document.getElementById(id)
      作用：根据ID获取元素对象
      参数：id值，区分大小写的字符串
      返回值：元素对象或 null
    - 使用 console.dir() 可以打印我们获取的元素对象，更好的查看对象里面的属性和方法。
  -  根据标签名获取
    - 语法：document.getElementsByTagName(‘标签名’) 或者 element.getElementsByTagName(‘标签名’)
      作用：根据标签名获取元素对象
      参数：标签名
      返回值：元素对象集合（伪数组，数组元素是元素对象）
      - 知否知否，应是等你好久11
      - 知否知否，应是等你好久22
      - 知否知否，应是等你好久33
      - 知否知否，应是等你好久44
      - 知否知否，应是等你好久55
      - 生僻字
      - 生僻字
      - 生僻字
      - 生僻字
      - 生僻字
    - 1. 因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历。
    - 注意：getElementsByTagName()获取到是动态集合，即：当页面增加了标签，这个集合中也就增加了元素。
    - 1. 如果获取不到元素,则返回为空的伪数组(因为获取不到对象)
    - 还可以获取某个元素(父元素)内部所有指定标签名的子元素.
      element.getElementsByTagName(‘标签名’);
      注意：父元素必须是单个对象(必须指明是哪一个元素对象). 获取的时候不包括父元素自己。
  -  通过 HTML5 新增的方法获取
    - 1. document.getElementsByClassName(‘类名’)；// 根据类名返回元素对象集合

document.querySelector(‘选择器’); // 根据指定选择器返回第一个元素对象
document.querySelectorAll(‘选择器’); // 根据指定选择器返回
- 注意：
  querySelector 和 querySelectorAll里面的选择器需要加符号,比如:document.querySelector(’#nav’);
  -  特殊元素获取
    - 获取body元素
doucumnet.body // 返回body元素对象
- 获取html元素
document.documentElement // 返回html元素对象
- 事件
  - JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。
    简单理解：触发— 响应机制。
    网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击某按钮时产生一个事件，然后去执行某些操作。
  - 事件三要素
    - 1. 事件源（谁）
事件类型（什么事件）
事件处理程序（做啥）
```
   
     
     
   
```
- 事件高级
  - 注册事件或者绑定事件
    - 传统注册方式方法监听注册方式
 利用 on 开头的事件 onclick
 - 阻止事件冒泡 -  标准写法：利用事件对象里面的 stopPropagation()方法
e.stopPropagation()
-  非标准写法：IE 6-8 利用事件对象 cancelBubble 属性
e.cancelBubble = true;
- 阻止事件冒泡的兼容性解决方案
```
  			- if(e && e.stopPropagation){
```
e.stopPropagation();
}else{
window.event.cancelBubble = true;
}
```
  	- 事件委托（代理、委派）

  		- 事件委托也称为事件代理， 在 jQuery 里面称为事件委派。
  		- 事件委托的原理
```
不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。
以上案例：给 ul 注册点击事件，然后利用事件对象的 target 来找到当前点击的 li，因为点击 li，事件会冒泡到 ul 上，
ul 有注册事件，就会触发事件监听器。
- 事件委托的作用
我们只操作了一次 DOM ，提高了程序的性能。
```
  	- 鼠标对象

  		- 1.禁止鼠标右键菜单
```
contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单
2.禁止鼠标选中（selectstart 开始选中）
document.addEventListener(‘contextmenu’, function(e) {
e.preventDefault();
})
document.addEventListener(‘selectstart’, function(e) {
e.preventDefault();
})
- 属性方法
```
  			- 

  		- mouseenter 和mouseover的区别
```
mouseenter 鼠标事件
 当鼠标移动到元素上时就会触发 mouseenter 事件
 类似 mouseover，它们两者之间的差别是
 mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发。 mouseenter 只会经过自身盒子触发
 之所以这样，就是因为mouseenter不会冒泡
 跟mouseenter搭配鼠标离开 mouseleave 同样不会冒泡
```
  	- 键盘事件

  		- 注意： onkeydown 和 onkeyup 不区分字母大小写，onkeypress 区分字母大小写。
  		- 键盘事件对象

  			- // 我们可以利用keycode返回的ASCII码值来判断用户按下了那个键
   if (e.keyCode === 65) {
       alert('您按下的a键');

  				- 

  	- 触屏事件

  		- 动端浏览器兼容性较好，我们不需要考虑以前 JS 的兼容性问题，可以放心的使用原生 JS 书写效果，但是移动
```
端也有自己独特的地方。比如触屏事件 touch（也称触摸事件），Android 和 IOS 都有。
- 触摸事件对象（TouchEvent）
```
  			- TouchEvent 是一类描述手指在触摸平面（触摸屏、触摸板等）的状态变化的事件。这类事件用于描述一个或多
```
个触点，使开发者可以检测触点的移动，触点的增加和减少，等等
touchstart、touchmove、touchend 三个事件都会各自有事件对象。
触摸事件对象重点我们看三个常见对象列表
```
  		- 移动端拖动元素

  			- 1. touchstart、touchmove、touchend 可以实现拖动元素
```

但是拖动元素需要当前手指的坐标值我们可以使用 targetTouches[0] 里面的pageX 和 pageY
移动端拖动的原理：手指移动中，计算出手指移动的距离。然后用盒子原来的位置 + 手指移动的距离
手指移动的距离：手指滑动中的位置减去手指刚开始触摸的位置
拖动元素三步曲：
（1）触摸元素 touchstart：获取手指初始坐标，同时获得盒子原来的位置
（2）移动手指 touchmove：计算手指的滑动距离，并且移动盒子
（3）离开手指 touchend:
注意：手指移动也会触发滚动屏幕所以这里要阻止默认的屏幕滚动 e.preventDefault();
```
 		- 移动端 click 事件会有 300ms 的延时，原因是移动端屏幕双击会缩放(double tap to zoom) 页面。

 			- 解决方案：
```

1. 禁用缩放。浏览器禁用默认的双击缩放行为并且去掉300ms 的点击延迟。
- 2.利用touch事件自己封装这个事件解决300ms 延迟。

原理就是：

当我们手指触摸屏幕，记录当前触摸时间
当我们手指离开屏幕，用离开的时间减去触摸的时间
如果时间小于150ms，并且没有滑动过屏幕，那么我们就定义为点击

代码如下:

						- //封装tap，解决click 300ms 延时

		-  load 事件

			- 下面三种情况都会刷新页面都会触发 load 事件。

a标签的超链接
F5或者刷新按钮（强制刷新）
前进后退按钮
但是火狐中，有个特点，有个“往返缓存”，这个缓存中不仅保存着页面数据，还保存了DOM和JavaScript的
状态；实际上是将整个页面都保存在了内存里。
所以此时后退按钮不能刷新页面。
此时可以使用 pageshow事件来触发。，这个事件在页面显示时触发，无论页面是否来自缓存。在重新加载页
面中，pageshow会在load事件触发后触发；根据事件对象中的persisted来判断是否是缓存中的页面触发的
pageshow事件，注意这个事件给window添加。
- 操作元素
  - JavaScript 的 DOM 操作可以改变网页内容、结构和样式，我们可以利用 DOM 操作元素来改变元素里面的内
    容、属性等。注意以下都是属性
  - 改变元素内容
    - element.innerText
      从起始位置到终止位置的内容,
      - 但它去除 html 标签，同时空格和换行也会去掉
    - element.innerHTML
      起始位置到终止位置的全部内容，
      - 包括 html 标签，同时保留空格和换行
  - 常用元素的属性操作
    - 1. innerText、innerHTML 改变元素内容
src、href
id、alt、title
- class属性特殊，className才能操作
  - 表单元素的属性操作
    - 利用 DOM 可以操作如下表单元素的属性：
      type、value、checked、selected、disabled
    - classList 属性
      - classList属性是HTML5新增的一个属性，返回元素的类名。但是ie10以上版本支持。

该属性用于在元素中添加，移除及切换 CSS 类。有以下方法
- 添加类：

element.classList.add（’类名’）；
- 移除类：

element.classList.remove（’类名’）;
- 切换类：

element.classList.toggle（’类名’）;

				- 轻易做到开关灯案例

	- 样式属性操作

		- 我们可以通过 JS 修改元素的大小、颜色、位置等样式。

element.style 行内样式操作
element.className 类名样式操作
- 注意：
  1.JS 里面的样式采取驼峰命名法比如 fontSize、backgroundColor
  2.JS 修改 style 样式操作，产生的是行内样式，CSS 权重比较高
  - 通过操作className属性
  - 排他操作
    - 子主题 2
    - 1. 所有元素全部清除样式（干掉其他人）
给当前元素设置样式（留下我自己）

注意顺序不能颠倒，首先干掉其他人，再设置自己

   button>按钮1

属性值
- 1. 获取属性值
  -  element.属性获取属性值。

 element.getAttribute(‘属性’);

 		- 区别：

 element.属性获取内置属性值（元素本身自带的属性）
 element.getAttribute(‘属性’); 主要获得自定义的属性（标准）我们程序员自定义的属性

 - 2. 设置属性值

 	-  element.属性 = ‘值’ 设置内置属性值。

 element.setAttribute(‘属性’, ‘值’);

 		- 区别：

 element.属性设置内置属性值  element.setAttribute(‘属性’); 主要设置自定义的属性（标准）

 - 3. 移出属性

 	-  element.removeAttribute('属性');

 - H5自定义属性

 	- 自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。
 	- 有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性

 		- H5规定自定义属性data-开头做为属性名并且赋值。
 		- 比如

或者使用 JS 设置
element.setAttribute(‘data-index’, 2)

 	-  获取H5自定义属性

 		- 1. 兼容性获取 element.getAttribute(‘data-index’);

H5新增 element.dataset.index 或者 element.dataset[‘index’] ie 11才开始支持
```
 		- 
```
- 操作节点
  - 网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM 中，节点使用 node 来表示。都可以修改创建任何一个节点。
  - nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性。
    -  元素节点 nodeType 为 1
    -  属性节点 nodeType 为 2
    -  文本节点 nodeType 为 3 （文本节点包含文字、空格、换行等）
    - 我们在实际开发中，节点操作主要操作的是元素节点
  - 节点层级
    - 利用 DOM 树可以把节点划分为不同的层级关系，常见的是父子兄层级关系。
    - 父级节点
      - 父级节点
node.parentNode
 parentNode 属性可返回某节点的父节点，注意是最近的一个父节点
 如果指定的节点没有父节点则返回 null
```
 	- 子节点

 		- 所有子节点  

 			- 1. parentNode.childNodes（标准） 
```
parentNode.childNodes 返回包含指定节点的子节点的集合，该集合为即时更新的集合。
- 注意：返回值里面包含了所有的子节点，包括元素节点，文本节点等。
如果只想要获得里面的元素节点，则需要专门处理。所以我们一般不提倡使用childNodes
```
 		- 子节点

 			- 2. parentNode.children（非标准） 
```
parentNode.children 是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不返
回（这个是我们重点掌握的）
- 虽然children 是一个非标准，但是得到了各个浏览器的支持，因此我们可以放心使用
- parentNode.firstChild
firstChild 返回第一个子节点，找不到则返回null。同样，也是包含所有的节点。
- parentNode.lastChild
lastChild 返回最后一个子节点，找不到则返回null。同样，也是包含所有的节点。
- parentNode.firstElementChild
firstElementChild 返回第一个子元素节点，找不到则返回null。
- parentNode.lastElementChild
lastElementChild 返回最后一个子元素节点，找不到则返回null。
```
 	- 兄弟节点

 		- 1. node.nextSibling
```
nextSibling 返回当前元素的下一个兄弟元素节点，找不到则返回null。同样，也是包含所有的节点。
- 2. node.previousSibling
previousSibling 返回当前元素上一个兄弟元素节点，找不到则返回null。同样，也是包含所有的节点。
- 3. node.nextElementSibling
nextElementSibling 返回当前元素下一个兄弟元素节点，找不到则返回null。
- 4. node.previousElementSibling
previousElementSibling 返回当前元素上一个兄弟节点，找不到则返回null。
```
 	- 创建节点

 		- document.createElement('tagName')
```
document.createElement() 方法创建由 tagName 指定的 HTML 元素。因为这些元素原先不存在，
是根据我们的需求动态生成的，所以我们也称为动态创建元素节点。
```
 	- 添加节点

 		- 1. node.appendChild(child) 
```
node.appendChild() 方法将一个节点添加到指定父节点的子节点列表末尾。类似于 CSS 里面的after 伪元素。
- 2. node.insertBefore(child, 指定元素)
node.insertBefore() 方法将一个节点添加到父节点的指定子节点前面。类似于 CSS 里面的 before 伪元素。
```
 	- 删除节点

 		- node.removeChild(child) 
```
node.removeChild() 方法从 DOM 中删除一个子节点，返回删除的节点。
```
 	-  复制节点

 		- node.cloneNode() 
```
node.cloneNode() 方法返回调用该方法的节点的一个副本。
- 注意：
如果括号参数为空或者为 false ，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点。
如果括号参数为 true ，则是深度拷贝，会复制节点本身以及里面所有的子节点。
- 替换节点
  - parentNode.replaceChild(newChild, oldChild);
    用指定的节点替换当前节点的一个子节点，并返回被替换掉的节点。
    - 总结
      - 创建元素总结
        
         document.write()
         innerHTML
         document.createElement()
        区别
document.write 是直接将内容写入页面的内容流，会导致页面全部重绘
innerHTML 是将内容写入某个 DOM 节点，不会导致页面全部重绘
innerHTML 复制节点的时候，不会复制原先节点的事件，会存在内存泄露问题
如果页面创建元素很多，建议使用 innerHTML 因其效率更高（不要拼接字符串，采取数组形式拼接）
如果页面创建元素较少，建议使用 createElement()
总结：不同浏览器下，innerHTML 效率要比 creatElement 高
```
- 元素偏移量 offset 系列

	- offset 翻译过来就是偏移量， 我们使用 offset 系列相关属性可以动态的得到该元素的位置（偏移）、大小等。
	-  获得元素距离带有定位父元素的位置
```
 获得元素自身的大小（宽度高度）  注意：返回的数值都不带单位
- 子主题 3
```
- 元素可视区 client 系列

	- client 翻译过来就是客户端，我们使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client 系列
```
的相关属性可以动态的得到该元素的边框大小、元素大小等。
- 属性方法
```
		- 子主题 1

- 元素 scroll 系列属性

	- scroll 翻译过来就是滚动的，我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。
	- scrollheight 返回的是内容实际的高度，而clientheight 返回的是盒子不包含边框，超出的部分，不会显示
	- 如果浏览器的高（或宽）度不足以显示整个页面时，会自动出现滚动条。当滚动条向下滚动时，页面上面被隐藏
```
掉的高度，我们就称为页面被卷去的头部。滚动条在滚动时会触发 onscroll 事件
- 如果浏览器的高（或宽）度不足以显示整个页面时，会自动出现滚动条。当滚动条向下滚动时，页面上面被隐藏
掉的高度，我们就称为页面被卷去的头部。滚动条在滚动时会触发 onscroll 事件
- ③ 页面被卷去的头部：可以通过window.pageYOffset 获得如果是被卷去的左侧 window.pageXOffset
④ 注意，元素被卷去的头部是 element.scrollTop , 如果是页面被卷去的头部则是 window.pageYOffset
⑤ 其实这个值可以通过盒子的 offsetTop 可以得到，如果大于等于这个值，就可以让盒子固定定位了
```
		- 页面被卷去的头部兼容性解决方案
```
需要注意的是，页面被卷去的头部，有兼容性问题，因此被卷去的头部通常有如下几种写法：
声明了 DTD，使用 document.documentElement.scrollTop
未声明 DTD，使用 document.body.scrollTop
新方法 window.pageYOffset 和 window.pageXOffset，IE9 开始支持
function getScroll() {
return {
left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft||0,
top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
};
}
使用的时候 getScroll().left

BOM ——浏览器对象模型
- BOM (Browser Object Model，简称BOM) 是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行
  互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。
  - BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。
  -  浏览器对象模型
     把「浏览器」当做一个「对象」来看待
     BOM 的顶级对象是 window
     BOM 学习的是浏览器窗口交互的一些对象
     BOM 是浏览器厂商在各自浏览器上定义的，兼容性较差
- BOM 的构成
  - window 对象
    - 1. 它是 JS 访问浏览器窗口的一个接口。
    - 1. 它是一个全局对象。定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法。在调用的时候可以省略 window，前面学习的对话框都属于 window 对象方法，如 alert()、prompt() 等。
    - 注意：window下的一个特殊属性 window.name
    - window 对象的常见事件
      - 窗口加载事件
        window.onload = function(){}
        或者
        window.addEventListener(“load”,function(){});
        
        window.onload 是窗口 (页面）加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS
        文件等), 就调用的处理函数。
        注意：

有了 window.onload 就可以把 JS 代码写到页面元素的上方，因为 onload 是等页面内容全部加载完毕，再去执行处理函数。
window.onload 传统注册事件方式只能写一次，如果有多个，会以最后一个 window.onload 为准。
如果使用 addEventListener 则没有限制
- 窗口加载事件
  document.addEventListener(‘DOMContentLoaded’,function(){})
  DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等。
```
   	- 如果页面的图片很多的话, 从用户访问到onload触发可能需要较长的时间, 交互效果就不能实现，必然影响用
```
  户的体验，此时用 DOMContentLoaded 事件比较合适。
```
   - 调整窗口大小事件
```
  window.onresize = function(){}
  window.addEventListener(“resize”,function(){});
```
   	- window.onresize 是调整窗口大小加载事件, 当触发时就调用的处理函数。
```
  注意：
只要窗口大小发生像素变化，就会触发这个事件。
我们经常利用这个事件完成响应式布局。 window.innerWidth 当前屏幕的宽度
- 定时器
  -  setTimeout()
    - window.setTimeout(调用函数, [延迟的毫秒数]);
      setTimeout() 方法用于设置一个定时器，该定时器在定时器到期后执行调用函数。
      注意：
window 可以省略。
这个调用函数可以直接写函数，或者写函数名或者采取字符串‘函数名()'三种形式。第三种不推荐
延迟的毫秒数省略默认是 0，如果写，必须是毫秒。
因为定时器可能有很多，所以我们经常给定时器赋值一个标识符
- setTimeout() 这个调用函数我们也称为回调函数 callback
普通函数是按照代码顺序直接调用。
而这个函数，需要等待时间，时间到了才去调用这个函数，因此称为回调函数。
简单理解：回调，就是回头调用的意思。上一件事干完，再回头再调用这个函数。
以前我们讲的 element.onclick = function(){} 或者 element.addEventListener(“click”, fn); 里面的函数也是回调函数
- 停止 setTimeout() 定时器
window.clearTimeout(timeoutID)
clearTimeout()方法取消了先前通过调用 setTimeout() 建立的定时器。
注意：
window 可以省略。
里面的参数就是定时器的标识符。
-  setInterval()
  - setInterval() 定时器
    window.setInterval(回调函数, [间隔的毫秒数]);
    setInterval() 方法重复调用一个函数，每隔这个时间，就去调用一次回调函数。
```
		- 注意：
```
window 可以省略。
这个调用函数可以直接写函数，或者写函数名或者采取字符串 ‘函数名()’ 三种形式。

间隔的毫秒数省略默认是 0，如果写，必须是毫秒，表示每隔多少毫秒就自动调用这个函数。
4.因为定时器可能有很多，所以我们经常给定时器赋值一个标识符。 5. 第一次执行也是间隔毫秒数之后执行，之后每隔毫秒数就执行一次。

	- this指向问题

		- this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，一般情况下this的最终指向的是那个调用它的对象。
		- 指向

			- 1. 全局作用域或者普通函数中this指向全局对象window（注意定时器里面的this指向window）
			- 2. 方法调用中谁调用this指向谁
			- 3. 构造函数中this指向构造函数的实例

-  location 对象

	- window 对象给我们提供了一个 location 属性用于获取或设置窗体的 URL，并且可以用于解析 URL 。 因为

这个属性返回的是一个对象，所以我们将这个属性也称为 location 对象。
- URL 的一般语法格式为：
protocol://host[:port]/path/[?query]#fragment
http://www.itcast.cn/index.html?name=andy&age=18#link
- 属性

		- 重点记住： href 和 search  href是整个url  search是？XXXXXX部分。

	- 方法

		- 

- navigator 对象

	- navigator 对象包含有关浏览器的信息，它有很多属性，我们最常用的是 userAgent，该属性可以返回由客

户机发送服务器的 user-agent 头部的值

		- 下列前端代码可知道是那些用户登陆的if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {

window.location.href = “”; //手机
} else {
window.location.href = “”; //电脑
}

- history对象

	- window对象给我们提供了一个 history对象，与浏览器历史记录进行交互。该对象包含用户（在浏览器窗口中）访问过的URL。
	- 

- JS 执行机制

	- js语言一大特点就是单线程，同一事件只能执行一件事
	- 单线程导致的问题就是后面的任务等待前面任务完成，如果前面任务很耗时（比如读取网络数据），后面任务不得不一直等待！！

为了解决这个问题，利用多核 CPU 的计算能力，HTML5 提出 Web Worker 标准，允许 JavaScript 脚本创建多个线程，但是子线程完全受主线程控制。于是，JS 中出现了同步任务和异步任务。

			- 同步任务

				- 同步任务都在主线程上执行，形成一个执行栈

			- 异步任务

				- JS 的异步是通过回调函数实现的。

一般而言，异步任务有以下三种类型: 1、普通事件，如 click、resize 等 2、资源加载，如 load、error 等 3、定时器，包括 setInterval、setTimeout 等
异步任务相关回调函数添加到任务队列中（任务队列也称为消息队列）。

					- 子主题 1

				- 不进入主线程、而进入”任务队列”的任务，当主线程中的任务运行完了，才会从”任务队列”取出异步任务放入主线程执行。
				- 事件循环

					- 1. 先执行执行栈中的同步任务。 2. 异步任务（回调函数）放入任务队列中。

一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行
- 由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环（ event loop）

jQuery

JavaScript 库

即 library在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show等
对原生js代码进行了封装
常见的JavaScript 库  jQuery
 Prototype
 YUI
 Dojo
 Ext JS
 移动端的zepto
- 这些库都是对原生 JavaScript 的封装，内部都是用 JavaScript 实现的，

jQuery 的概念

jQuery 是一个快速、简洁的 JavaScript 库，设计的宗旨是“write Less，Do More”，
jQuery 封装了 JavaScript 常用的功能代码，优化了 DOM 操作、事件处理、动画设计和 Ajax 交互。
jQuery 出现的目的，提高开发效率。

jQuery 的优点

 轻量级。核心文件才几十kb，不会影响页面加载速度
 跨浏览器兼容。基本兼容了现在主流的浏览器
 链式编程、隐式迭代
 对事件、样式、动画支持，大大简化了DOM操作
 支持插件扩展开发。有着丰富的第三方的插件，例如：
树形菜单、日期控件、轮播图等  免费、开源

jQuery 的基本使用

2.1 jQuery 的下载
官网地址： https://jquery.com/
版本：  1x ：兼容 IE 678 等低版本浏览器，官网不再更新
 2x ：不兼容 IE 678 等低版本浏览器，官网不再更新
 3x ：不兼容 IE 678 等低版本浏览器，是官方主要更新维护的版本
各个版本的下载：https://code.jquery.com/
1. 引入 jQuery 文件

使用即可

jQuery 的入口函数
- $(function () {
  … // 此处是页面 DOM 加载完成的入口
  }) ;
- $(document).ready(function(){
  … // 此处是页面DOM加载完成的入口
  });
- 1. 等着 DOM 结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery 帮我们完成了封装。

相当于原生 js 中的 DOMContentLoaded。
不同于原生 js 中的 load 事件是等页面文档、外部的 js 文件、css文件、图片加载完毕才执行内部代码。

jQuery 的顶级对象 $
- 1.$ 是 jQuery 的别称，代码中可以使用 jQuery 代替 $，但一般为了方便，通常都直接使用 $ 。
  2.$ 是jQuery 的顶级对象，相当于原生JavaScript中的 window。把元素利用$包装成jQuery对象，就可以调用jQuery 的方法。
jQuery 对象和 DOM 对象
- 1. 用原生 JS 获取来的对象就是 DOM 对象

jQuery 方法获取的元素就是 jQuery 对象。
jQuery 对象本质是：利用$对DOM 对象包装后产生的对象（伪数组形式存储）。
注意：
只有 jQuery 对象才能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 方法。
- DOM 对象与 jQuery 对象之间是可以相互转换的。
  因为原生js 比 jQuery 更大，原生的一些属性和方法 jQuery没有给我们封装. 要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用
  - 1. DOM 对象转换为 jQuery 对象： $(DOM对象)
      $(‘div’)
  - 1. jQuery 对象转换为 DOM 对象（两种方式）
      $(‘div’) [index] index 是索引号
      $(‘div’) .get(index) index 是索引号

## jQuery 选择器

选择器获取的都是伪元组，ID选择器也一样
原生 JS 获取元素方式很多，很杂，而且兼容性情况不一致，因此 jQuery 给我们做了封装，使获取元素统一标准。
基础选择器
- $(“选择器”) // 里面选择器直接写 CSS 选择器即可，但是要加引号
jQuery 层级选择器
- 与css选择器一样
筛选选择器
- 子主题 1
其他选择器
- 子主题 1

jQuery 设置样式

方法1: 操作 css 方法

jQuery 可以使用 css 方法来修改简单元素样式；也可以操作类，修改多个样式。

常用以下三种形式 :

- // 1.参数只写属性名，则是返回属性值

var strColor = $(this).css(‘color’);

// 2. 参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号
$(this).css(’‘color’’, ‘‘red’’);

// 3. 参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号
$(this).css({ “color”:“white”,“font-size”:“20px”});

- 参数可以是对象

方法2: 设置类样式方法

作用等同于以前的 classList，可以操作类样式，注意操作类里面的参数不要加点。

常用的三种设置类样式方法：

- // 1.添加类

$(“div”).addClass(“current”);

// 2.删除类
$(“div”).removeClass(“current”);

// 3.切换类
$(“div”).toggleClass(“current”);
- 注意：

设置类样式方法比较适合样式多时操作，可以弥补css()的不足。
原生 JS 中 className 会覆盖元素原先里面的类名，jQuery 里面类操作只是对指定类进行操作，不影响原先的类名。

jQuery 里面的排他思想
- // 想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式。
  $(this).css(“color”,”red”);
  $(this).siblings(). css(“color”,””);
设置的是行内样式

隐式迭代

/ 遍历内部 DOM 元素（伪数组形式存储）的过程就叫做隐式迭代。
// 简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。
$(‘div’).hide(); // 页面中所有的div全部隐藏，不用循环操作

链式编程

链式编程是为了节省代码量，看起来更优雅。
$(this).css(‘color’, ‘red’).sibling().css(‘color’, ‘’);

jQuery 效果

显示隐藏：show() / hide() / toggle() ;
- 1. 显示语法规范
    show([speed,[easing],[fn]])
- 1. 隐藏语法规范
    hide([speed,[easing],[fn]])
- 1. 切换语法规范
    toggle([speed,[easing],[fn]])
- （1）参数都可以省略，无动画直接显示。
  （2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
  （4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
划入画出：slideDown() / slideUp() / slideToggle() ;
- 下滑效果语法规范
  slideDown([speed,[easing],[fn]])
- 上滑效果语法规范
  slideUp([speed,[easing],[fn]])
- 滑动切换效果语法规范
  slideToggle([speed,[easing],[fn]])
- （1）参数都可以省略。
  （2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
  （4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次
淡入淡出：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ;
- 淡入效果语法规范
  fadeIn([speed,[easing],[fn]])
- 淡出效果语法规范
  fadeOut([speed,[easing],[fn]])
- 淡入淡出切换效果语法规范
  fadeToggle([speed,[easing],[fn]])
- 渐进方式调整到指定的不透明度
  fadeTo([[speed],opacity,[easing],[fn]])
  - （1）opacity 透明度必须写，取值 0~1 之间。
    （2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。必须写
    （3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
    （4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
自定义动画：animate() ;
- 语法
  animate(params,[speed],[easing],[fn])
- （1）params: 想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要采
  取驼峰命名法 borderLeft。其余参数都可以省略。
- （2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
  （4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
- 停止动画排队
  - 动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。

停止动画排队的方法为：stop() ;

stop() 方法用于停止动画或效果。
stop() 写到动画或者效果的前面，相当于停止结束上一次的动画。

总结: 每次使用动画之前，先调用 stop() ,在调用动画。

事件切换
hover([over,]out)
- （1）over:鼠标移到元素上要触发的函数（相当于mouseenter）（2）out:鼠标移出元素要触发的函数（相当于mouseleave）（3）如果只写一个函数，则鼠标经过和离开都会触发它

jQuery 属性操作

设置或获取元素固有属性值 prop()
- 1. 获取属性语法
    prop(’‘属性’’)

设置属性语法
prop(’‘属性’’, ‘‘属性值’’)
- 注意：prop() 除了普通属性操作，更适合操作表单属性：disabled / checked / selected 等。

设置或获取元素自定义属性值 attr()
- 1. 获取属性语法
    attr(’‘属性’’) // 类似原生 getAttribute()

设置属性语法
attr(’‘属性’’, ‘‘属性值’’) // 类似原生 setAttribute()

数据缓存 data()
- data() 方法可以在指定的元素上存取数据，并不会修改 DOM 元素结构。一旦页面刷新，之前存放的数据都将被移除
- 1. 附加数据语法
    data(’‘name’’,’‘value’’) // 向被选元素附加数据

获取数据语法
date(’‘name’’) // 向被选元素获取数据
- 注意：同时，还可以读取 HTML5 自定义属性 data-index ，得到的是数字型。
- 数据缓存 data() 这个里面的数据是存放在元素的内存里面，页面上看不到

jQuery 文本属性值

1. 普通元素内容 html()（相当于原生inner HTML)
- html() // 获取元素的内容
  html(’‘内容’’) // 设置元素的内容
普通元素文本内容 text() (相当与原生 innerText)
- text() // 获取元素的文本内容
  text(’‘文本内容’’) // 设置元素的文本内容
表单的值 val()（相当于原生value)
- val() // 获取表单的值
  val(’‘内容’’) // 设置表单的值

jQuery 元素操作

jQuery 隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同操作，就需要用到遍历。
语法1： $(“div”).each(function (index, domEle) { xxx; }）
1. each() 方法遍历匹配的每一个元素。主要用DOM处理。 each 每一个

里面的回调函数有2个参数： index 是每个元素的索引号; demEle 是每个DOM元素对象，不是jquery对象
所以要想使用jquery方法，需要给这个dom元素转换为jquery对象 $(domEle)

遍历元素
- 语法2： $.each(object，function (index, element) { xxx; }）
- 1. $.each()方法可用于遍历任何对象。主要用于数据处理，比如数组，对象
- 1. 里面的函数有2个参数： index 是每个元素的索引号; element 遍历内容
创建元素
- 语法：
  $(’’
- ’’);
  动态的创建了一个
添加元素
- element.append(’‘内容’’)
  把内容放入匹配元素内部最后面，类似原生 appendChild。
- element.prepend(’‘内容’’)
  把内容放入匹配元素内部最前面。
- 外部添加
  element.after(’‘内容’’) // 把内容放入目标元素后面
  element.before(’‘内容’’) // 把内容放入目标元素前面
- ① 内部添加元素，生成之后，它们是父子关系。
  ② 外部添加元素，生成之后，他们是兄弟关系。
删除元素
- 删除元素
  element.remove() // 删除匹配的元素（本身）
  element.empty() // 删除匹配的元素集合中所有的子节点
  element.html(’’’’) // 清空匹配的元素内容
- ① remove 删除元素本身。
  ② empt() 和 html(’’’’) 作用等价，都可以删除元素里面的内容，只不过 html 还可以设置内容。

jQuery 尺寸、位置操作

jQuery 尺寸
-  以上参数为空，则是获取相应值，返回的是数字型。
   如果参数为数字，则是修改相应值。  参数可以不必写单位。
- css(‘height’)获取的是字符串带有单位
jQuery 位置操作
- 1. offset() 设置或获取元素偏移
  - ① offset() 方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系。
  - ② 该方法有2个属性 left、top 。offset().top 用于获取距离文档顶部的距离，offset().left 用于获取距离文档左侧的距离。
  - ③ 可以设置元素的偏移：offset({ top: 10, left: 30 });
- 1. position() 获取元素偏移
  - ① position() 方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准
  - ② 该方法有2个属性 left、top。position().top 用于获取距离定位父级顶部的距离，position().left 用于获取距离定位父级左侧的距离
  - ③ 该方法只能获取。
- 1. scrollTop()/scrollLeft() 设置或获取元素被卷去的头部和左侧
  - ① scrollTop() 方法设置或返回被选元素被卷去的头部。。
  - ② 不跟参数是获取，参数为不带单位的数字则是设置被卷去的头部
- 返回顶部
  - ① 核心原理：使用animate动画返回顶部。
  - ② animate动画函数里面有个scrollTop 属性，可以设置位置
  - ③ 但是是元素做动画，因此 $(“body,html”).animate({scrollTop: 0})

jQuery事件

单个事件注册
- 语法：
  element.事件(function(){})
  $(“div”).click(function(){ 事件处理程序 })
  其他事件和原生基本一致。
  比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll 等
多个事件处理注册
- 语法：
  element.on(events,[selector],fn)
  - 1. events:一个或多个用空格分隔的事件类型，如"click"或"keydown" 。

selector: 元素的子元素选择器。
fn:回调函数即绑定在元素身上的侦听函数。
- 可以绑定多个事件，多个处理事件处理程序。
  $(“div”).on({
  mouseover: function(){},
  mouseout: function(){},
  click: function(){}
  });
  - 参数对象
- 如果事件处理程序相同
  $(“div”).on(“mouseover mouseout”, function() {
  $(this).toggleClass(“current”);
  });
- 可以事件委派操作。事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。
  $(‘ul’).on(‘click’, ‘li’, function() {
  alert(‘hello world!’);
  })
  - 在此之前有bind(), live() delegate()等方法来处理事件绑定或者事件委派，最新版本的请用on替代他们。
- 动态创建的元素，click() 没有办法绑定事件， on() 可以给动态生成的元素绑定事件
  $(“div").on(“click”,”p”, function(){
  alert(“俺可以给动态生成的元素绑定事件”)
  });

one() 但是它只能触发事件一次
- $(“p”).one(“click”, function() {
  alert(11);
  })
事件处理 off() 解绑事件
- off() 方法可以移除通过 on() 方法添加的事件处理程序。
  $(“p”).off() // 解绑p元素所有事件处理程序
  $(“p”).off( “click”) // 解绑p元素上面的点击事件后面的 foo 是侦听函数名
  $(“ul”).off(“click”, “li”); // 解绑事件委托
自动触发事件 trigger()
- 比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发
- element.click() // 第一种简写形式
  element.trigger(“type”) // 第二种自动触发模式
  - $(“p”).on(“click”, function () {
    alert(“hi~”);
    });
    $(“p”).trigger(“click”); // 此时自动触发点击事件，不需要鼠标点击
- element.triggerHandler(type) // 第三种自动触发模式
  triggerHandler模式不会触发元素的默认行为，这是和前面两种的区别。
jQuery 事件对象
- 事件被触发，就会有事件对象的产生。
  element.on(events,[selector],function(event) {})
  阻止默认行为：event.preventDefault() 或者 return false
  阻止冒泡： event.stopPropagation()

jQuery 拷贝对象

如果想要把某个对象拷贝（合并）给另外一个对象使用，此时可以使用 $.extend() 方法
$.extend([deep], target, object1, [objectN])
- 1. deep: 如果设为true 为深拷贝，默认为false 浅拷贝

target: 要拷贝的目标对象
object1:待拷贝到第一个对象的对象。
objectN:待拷贝到第N个对象的对象。
浅拷贝目标对象引用的被拷贝的对象地址，修改目标对象会影响被拷贝对象。
深拷贝，前面加true，完全克隆，修改目标对象不会影响被拷贝对象。

jQuery 多库共存

让jQuery 和其他的js库不存在冲突，可以同时存在，这就叫做多库共存
jQuery 解决方案：

把里面的 $ 符号统一改为 jQuery。比如 jQuery(’‘div’’)
jQuery 变量规定新的名称：$.noConflict() var xx = $.noConflict();

jQuery 插件

jQuery 插件常用的网站：

jQuery 插件库 http://www.jq22.com/
jQuery 之家 http://www.htmleaf.com/

懒加载插件
瀑布流插件
全屏滚动插件

js高级

类class

语法
- / 1. 创建类 class 创建一个明星类
  class Star {
  // 类的共有属性放到 constructor 里面
  constructor(name, age) {
  this.name = name;
  this.age = age;
  }
  }
  // 2. 利用类创建对象 new
  var ldh = new Star(‘刘德华’, 18);
  console.log(ldh);
- 创建实例使用new关键字，与构造函数一样。var a = new A ()
- 类里面有个constructor 函数,可以接受传递过来的参数,同时返回实例对象
- constructor 函数只要 new 生成实例时,就会自动调用这个函数, 如果我们不写这个函数,类也会自动生成这个函数
类继承
- // 父类
  class Father{
  }

// 子类继承父类
class Son extends Father {
}
- 调用父类构造函数，使用super（）

	-  constructor(x, y) {
		super(x, y); //使用super调用了父类中的构造函数
	}
	- super 必须在子类this之前调用

注意点
- 1.共有属性和方法，写在constructor里面
- 2.里面的方法书写不需要逗号
- 1. this指向问题，在构造函数里，this都是指向对象，自定义方法里都是指向调用的对象

构造函数和原型

ES6之前，没有class关键字来创建类，js使用构造函数和原型对象来模拟面对对象
语法
- function Person(name,age){
  this.name = name;
  this.age = age;
  }
  var obj = new Person(‘zs’,12);
- 其他创建对象方式
  - var object = {}
  - var object = new Object()
成员
- 实例成员
  - 在构造函数内部创建出来的成员，只有对象可以访问
    - function Star(uname, age) {
      this.uname = uname;
      this.age = age;
      this.sing = function() {
      console.log(‘我会唱歌’);
      }
      }
      var ldh = new Star(‘刘德华’, 18);
      console.log(ldh.uname);//实例成员只能通过实例化的对象来访问
- 静态成员
  - 由构造函数绑定的成员，只有构造函数可以访问
    - function Star(uname, age) {
      this.uname = uname;
      this.age = age;
      this.sing = function() {
      console.log(‘我会唱歌’);
      }
      }
      Star.sex = ‘男’;
      var ldh = new Star(‘刘德华’, 18);
      console.log(Star.sex);//静态成员只能通过构造函数来访问
原型
- 为了节省内存，让多个对象共用一个方法
- 构造函数原型prototype
  - 每个构造函数创建的时候，自动会有个prototype属性，绑定的是一个对象
  - 在这个对象中，书写的所有方法，构造函数创建的对象中，共享这些方法。
- 对象原型__proto__
  - 每个对象创建的时候，都会自动获得一个属性__proto__,这个属性指向构造函数原型，prototype可以认为等价于__proto__
  - 所有对象可以使用构造函数原型的方法
  - 这个属性一般都不会修改，只是用来指向的
- constructor属性
  - 主要用于记录该对象引用于哪个构造函数，它可以让原型对象重新指向原来的构造函数
  - 构造函数原型与对象原型，都会有constructor属性，称为构造函数，这个属性指向创建这个原型的构造函数
  - 如果给构造函数原型赋值一个对象，需要在对象里添加这个属性，指回构造函数，赋值对象的话，没有这个属性，原型不知道该指向谁，也就找不到方法调用了
- 三角关系
- 原型链
  - 当访问一个对象属性或方法时，会先看自身对象有没有这个属性，如果没有，就在__proto__指向的原型对象，看有没有这些属性，如果还没有，就在__proto__原型对象中的__proto__原型对象中查找，就这样一层一层往上找，直到找到属性为止，找不到，返回null。
- this指向问题
  - this指向我们都知道，谁调用，指向谁，因为都是实例调用方法，所以都指向实例对象
- 通过原型为数组扩展内置方法
  - Array.prototype.sum = function() {
    var sum = 0;
    for (var i = 0; i < this.length; i++) {
    sum += this[i];
    }
    return sum;
    };
    //此时数组对象中已经存在sum()方法了可以始终数组.sum()进行数据的求
继承
- es6之前没有提供继承方法extends，但是可以使用call方法和原型继承，来实现
- call
  - 一种函数调用方法，可以改变this指向，在子构造构造函数中，使用call方法调用父构造函数，就可以继承父构造函数的属性
    
    // 1. 父构造函数
    function Father(uname, age) {
      // this 指向父构造函数的对象实例
      this.uname = uname;
      this.age = age;
    }
    // 2 .子构造函数
    function Son(uname, age, score) {
    // this 指向子构造函数的对象实例
    3.使用call方式实现子继承父的属性
    Father.call(this, uname, age);
    this.score = score;
    }
    var son = new Son(‘刘德华’, 18, 100);
    console.log(son);
  - function fn(x, y) {
    console.log(this);
    console.log(x + y);
    }
    var o = {
    name: ‘andy’
    };
    fn.call(o, 1, 2);//调用了函数此时的this指向了对象o,
- 原型继承
  - 让子构造函数的原型对象等于父构造函数构成的对象，就可以通过原型链的方式，来继承父类的共有方法，也不会影响子类添加新的方法
    
    // 1. 父构造函数
    function Father(uname, age) {
    // this 指向父构造函数的对象实例
    this.uname = uname;
    this.age = age;
    }
    Father.prototype.money = function() {
    console.log(100000);
    };
    // 2 .子构造函数
    function Son(uname, age, score) {
       // this 指向子构造函数的对象实例
       Father.call(this, uname, age);
       this.score = score;
    }
    // Son.prototype = Father.prototype; 这样直接赋值会有问题,如果修改了子原型对象,父原型对象也会跟着一起变化
    Son.prototype = new Father();
    // 如果利用对象的形式修改了原型对象,别忘了利用constructor 指回原来的构造函数
    Son.prototype.constructor = Son;
    // 这个是子构造函数专门的方法
    Son.prototype.exam = function() {
      console.log(‘孩子要考试’);
    
    }
    var son = new Son(‘刘德华’, 18, 100);
    console.log(son);
  - 关键点是：记得要把子类构造函数原型对象属性constructor指向子构造函数，因为是赋值父类构造对象，里面的指向是父构造函数

ES5新增方法

1.数组方法forEach遍历数组
- arr.forEach(function(value, index, array) {
  //参数一是:数组元素
  //参数二是:数组元素的索引
  //参数三是:当前的数组
  })
  //相当于数组遍历的 for循环没有返回值
2数组方法filter过滤数组
- var arr = [12, 66, 4, 88, 3, 7];
  var newArr = arr.filter(function(value, index,array) {
  //参数一是:数组元素
  //参数二是:数组元素的索引
  //参数三是:当前的数组
  return value >= 20;
  });
  console.log(newArr);//[66,88] //返回值是一个新数组
3数组方法some
- some 查找数组中是否有满足条件的元素
  var arr = [10, 30, 4];
  var flag = arr.some(function(value,index,array) {
  //参数一是:数组元素
  //参数二是:数组元素的索引
  //参数三是:当前的数组
  return value < 3;
  });
  console.log(flag);//false返回值是布尔值,只要查找到满足条件的一个元素就立马终止循环
4.trim方法去除字符串两端的空格
- var str = ’ hello ’
  console.log(str.trim()） //hello 去除两端空格
  var str1 = ’ he l l o ’
  console.log(str.trim()） //he l l o 去除两端空格
5.获取对象的属性名
- var obj = {
  id: 1,
  pname: ‘小米’,
  price: 1999,
  num: 2000
  };
  var result = Object.keys(obj)
  console.log(result)//[id，pname,price,num]
6.Object.defineProperty
- Object.defineProperty设置或修改对象中的属性
- Object.defineProperty(对象，修改或新增的属性名，{
  value:修改或新增的属性的值,
  writable:true/false,//如果值为false 不允许修改这个属性值
  enumerable: false,//enumerable 如果值为false 则不允许遍历
  configurable: false //configurable 如果为false 则不允许删除这个属性属性是否可以被删除或是否可以再次修改特性
  })

函数进阶

函数定义方式
- 1.匿名函数
  - var fn = function(){}
- 2.命名关键字
  - function fn(){}
- 3.构造函数声明Function()
  - var f = new Function(‘a’, ‘b’, ‘console.log(a + b)’);
    f(1, 2);

var fn = new Function(‘参数1’,‘参数2’…, ‘函数体’)
注意
/*Function 里面参数都必须是字符串格式
第三种方式执行效率低，也不方便书写，因此较少使用
所有函数都是 Function 的实例(对象)
函数也属于对象
*/

函数的调用
- /* 1. 普通函数 */
  function fn() {
  console.log(‘人生的巅峰’);
  }
  fn();
- /* 2. 对象的方法 */
  var o = {
  sayHi: function() {
  console.log(‘人生的巅峰’);
  }
  }
  o.sayHi();
- /* 3. 构造函数*/
  function Star() {};
  new Star();
- /* 4. 绑定事件函数*/
  btn.onclick = function() {}; // 点击了按钮就可以调用这个函数
- /* 5. 定时器函数*/
  setInterval(function() {}, 1000); 这个函数是定时器自动1秒钟调用一次
- /* 6. 立即执行函数(自调用函数)*/
  (function() {
  console.log(‘人生的巅峰’);
  })();
this
- 函数内部的this指向
  - 1.普通函数 this是window对象
  - 2.对象函数 this是对象
  - 3.构造函数 this 是实例对象
  - 4.绑定事件函数 this是事件源对象
  - 5.定时函数 this是window对象
  - 6.立即执行函数 this是window对象
- 改变函数内部 this 指向
  - call
    - 调用函数，改变this指向指定对象
      
      var o = {
      name: ‘andy’
      }
      function fn(a, b) {
      console.log(this);
      console.log(a+b)
      };
      fn(1,2)// 此时的this指向的是window 运行结果为3
      fn.call(o,1,2)//此时的this指向的是对象o,参数使用逗号隔开,运行结果为3
  - apply
    - 调用函数，改变this指向指定对象，参数是数组
      
      var o = {
      name: ‘andy’
      }
      function fn(a, b) {
      console.log(this);
      console.log(a+b)
      };
      fn()// 此时的this指向的是window 运行结果为3
      fn.apply(o,[1,2])//此时的this指向的是对象o,参数使用数组传递运行结果为3
    - 应用，可以用Math.max（）这个方法求最大值。
      - var max = Math.max.apply(Math,arr)
  - bind
    - 返回原函数拷贝，改变this指向，不执行
      
      var o = {
      name: ‘andy’
      };
      
      function fn(a, b) {
      console.log(this);
      console.log(a + b);
      };
      var f = fn.bind(o, 1, 2); //此处的f是bind返回的新函数
      f();//调用新函数 this指向的是对象o 参数使用逗号隔开
严格模式

JavaScript 除了提供正常模式外，还提供了严格模式（strict mode）
JavaScript变体的一种方式，即在严格的条件下运行 JS 代码。

严格模式在 IE10 以上版本的浏览器中才会被支持，旧版本浏览器中会被忽略。

严格模式对正常的 JavaScript 语义做了一些更改：
1.消除了 Javascript 语法的一些不合理、不严谨之处，减少了一些怪异行为。
2.消除代码运行的一些不安全之处，保证代码运行的安全。
3.提高编译器效率，增加运行速度。
4.禁用了在 ECMAScript 的未来版本中可能会定义的一些语法，为未来新版本的 Javascript 做好铺垫。比如一些保留字如：class,enum,export, extends, import, super 不能做变量名
- 开启严格模式“use strict”; (或 ‘use strict’; )
- 脚本严格模式
  - 有的 script 脚本是严格模式，有的 script 脚本是正常模式，这样不利于文件合并，所以可以将整个脚本文件放在一个立即执行的匿名函数之中。这样独立创建一个作用域而不影响其他
    script 脚本文件。
    
    (function (){
    //在当前的这个自调用函数中有开启严格模式，当前函数之外还是普通模式
    “use strict”;
    var num = 10;
    function fn() {}
    })();
    //或者
- 函数严格模式
  - 给某个函数开启严格模式，需要把“use strict”; (或 ‘use strict’; ) 声明放在函数体所有语句之前。
- 严格模式中的变化
  
  ‘use strict’
  num = 10
  
  console.log(num)//严格模式后使用未声明的变量
  
  var num2 = 1;
  
  delete num2;//严格模式不允许删除变量
  
  function fn() {
  console.log(this); // 严格模式下全局作用域中函数中的 this 是 undefined
  }
  
  fn();
  
  function Star() {
  this.sex = ‘男’;
  }
  // Star();严格模式下,如果构造函数不加new调用, this 指向的是undefined 如果给他赋值则会报错.
  var ldh = new Star();
  
  console.log(ldh.sex);
  
  setTimeout(function() {
  console.log(this); //严格模式下，定时器 this 还是指向 window
  }, 2000);
  - 1.不允许使用未声明变量
  - 2.不允许删除变量
  - 3.构造函数不加new调用，this指向undefined
  - 4.普通函数this指向unde
  - 5.定时器还是指向window
函数进阶
- 高阶函数
  - 函数可以作为参数和返回值
- 闭包
  - 在一个函数内部，有权调用另一个函数作用域中的变量
    
    function fn1(){ // fn1 就是闭包函数
    var num = 10;
    function fn2(){
    console.log(num); // 10
    }
    fn2()
    }
    fn1();
  - 作用：延伸变量作用范围
    
    function fn() {
      var num = 10;
      function fun() {
        console.log(num);
    }
      return fun;
    }
    var f = fn();
    f();
- 递归
  - 在一个函数内部，再调用自身
  - 应用
    - 1.求阶乘
      
      /利用递归函数求1~n的阶乘 1 * 2 * 3 * 4 * …n
      function fn(n) {
         if (n == 1) { //结束条件
          return 1;
         }
         return n * fn(n - 1);
      }
      console.log(fn(3));
- 拷贝
  - 浅拷贝
    - 只负责表层数据，深层的数据复制不到，比如属性是一个对象，就只复制对象的地址，原对象修改这个对象属性，新复制的对象也会跟着改变
      
      // 浅拷贝只是拷贝一层, 更深层次对象级别的只拷贝引用.
              // 深拷贝拷贝多层, 每一级别的数据都会拷贝.
              var obj = {
                  id: 1,
                  name: ‘andy’,
                  msg: {
                      age: 18
                  }
              };
              var o = {};
              // for (var k in obj) {
              //     // k 是属性名   obj[k] 属性值
              //     o[k] = obj[k];
              // }
              // console.log(o);
              // o.msg.age = 20;
              // console.log(obj);
      
      console.log(’--------------’);
              Object.assign(o, obj);
              console.log(o);
              o.msg.age = 20;
              console.log(obj);
  - 深拷贝
    - 会把对象每一层的数据都给复制，原理是使用递归，不断递归到属性值为数值型，然后复制，返回。
      
      // 深拷贝拷贝多层, 每一级别的数据都会拷贝.
              var obj = {
                  id: 1,
                  name: ‘andy’,
                  msg: {
                      age: 18
                  },
                  color: [‘pink’, ‘red’]
              };
              var o = {};
              // 封装函数
              function deepCopy(newobj, oldobj) {
                  for (var k in oldobj) {
                      // 判断我们的属性值属于那种数据类型
                      // 1. 获取属性值  oldobj[k]
                      var item = oldobj[k];
                      // 2. 判断这个值是否是数组
                      if (item instanceof Array) {
                          newobj[k] = [];
                          deepCopy(newobj[k], item)
                      } else if (item instanceof Object) {
                          // 3. 判断这个值是否是对象
                          newobj[k] = {};
                          deepCopy(newobj[k], item)
                      } else {
                          // 4. 属于简单数据类型
                          newobj[k] = item;
                      }
      
      }
              }
              deepCopy(o, obj);
              console.log(o);
      
      var arr = [];
              console.log(arr instanceof Object);
              o.msg.age = 20;
              console.log(obj);

js正则表达式

1.创建
- 1. 通过调用 RegExp 对象的构造函数创建
    var 变量名 = new RegExp(/表达式/);
- 1. 通过字面量创建
    var 变量名 = /表达式/;
2.使用
- test() 正则对象方法，用于检测字符串是否符合该规则，该对象会返回 true 或 false，其参数是测试字符串。
  regexObj.test(str)
- replace 替换
  stringObject.replace(regexp/substr,replacement)
- match 查找
  stringObject.match(regexp/substr)
3.正则表达式参数
- /表达式/[switch]
  switch(也称为修饰符) 按照什么样的模式来匹配. 有三种值：
  -  g：全局匹配
     i：忽略大小写
     gi：全局匹配 + 忽略大小写

es6

概述
- ES 的全称是 ECMAScript , 它是由 ECMA 国际标准化组织,制定的一项脚本语言的标准化规范。
- ES6 实际上是一个泛指，泛指 ES2015 及后续的版本。
- 每一次标准的诞生都意味着语言的完善，功能的加强。JavaScript语言本身也有一些令人不满意的地方。
   变量提升特性增加了程序运行时的不可预测性
   语法过于松散，实现相同的功能，不同的人可能会写出不同的代码
ES6 的新增语法
- let
  - let声明的变量只在所处于的块级有效
    - if (true) {
      let a = 10; }
      console.log(a) // a is not defined
    - 注意：使用let关键字声明的变量才具有块级作用域，使用var声明的变量不具备块级作用域特性。
  - 不存在变量提升
    - console.log(a); // a is not defined
      let a = 20;
  - 暂时性死区
    - var tmp = 123;
      if (true) {
      tmp = ‘abc’;
      let tmp;
      }
- const
  - 作用：声明常量，常量就是值（内存地址）不能变化的量。
  - 具有块级作用域
    - if (true) {
      const a = 10; }
      console.log(a) // a is not defined
  - 声明常量时必须赋值
    - const PI; // Missing initializer in const declaration
  - 常量赋值后，值不能修改
    - const PI = 3.14;
      PI = 100; // Assignment to constant variable.
      const ary = [100, 200];
      ary[0] = ‘a’;
      ary[1] = ‘b’;
      console.log(ary); // [‘a’, ‘b’];
      ary = [‘a’, ‘b’]; // Assignment to constant variable.
- let、const、var 的区别
  - 1. 使用 var 声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象。 2. 使用 let 声明的变量，其作用域为该语句所在的代码块内，不存在变量提升。 3. 使用 const 声明的是常量，在后面出现的代码中不能再修改该常量的值。
- 解构赋值
  - ES6中允许从数组中提取值，按照对应位置，对变量赋值。对象也可以实现解构。
  - 数组解构
    - let [a, b, c] = [1, 2, 3];
      console.log(a)
      console.log(b)
      console.log©
    - 如果解构不成功，变量的值为undefined。
      let [foo] = [];
      let [bar, foo] = [1]
  - 对象解构
    - let person = { name: ‘zhangsan’, age: 20 };
      let { name, age } = person;
      console.log(name); // ‘zhangsan’
      console.log(age); // 20
    - let {name: myName, age: myAge} = person; // myName myAge 属于别名
      console.log(myName); // ‘zhangsan’
      console.log(myAge); // 20
- 箭头函数
  - ES6中新增的定义函数的方式。
    - () => {}
      const fn = () => {}
  - 函数体中只有一句代码，且代码的执行结果就是返回值，可以省略大括号
    - function sum(num1, num2) {
      return num1 + num2; }
      const sum = (num1, num2) => num1 + num2;
  - 如果形参只有一个，可以省略小括号
    - function fn (v) {
      return v; }
      const fn = v => v;
  - 箭头函数不绑定this关键字，箭头函数中的this，指向的是函数定义位置的上下文this。
    - const obj = { name: ‘张三’}
      function fn () {
      console.log(this);
      return () => {
      console.log(this)
      } }
      const resFn = fn.call(obj);
      resFn();
- 剩余参数
  - 剩余参数语法允许我们将一个不定数量的参数表示为一个数组。
    - function sum (first, …args) {
      console.log(first); // 10
      console.log(args); // [20, 30]
      }
      sum(10, 20, 30)
  - 剩余参数和解构配合使用
    - let students = [‘wangwu’, ‘zhangsan’, ‘lisi’];
      let [s1, …s2] = students;
      console.log(s1); // ‘wangwu’
      console.log(s2); // [‘zhangsan’, ‘lisi’]
- ES6 的内置对象扩展
  - Array
    - Array 的扩展方法
      - 扩展运算符（展开语法）
        
        扩展运算符可以将数组或者对象转为用逗号分隔的参数序列。
        let ary = [1, 2, 3];
        …ary // 1, 2, 3
        console.log(…ary); // 1 2 3
        console.log(1, 2, 3)
      - 扩展运算符可以应用于合并数组。
        
        // 方法一
        let ary1 = [1, 2, 3];
        let ary2 = [3, 4, 5];
        let ary3 = […ary1, …ary2];
        // 方法二
        ary1.push(…ary2);
      - 将类数组或可遍历对象转换为真正的数组
        
        let oDivs = document.getElementsByTagName(‘div’);
        oDivs = […oDivs];
    - 构造函数方法：Array.from()
      - 将类数组或可遍历对象转换为真正的数组
        
        let arrayLike = {
        ‘0’: ‘a’,
        ‘1’: ‘b’,
        ‘2’: ‘c’,
        length: 3
        };
        let arr2 = Array.from(arrayLike); // [‘a’, ‘b’, ‘c’]
      - 方法还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组。
        
        let arrayLike = {
        “0”: 1,
        “1”: 2,
        “length”: 2
        }
        let newAry = Array.from(aryLike, item => item *2)
    - find()
      - 用于找出第一个符合条件的数组成员，如果没有找到返回undefined
        
        let ary = [{
        id: 1,
        name: '张三‘
        }, {
        id: 2,
        name: '李四‘
        }];
        let target = ary.find((item, index) => item.id == 2);
    - findIndex()
      - 用于找出第一个符合条件的数组成员的位置，如果没有找到返回-1
        
        let ary = [1, 5, 10, 15];
        let index = ary.findIndex((value, index) => value > 9);
        console.log(index); // 2
    - includes()
      - 表示某个数组是否包含给定的值，返回布尔值。
        
        [1, 2, 3].includes(2) // true
        [1, 2, 3].includes(4) // false
  - String 的扩展方法
    - 模板字符串
      - ES6新增的创建字符串的方式，使用反引号定义。
        let name = zhangsan;
      - 模板字符串中可以解析变量。
        
        let name = ‘张三’;
        let sayHello = hello,my name is ${name}; // hello, my name is zhangsan
      - 模板字符串中可以换行
        
        let result = {
        name: ‘zhangsan’,
        age: 20,
        sex: ‘男’ }
        let html = `
        
        $r e s u l t . n a m e < / s p a n > < s p a n >$ {result.age}
        ${result.sex}
        `;
      - 在模板字符串中可以调用函数。
        
        const sayHello = function () {
        return ‘哈哈哈哈追不到我吧我就是这么强大’;
        };
        let greet = ${sayHello()} 哈哈哈哈;
        console.log(greet); // 哈哈哈哈追不到我吧我就是这么强大哈哈哈哈
    - 实例方法：startsWith() 和 endsWith()
      -  startsWith()：表示参数字符串是否在原字符串的头部，返回布尔值
         endsWith()：表示参数字符串是否在原字符串的尾部，返回布尔值
        
        let str = ‘Hello world!’;
        str.startsWith(‘Hello’) // true
        str.endsWith(’!’) // true
    - 实例方法：repeat()
      - repeat方法表示将原字符串重复n次，返回一个新字符串。
        ‘x’.repeat(3) // “xxx”
        ‘hello’.repeat(2) // “hellohello”
  - Set 数据结构
    - ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。
    - Set本身是一个构造函数，用来生成 Set 数据结构。
      const s = new Set();
    - Set函数可以接受一个数组作为参数，用来初始化。
      const set = new Set([1, 2, 3, 4, 4]);
    - 实例方法
      -  add(value)：添加某个值，返回 Set 结构本身
         delete(value)：删除某个值，返回一个布尔值，表示删除是否成功
         has(value)：返回一个布尔值，表示该值是否为 Set 的成员
         clear()：清除所有成员，没有返回值
        
        const s = new Set();
        s.add(1).add(2).add(3); // 向 set 结构中添加值
        s.delete(2) // 删除 set 结构中的2值
        s.has(1) // 表示 set 结构中是否有1这个值返回布尔值
        s.clear() // 清除 set 结构中的所有值
    - 遍历
      - Set 结构的实例与数组一样，也拥有forEach方法，用于对每个成员执行某种操作，没有返回值。
        s.forEach(value => console.log(value))

插件

JS 插件是 js 文件，它遵循一定规范编写，方便程序展示效果，拥有特定功能且方便调用。如轮播图和瀑布流插件。

特点：它一般是为了解决某个问题而专门存在，其功能单一，并且比较小。
我们以前写的animate.js 也算一个最简单的插件

移动端常用插件

fastclick 插件解决 300ms 延迟。使用延时
GitHub官网地址： https://github.com/ftlabs/fastclick
- if (‘addEventListener’ in document) {
  document.addEventListener(‘DOMContentLoaded’, function() {
  FastClick.attach(document.body);
  }, false);
  }
Swiper 插件
- 中文官网地址： https://www.swiper.com.cn/

引入插件相关文件。
按照规定语法使用

 superslide： http://www.superslide2.com/
 iscroll： https://github.com/cubiq/iscroll

插件的使用总结

1. 确认插件实现的功能

去官网查看使用说明
下载插件
打开demo实例文件，查看需要引入的相关文件，并且引入
复制demo实例文件中的结构html，样式css以及js代码

数据可视化

echarts插件