2021-01-12

admin管理员组

文章数量:1588143

js

js基础

ECMAScript

• ECMAScript 是由ECMA 国际（ 原欧洲计算机制造商协会）进行标准化的一门编程语言，这种语言在万维网上应用广
  泛，它往往被称为 JavaScript 或 JScript，但实际上后两者是 ECMAScript 语言的实现和扩展。

• ECMAScript：ECMAScript 规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准。

• 更多参看MDN: https://developer.mozilla/zh-CN/docs/Web/JavaScript/JavaScript_technologies_overview

• js书写位置

  • 1. 行内式 JS
       
        可以将单行或少量 JS 代码写在HTML标签的事件属性中（以 on 开头的属性），如：onclick
        注意单双引号的使用：在HTML中我们推荐使用双引号, JS 中我们推荐使用单引号
        可读性差， 在html中编写JS大量代码时，不方便阅读；
        引号易错，引号多层嵌套匹配时，非常容易弄混；
        特殊情况下使用
  • 2. 内嵌 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.十六进制数字序列范围：09以及AF
          var num = 0xA;

          • 现阶段我们只需要记住，在JS中八进制前面加0，十六进制前面加 0x

        • JavaScript中数值的最大和最小值
          alert(Number.MAX_VALUE); // 1.7976931348623157e+308
          alert(Number.MIN_VALUE); // 5e-324

        • 3. 数字型三个特殊值
             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. 获得盒子当前位置

2. 让盒子在当前位置加上1个移动距离

3. 利用定时器不断重复这个操作

4. 加一个结束定时器的条件

5. 注意此元素需要添加定位，才能使用element.style.left

   • 移动盒子前提，盒子是可以使用top和left属性，也就是绝对定位和固定定位

     • 动画函数简单封装
       注意函数需要传递2个参数，动画对象和移动到的距离。

     • 动画函数给不同元素记录不同定时器
       如果多个元素都使用这个动画函数，每次都要var 声明定时器。我们可以给不同的元素使用不同的定时器（自
       己专门用自己的定时器）。
       核心原理：利用 JS 是一门动态语言，可以很方便的给当前对象添加属性。

     • 缓动效果原理

       • 步骤

         • 缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢停下来
         • 思路：
         • 1. 让盒子每次移动的距离慢慢变小，速度就会慢慢落下来。
         • 2. 核心算法： (目标值 - 现在的位置 ) / 10 做为每次移动的距离 步长
         • 3. 停止的条件是： 让当前盒子位置等于目标位置就停止定时器
         • 4. 注意步长值需要取整

       • 动画函数多个目标值之间移动

         • 可以让动画函数从 800 移动到 500。
           当我们点击按钮时候，判断步长是正值还是负值

6. 如果是正值，则步长 往大了取整

7. 如果是负值，则步长 向小了取整

   • 无缝滚动

     • ③ 图片无缝滚动原理
       ④ 把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 实例用来处理日期和时间

        • 1. 获取当前时间必须实例化
             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);

      • 注意

        • 1. 构造函数约定首字母大写。
        • 2. 函数内的属性和方法前面需要添加 this ，表示当前对象的属性和方法。
        • 3. 构造函数中不需要 return 返回结果。
        • 4. 当我们创建对象的时候，必须用 new 来调用构造函数。

      • new 在执行时会做四件事情：

        • 1. 在内存中创建一个新的空对象。
        • 2. 让 this 指向这个新的对象。
        • 3. 执行构造函数里面的代码，给这个新对象添加属性和方法。
        • 4. 返回这个新对象（所以构造函数里面不需要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 )。

1. API 是为我们程序员提供的一个接口，帮助我们实现某种功能，我们会使用就可以了，不必纠结内部如何实现
2. Web API 主要是针对于浏览器提供的接口，主要针对于浏览器做交互效果。
3. Web API 一般都有输入和输出（函数的传参和返回值），Web API 很多都是方法（函数）
4. 学习 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()获取到是动态集合，即：当页面增加了标签，这个集合中也就增加了元素。

      • 3. 如果获取不到元素,则返回为空的伪数组(因为获取不到对象)

      • 还可以获取某个元素(父元素)内部所有指定标签名的子元素.
        element.getElementsByTagName(‘标签名’);
        注意：父元素必须是单个对象(必须指明是哪一个元素对象). 获取的时候不包括父元素自己。

    •  通过 HTML5 新增的方法获取

      • 1. document.getElementsByClassName(‘类名’)；// 根据类名返回元素对象集合

2. document.querySelector(‘选择器’); // 根据指定选择器返回第一个元素对象

3. document.querySelectorAll(‘选择器’); // 根据指定选择器返回

   • 注意：
     querySelector 和 querySelectorAll里面的选择器需要加符号,比如:document.querySelector(’#nav’);

     •  特殊元素获取

       • 获取body元素

4. doucumnet.body // 返回body元素对象

   • 获取html元素

5. document.documentElement // 返回html元素对象

   • 事件

     • JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。
       简单理解： 触发— 响应机制。
       网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击某按钮时产生一个事件，然后去执行某些操作。

     • 事件三要素

       • 1. 事件源 （谁）

6. 事件类型 （什么事件）

7. 事件处理程序 （做啥）

      <body>
        <button id="btn">唐伯虎</button>
        <script>
          // 点击一个按钮，弹出对话框
          // 1. 事件是有三部分组成 事件源 事件类型 事件处理程序  我们也称为事件三要素
          //(1) 事件源 事件被触发的对象  谁 按钮
          var btn = document.getElementById('btn');
          //(2) 事件类型 如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下
          //(3) 事件处理程序 通过一个函数赋值的方式 完成
          btn.onclick = function() {
            alert('点秋香');
          }
        </script>
      </body>
   

   • 事件高级

     • 注册事件或者绑定事件

       • 传统注册方式 方法监听注册方式

    利用 on 开头的事件 onclick
    <button οnclick=“alert(‘hi~’)”>
    btn.onclick = function() {}
    特点： 注册事件的唯一性
    同一个元素同一个事件只能设置一个处理函数，最
   后注册的处理函数将会覆盖前面注册的处理函数

    		- 传统方式绑定多个实践会覆盖前面的事件处理函数
   
    	- 方法监听注册方式                                                 
   

    w3c 标准 推荐方式
    addEventListener() 它是一个方法
    IE9 之前的 IE 不支持此方法，可使attachEvent() 代替
    特点：同一个元素同一个事件可以注册多个监听器
    按注册顺序依次执行

    - 事件监听
   
      button>传统注册事件</button>
      <button>方法监听注册事件</button>
      <button>ie9 attachEvent</button>
      <script>
        var btns = document.querySelectorAll('button');
        // 1. 传统方式注册事件
        btns[0].onclick = function() {
          alert('hi');
        }
        btns[0].onclick = function() {
            alert('hao a u');
          }
        // 2. 事件侦听注册事件 addEventListener 
        // (1) 里面的事件类型是字符串 必定加引号 而且不带on
        // (2) 同一个元素 同一个事件可以添加多个侦听器（事件处理程序）
        btns[1].addEventListener('click', function() {
          alert(22);
        })
        btns[1].addEventListener('click', function() {
            alert(33);
        })
        // 3. attachEvent ie9以前的版本支持
        btns[2].attachEvent('onclick', function() {
          alert(11);
        })
   
    	- #### addEventListener()事件监听（IE9以后支持）
   

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Lc9jn8FR-1610384771431)(images/1551165364122.png)]

eventTarget.addEventListener()方法将指定的监听器注册到 eventTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数

				- 该方法接收三个参数：

 type：事件类型字符串，比如 click 、mouseover ，注意这里不要带 on
 listener：事件处理函数，事件发生时，会调用该监听函数
 useCapture：可选参数，是一个布尔值，默认是 false。学完 DOM 事件流后，我们再进一步学习

			- attachEvent 事件监听方式

eventTarget.attachEvent(eventNameWithOn, callback)
eventTarget.attachEvent()方法将指定的监听器注册到 eventTarget（目标对象） 上，当该对象触
发指定的事件时，指定的回调函数就会被执行。

				- 该方法接收两个参数：

 eventNameWithOn：事件类型字符串，比如 onclick 、onmouseover ，这里要带 on
 callback： 事件处理函数，当目标触发事件时回调函数被调用
注意：IE8 及早期版本支持

			- 注册事件兼容性解决方案

				- function addEventListener(element, eventName, fn) {

// 判断当前浏览器是否支持 addEventListener 方法
if (element.addEventListener) {
element.addEventListener(eventName, fn); // 第三个参数 默认是false
} else if (element.attachEvent) {
element.attachEvent(‘on’ + eventName, fn);
} else {
// 相当于 element.onclick = fn;
element[‘on’ + eventName] = fn;
}
兼容性处理的原则： 首先照顾大多数浏览器，再处理特殊浏览器

		- 删除事件的方式

			- 1. 传统注册方式

eventTarget.onclick = null;
- 2. 方法监听注册方式
① eventTarget.removeEventListener(type, listener[, useCapture]);
② eventTarget.detachEvent(eventNameWithOn, callback);
- 删除事件兼容性解决方案

				- function removeEventListener(element, eventName, fn) {

// 判断当前浏览器是否支持 removeEventListener 方法
if (element.removeEventListener) {
element.removeEventListener(eventName, fn); // 第三个参数 默认是false
} else if (element.detachEvent) {
element.detachEvent(‘on’ + eventName, fn);
} else {
element[‘on’ + eventName] = null;
}

		- DOM事件流

			- 事件流描述的是从页面中接收事件的顺序。

事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即 DOM 事件流。
比如我们给一个div 注册了点击事件：
DOM 事件流分为3个阶段：

1. 捕获阶段

2. 当前目标阶段

3. 冒泡阶段

   •  事件冒泡： IE 最早提出，事件开始时由最具体的元素接收，然后逐级向上传播到到 DOM 最顶层节点的过程。

     •  事件捕获： 网景最早提出，由 DOM 最顶层节点开始，然后逐级向下传播到到最具体的元素接收的过程。

       • 注意

         • 1. JS 代码中只能执行捕获或者冒泡其中的一个阶段。
           • 2. onclick 和 attachEvent 只能得到冒泡阶段。
           • 3. addEventListener(type, listener[, useCapture])第三个参数如果是 true，表示在事件捕获阶段调用事件处理程序；如果是 false（不写默认就是false），表示在事件冒泡阶段调用事件处理
                程序
           • 4. 实际开发中我们很少使用事件捕获，我们更关注事件冒泡。
           • 5. 有些事件是没有冒泡的，比如 onblur、onfocus、onmouseenter、onmouseleave
           • 6. 事件冒泡有时候会带来麻烦，有时候又会帮助很巧妙的做某些事件，我们后面讲解。

       • 事件对象

         • eventTarget.onclick = function(event) {}
           eventTarget.addEventListener(‘click’, function(event) {}）
           // 这个 event 就是事件对象，我们还喜欢的写成 e 或者 evt

           • 这个 event 是个形参，系统帮我们设定为事件对象，不需要传递实参过去。
             当我们注册事件时， event 对象就会被系统自动创建，并依次传递给事件监听器（事件处理函数）

         • 简单理解：事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象event，它有很多属性和方法。

           • 比如：

4. 谁绑定了这个事件。

5. 鼠标触发事件的话，会得到鼠标的相关信息，如鼠标位置。

6. 键盘触发事件的话，会得到键盘的相关信息，如按了哪个键。

   • 事件对象的兼容性方案

     • 事件对象本身的获取存在兼容问题：

7. 标准浏览器中是浏览器给方法传递的参数，只需要定义形参 e 就可以获取到。

8. 在 IE6~8 中，浏览器不会给方法传递参数，如果需要的话，需要到 window.event 中获取查找。
   解决:
   e = e || window.event;

    			- <div>123</div>
   

    	- 事件对象的常见属性和方法
   
    		- -  this 是事件绑定的元素（绑定这个事件处理函数元素） 。
   

• e.target 是事件触发的元素。
  - 常情况下terget 和 this是一致的，
  但有一种情况不同，那就是在事件冒泡时（父子元素有相同事件，单击子元素，父元素的事件处理函数也会被触发执行），
  这时候this指向的是父元素，因为它是绑定事件的元素对象，
  而target指向的是子元素，因为他是触发事件的那个具体元素对象。
  - 阻止默认行为

    		  <a href="http://www.baidu">百度</a>
    		    <script>
    		      // 2. 阻止默认行为 让链接不跳转 
    		      var a = document.querySelector('a');
    		      a.addEventListener('click', function(e) {
    		         e.preventDefault(); // dom 标准写法
    		      });
    		      // 3. 传统的注册方式
    		      a.onclick = function(e) {
    		        // 普通浏览器 e.preventDefault(); 方法
    		        e.preventDefault();
    		        // 低版本浏览器 ie678 returnValue 属性
    		        e.returnValue = false;
    		        // 我们可以利用return false 也能阻止默认行为 没有兼容性问题
    		        return false;
    		      }
    		    </script>
  
    	- 阻止事件冒泡
  
    		-  标准写法：利用事件对象里面的 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 可以实现拖动元素
  

2. 但是拖动元素需要当前手指的坐标值 我们可以使用 targetTouches[0] 里面的pageX 和 pageY

3. 移动端拖动的原理： 手指移动中，计算出手指移动的距离。然后用盒子原来的位置 + 手指移动的距离

4. 手指移动的距离： 手指滑动中的位置 减去 手指刚开始触摸的位置
   拖动元素三步曲：
   （1） 触摸元素 touchstart： 获取手指初始坐标，同时获得盒子原来的位置
   （2） 移动手指 touchmove： 计算手指的滑动距离，并且移动盒子
   （3） 离开手指 touchend:
   注意： 手指移动也会触发滚动屏幕所以这里要阻止默认的屏幕滚动 e.preventDefault();

    		- 移动端 click 事件会有 300ms 的延时，原因是移动端屏幕双击会缩放(double tap to zoom) 页面。
   
    			- 解决方案：
   

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

​ 原理就是：

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

代码如下:

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

function tap (obj, callback) {
var isMove = false;
var startTime = 0; // 记录触摸时候的时间变量
obj.addEventListener(‘touchstart’, function (e) {
startTime = Date.now(); // 记录触摸时间
});
obj.addEventListener(‘touchmove’, function (e) {
isMove = true; // 看看是否有滑动，有滑动算拖拽，不算点击
});
obj.addEventListener(‘touchend’, function (e) {
if (!isMove && (Date.now() - startTime) < 150) { // 如果手指触摸和离开时间小于150ms 算点击
callback && callback(); // 执行回调函数
}
isMove = false; // 取反 重置
startTime = 0;
});
}
//调用
tap(div, function(){ // 执行代码 });

		-  load 事件

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

1. a标签的超链接

2. F5或者刷新按钮（强制刷新）

3. 前进后退按钮
   但是 火狐中，有个特点，有个“往返缓存”，这个缓存中不仅保存着页面数据，还保存了DOM和JavaScript的
   状态；实际上是将整个页面都保存在了内存里。
   所以此时后退按钮不能刷新页面。
   此时可以使用 pageshow事件来触发。，这个事件在页面显示时触发，无论页面是否来自缓存。在重新加载页
   面中，pageshow会在load事件触发后触发；根据事件对象中的persisted来判断是否是缓存中的页面触发的
   pageshow事件，注意这个事件给window添加。

   • 操作元素

     • JavaScript 的 DOM 操作可以改变网页内容、结构和样式，我们可以利用 DOM 操作元素来改变元素里面的内
       容 、属性等。注意以下都是属性

     • 改变元素内容

       • element.innerText
         从起始位置到终止位置的内容,

         • 但它去除 html 标签， 同时空格和换行也会去掉

       • element.innerHTML
         起始位置到终止位置的全部内容，

         • 包括 html 标签，同时保留空格和换行

     • 常用元素的属性操作

       • 1. innerText、innerHTML 改变元素内容

4. src、href

5. 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 修改元素的大小、颜色、位置等样式。

1. element.style 行内样式操作

2. element.className 类名样式操作

   • 注意：
     1.JS 里面的样式采取驼峰命名法 比如 fontSize、backgroundColor
     2.JS 修改 style 样式操作，产生的是行内样式，CSS 权重比较高

     • 通过操作className属性

     • 排他操作

       • 子主题 2
       • 1. 所有元素全部清除样式（干掉其他人）

3. 给当前元素设置样式 （留下我自己）

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

      button>按钮1</button>
        <button>按钮2</button>
        <button>按钮3</button>
        <button>按钮4</button>
        <button>按钮5</button>
        <script>
          // 1. 获取所有按钮元素
          var btns = document.getElementsByTagName('button');
          // btns得到的是伪数组 里面的每一个元素 btns[i]
          for (var i = 0; i < btns.length; i++) {
            btns[i].onclick = function() {
              // (1) 我们先把所有的按钮背景颜色去掉 干掉所有人
              for (var i = 0; i < btns.length; i++) {
                btns[i].style.backgroundColor = '';
              }
              // (2) 然后才让当前的元素背景颜色为pink 留下我自己
              this.style.backgroundColor = 'pink';
      
            }
          }
        </script>
   

   • 属性值

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

    element.getAttribute(‘属性’);

    		- 区别：
   

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

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

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

    		- 区别：
   

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

    - 3. 移出属性
   
    	-  element.removeAttribute('属性');
   
    - H5自定义属性
   
    	- 自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。
    	- 有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性
   
    		- H5规定自定义属性data-开头做为属性名并且赋值。
    		- 比如 <div data-index=“1”></div>
   

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

    	-  获取H5自定义属性
   
    		- 1. 兼容性获取 element.getAttribute(‘data-index’);
   

5. H5新增 element.dataset.index 或者 element.dataset[‘index’] ie 11才开始支持

    		- <div getTime="20" data-index="2" data-list-name="andy"></div>
   

   • 操作节点

     • 网页中的所有内容都是节点（标签、属性、文本、注释等），在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() 方法返回调用该方法的节点的一个副本。
   - 注意：

6. 如果括号参数为空或者为 false ，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点。

7. 如果括号参数为 true ，则是深度拷贝，会复制节点本身以及里面所有的子节点。

   • 替换节点

     • parentNode.replaceChild(newChild, oldChild);
       用指定的节点替换当前节点的一个子节点，并返回被替换掉的节点。

       • 总结

         • 创建元素总结

           •  document.write()
              innerHTML
              document.createElement()
             区别

8. document.write 是直接将内容写入页面的内容流，会导致页面全部重绘

9. innerHTML 是将内容写入某个 DOM 节点，不会导致页面全部重绘

10. innerHTML 复制节点的时候，不会复制原先节点的事件，会存在内存泄露问题

11. 如果页面创建元素很多，建议使用 innerHTML 因其效率更高（不要拼接字符串，采取数组形式拼接）

12. 如果页面创建元素较少，建议使用 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 可以得到，如果大于等于这个值，就可以让盒子固定定位了

    		- 页面被卷去的头部兼容性解决方案
    

    需要注意的是，页面被卷去的头部，有兼容性问题，因此被卷去的头部通常有如下几种写法：

13. 声明了 DTD，使用 document.documentElement.scrollTop

14. 未声明 DTD，使用 document.body.scrollTop

15. 新方法 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 访问浏览器窗口的一个接口。
      • 2. 它是一个全局对象。定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法。在调用的时候可以省略 window，前面学习的对话框都属于 window 对象方法，如 alert()、prompt() 等。

      • 注意：window下的一个特殊属性 window.name

      • window 对象的常见事件

        • 窗口加载事件
          window.onload = function(){}
          或者
          window.addEventListener(“load”,function(){});

          • window.onload 是窗口 (页面）加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS
            文件等), 就调用的处理函数。
            注意：

1. 有了 window.onload 就可以把 JS 代码写到页面元素的上方，因为 onload 是等页面内容全部加载完毕， 再去执行处理函数。

2. window.onload 传统注册事件方式 只能写一次，如果有多个，会以最后一个 window.onload 为准。

3. 如果使用 addEventListener 则没有限制

   • 窗口加载事件
     document.addEventListener(‘DOMContentLoaded’,function(){})
     DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等。

        	- 如果页面的图片很多的话, 从用户访问到onload触发可能需要较长的时间, 交互效果就不能实现，必然影响用
     

     户的体验，此时用 DOMContentLoaded 事件比较合适。

        - 调整窗口大小事件
     

     window.onresize = function(){}
     window.addEventListener(“resize”,function(){});

        	- window.onresize 是调整窗口大小加载事件, 当触发时就调用的处理函数。
     

     注意：

4. 只要窗口大小发生像素变化，就会触发这个事件。

5. 我们经常利用这个事件完成响应式布局。 window.innerWidth 当前屏幕的宽度

   • 定时器

     •  setTimeout()

       • window.setTimeout(调用函数, [延迟的毫秒数]);
         setTimeout() 方法用于设置一个定时器，该定时器在定时器到期后执行调用函数。
         注意：

6. window 可以省略。

7. 这个调用函数可以直接写函数，或者写函数名或者采取字符串‘函数名()'三种形式。第三种不推荐

8. 延迟的毫秒数省略默认是 0，如果写，必须是毫秒。

9. 因为定时器可能有很多，所以我们经常给定时器赋值一个标识符
   - setTimeout() 这个调用函数我们也称为回调函数 callback
   普通函数是按照代码顺序直接调用。
   而这个函数，需要等待时间，时间到了才去调用这个函数，因此称为回调函数。
   简单理解： 回调，就是回头调用的意思。上一件事干完，再回头再调用这个函数。
   以前我们讲的 element.onclick = function(){} 或者 element.addEventListener(“click”, fn); 里面的 函数也是回调函数
   - 停止 setTimeout() 定时器
   window.clearTimeout(timeoutID)
   clearTimeout()方法取消了先前通过调用 setTimeout() 建立的定时器。
   注意：

10. window 可以省略。

11. 里面的参数就是定时器的标识符 。

    •  setInterval()

      • setInterval() 定时器
        window.setInterval(回调函数, [间隔的毫秒数]);
        setInterval() 方法重复调用一个函数，每隔这个时间，就去调用一次回调函数。

        		- 注意：
        

12. window 可以省略。

13. 这个调用函数可以直接写函数，或者写函数名或者采取字符串 ‘函数名()’ 三种形式。

14. 间隔的毫秒数省略默认是 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/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. 异步任务（回调函数）放入任务队列中。

3. 一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行
   - 由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环（ 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/
  版本：  1x ：兼容 IE 678 等低版本浏览器， 官网不再更新
   2x ：不兼容 IE 678 等低版本浏览器， 官网不再更新
   3x ：不兼容 IE 678 等低版本浏览器， 是官方主要更新维护的版本
  各个版本的下载：https://code.jquery/
• 1. 引入 jQuery 文件

2. 使用即可

• jQuery 的入口函数

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

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

• jQuery 的顶级对象 $

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

• jQuery 对象和 DOM 对象

  • 1. 用原生 JS 获取来的对象就是 DOM 对象

2. jQuery 方法获取的元素就是 jQuery 对象。
3. jQuery 对象本质是： 利用$对DOM 对象包装后产生的对象（伪数组形式存储）。
   注意：
   只有 jQuery 对象才能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 方法。

   • DOM 对象与 jQuery 对象之间是可以相互转换的。
     因为原生js 比 jQuery 更大，原生的一些属性和方法 jQuery没有给我们封装. 要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用

     • 1. DOM 对象转换为 jQuery 对象： $(DOM对象)
          $(‘div’)
     • 2. 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”);
- ​ 注意：

1. 设置类样式方法比较适合样式多时操作，可以弥补css()的不足。
2. 原生 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(’‘属性’’)

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

• 设置或获取元素自定义属性值 attr()

  • 1. 获取属性语法
       attr(’‘属性’’) // 类似原生 getAttribute()

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

• 数据缓存 data()

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

2. 获取数据语法
   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. 里面的回调函数有2个参数： index 是每个元素的索引号; demEle 是每个DOM元素对象，不是jquery对象
3. 所以要想使用jquery方法，需要给这个dom元素转换为jquery对象 $(domEle)

• 遍历元素

  • 语法2： $.each(object，function (index, element) { xxx; }）
  • 1. $.each()方法可用于遍历任何对象。主要用于数据处理，比如数组，对象
  • 2. 里面的函数有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 });

  • 2. position() 获取元素偏移
    • ① position() 方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准
    • ② 该方法有2个属性 left、top。position().top 用于获取距离定位父级顶部的距离，position().left 用于获取距离定位父级左侧的距离
    • ③ 该方法只能获取。
  • 3. 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" 。

2. selector: 元素的子元素选择器 。

3. 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 浅拷贝

2. target: 要拷贝的目标对象

3. object1:待拷贝到第一个对象的对象。

4. objectN:待拷贝到第N个对象的对象。

5. 浅拷贝目标对象引用的被拷贝的对象地址，修改目标对象会影响被拷贝对象。

6. 深拷贝，前面加true， 完全克隆，修改目标对象不会影响被拷贝对象。

jQuery 多库共存

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

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

jQuery 插件

• jQuery 插件常用的网站：

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

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

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.里面的方法书写不需要逗号
  • 3. 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(/表达式/);
  • 2. 通过字面量创建
       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.name}</span> <span> result.name</span><span>{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/ftlabs/fastclick

  • if (‘addEventListener’ in document) {
    document.addEventListener(‘DOMContentLoaded’, function() {
    FastClick.attach(document.body);
    }, false);
    }

• Swiper 插件

  • 中文官网地址： https://www.swiper/

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

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

插件的使用总结

• 1. 确认插件实现的功能

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

数据可视化

• echarts插件

本文标签：