2018 年『升级版』前端全栈 JS 高级工程师课程

查看章节 全部展开 共6个阶段,22 章节,211 小节知识点。

小试牛刀:ECMAScript 深度剖析 “数据类型、函数详解、方法、对象”

1

第一章 JavaScript 入门:JS 特效原理、书写位置、元素获取、事件、函数、变量、命名规范、属性操作

1.1 - javascript是用来做什么的

1.1.1 - 行为交互

1.1.2 - 数据交互

1.1.3 - 逻辑交互

1.2 - 常见网页特效的原理

1.2.1 - 修改样式

1.2.2 - 修改内容

1.3 - js书写位置

1.3.1 - 行间

1.3.1.1 - html 标签的属性中添加

1.3.2 - script

1.3.2.1 - 页面内部专门的script标签

1.3.3 - 外联

1.3.3.1 - 单独的js文件

1.4 - getELementById()

1.4.1 - 通过id获取到页面中的元素

1.4.2 - id的唯一性

1.5 - 什么是事件

1.5.1 - onclick

1.5.2 - onload

1.5.2.1 - onload的事件可以添加的元素

1.5.2.2 - 为什么要使用onload事件

1.5.2.3 - 页面的加载顺序说明

1.6 - 初识函数

1.6.1 - 函数的声明

1.6.2 - 匿名函数

1.6.3 - 函数的调用

1.6.3.1 - 直接调用函数

1.6.3.2 - 通过事件调用函数

1.6.4 - 利用函数来简化重复的代码

1.7 - 变量

1.7.1 - 利用变量来存储我们需要重复使用的数据

1.7.2 - 变量的声明和调用

1.7.3 - var 关键字

1.8 - 命名规范

1.8.1 - 变量命名的注意事项

1.8.1.1 - 关键字和保留字

1.8.1.2 - 特殊字符的问题

1.8.1.2.1 - 用数字来命名

1.8.1.2.2 - 用中文来命名

1.8.1.2.3 - 用"$","-","_"等这些符号来命名

1.8.1.3 - 驼峰命名

1.8.1.4 - 命名语义化,命名的时候,要带有相应的语义

1.9 - 属性操作的第一种方法

1.9.1 - 属性的读操作

1.9.1.1 - 元素的style 属性

1.9.1.1.1 - cssText

1.9.1.2 - innerHTML

1.9.1.2.1 - 通过innerHTML获取到的元素内容的说明

1.9.1.3 - className

1.9.1.3.1 - 注意class获取时,要使用className

1.9.1.4 - src

1.9.1.4.1 - 这里要注意获取到的是个绝对路径

1.9.1.5 - href

1.9.1.5.1 - 这里要注意获取到的是个绝对路径

1.9.1.5.2 - a 标签的href属性可以直接在里边写js代码

1.9.1.6 - value

1.9.1.6.1 - 获取表单元素值的时候,主要要获取的是value属性

1.9.2 - 属性的写操作

1.9.2.1 - innerHTML

1.9.2.1.1 - 操作innerHTML时,是直接替换掉元素的所有内容

1.9.2.2 - cssText

1.9.2.2.1 - 操作cssText时,是直接替换掉元素style中的所有内容

1.10 - 案例:热身练习讲解

1.11 - 字符串

1.11.1 - 字符串的书写格式,包在一对单引号或者双引号中的0到多个字符

1.11.2 - 字符串连接

1.11.3 - 多层引号嵌套时,字符串分段问题

1.12 - 属性操作的第二种方式

1.12.1 - []中接收的数据类型是一个字符串

1.12.2 - .的方法接收的是一个字面量,所以不能使用变量存储

1.12.3 - 配合变量对元素进行属性操作

1.13 - if判断

1.13.1 - if语句的各种写法

1.13.1.1 - if(){}

1.13.1.2 - if(){} else {}

1.13.1.3 - if(){} else if(){} else {}

1.13.1.4 - 逻辑运算符: "==","!=",">",,"<"

1.13.1.5 - 逻辑运算的结果说明:true 和 false

1.13.1.6 - 布尔值

1.13.2 - if语句的执行流程,if语句在执行时,条件不成立就去验证下一个判断,条件成立,执行语句,if语句整体结束

1.13.3 - 什么情况下需要使用if语句,当一个操作时,需要处理不同的情况下,该怎么处理

1.14 - 案例:点击菜单展开收缩

1.15 - 案例:点击图片切换(两张图片来回切换)

1.15.1 - 使用布尔值来作为判断条件

1.15.2 - 没有合适判断条件时的处理

1.15.3 - 自定义判断条件

1.15.4 - "!" 布尔值取反

1.16 - 常用运算符"+","-","*","/"

1.16.1 - “+”号在使用时的注意事项

1.16.1.1 - 都是数字进行相加

1.16.1.2 - 遇到字符串进行连接

1.17 - 初始数组

1.17.1 - 数组的length,通过length可以获取到数组中存储

1.17.2 - 利用下标获取数组指定为位的数据

1.18 - 小例子: 点击按钮 加减数字z

1.19 - 案例:上一张下一张图片切换(数字版)

1.19.1 - 把图片命名,以数字命名,点击切换修改图片src

1.19.2 - 顺序版过界处理,当切换到初始或末尾时,就不能进行切换

1.20 - 案例2:上一张下一张图片切换(数组版)

1.20.1 - 把需要用到图片放在数组中,切换时,把src修改为数字的第几位

1.20.2 - 循环版过界处理,当切换到初始或者末尾时,再次点击切换就回到初始或者末尾

1.21 - 新的获取元素的方法

1.21.1 - querySelect

1.21.1.1 - query方法接收的是一个合法的css选择器

1.22 - 获取一组元素操作

1.22.1 - querySelectAll

1.22.2 - getElementsByTagName

1.22.3 - getElementsByClassName

1.22.4 - 一组元素的下标和length

1.22.5 - 在js中不能同时操作一组元素

1.22.6 - querySelectAll 在操作时,要注意元素变更了innerHTML之后,需要重新获取

1.23 - for循环

1.23.1 - for(初始值;判断条件;自增){ 执行语句 }

1.23.2 - 循环语句的组成部分

1.23.2.1 - 初始值,结束条件,执行语句和自增

1.23.2.2 - "++","--"自增和自减

1.23.2.3 - "+=","-=","/=","*="

1.23.3 - for循环的执行顺序

1.23.4 - 当判断条件永远成立的时候,就会陷入死循环

1.23.5 - for循环的结束值

1.23.6 - 什么情况下需要用到for循环

1.23.7 - for 循环 嵌套 for循环时

1.24 - 举个栗子:给一组li添加样式和鼠标移入移出事件

1.24.1 - mouseover事件和mouseout事件

1.25 - 取模

1.25.1 - 取模的应用场景

1.25.2 - 栗子: 利用取模来进行奇偶数判断

1.25.3 - 举个栗子:利用取模进行隔行变色

1.25.4 - 再举个栗子:利用取模配合数组进行多个颜色各行变色

1.25.5 - 又举个栗子:利用取模优化过界处理

1.26 - this关键字

1.26.1 - 当for循环中嵌套了事件之后,当前值的获取问题

1.26.2 - 事件调用的this指向

1.26.3 - 非事件调用的this指向

1.27 - 案例:简易仿select控件

1.27.1 - 当同一种操作,需要处理两种不同的事情时的处理

1.28 - 案例:单选模拟

1.29 - 选项卡思路讲解

1.29.1 - 思路1:利用for循环配合if和this找到当前操作的是第几个元素

1.29.2 - 索引值的应用

1.29.2.1 - 自定义属性

1.29.2.2 - 利用循环设置索引

1.29.2.3 - 在事件中,利用this调用索引值

1.29.3 - 循环中嵌套的事件函数的i值问题

1.29.4 - 思路2:大清洗

1.29.4.1 - 事件触发时,清除所有项的选中状态

1.29.4.2 - 给当前触发事件的元素加上选中状态

1.29.5 - 思路3:定点清除

1.29.5.1 - 使用变量记录当前选中的是第几个

1.29.5.2 - 事件触发时,清除变量记录的元素的选中状态

1.29.5.3 - 变量记录当前触发的事件的元素是第几个

1.29.5.4 - 给当前触发事件的元素加上选中状态

1.30 - 练习: 带有上一张下一张切换的选项卡

1.31 - 练习:好友列表

2

第二章 数据类型和流程控制:基本类型、引用类型、传值传址、强制类型转换、运算符、逻辑判断、循环

2.1 - 数据类型划分

2.1.1 - 不同的数据类型,决定了我们后期可以进行的操作

2.1.2 - 基本类型(简单类型)

2.1.2.1 - Number 数字类型,js中的数字类型包含了整数和小数,以及NaN

2.1.2.2 - String 字符串类型,在js中由一对引号包起来的0到多个字符都属于字符串。

2.1.2.3 - Boolean 布尔值类型, true和false

2.1.2.4 - null null类型,null是js中一个比较特殊的值,表示这个对象为空

2.1.2.5 - undefined undefined类型,表示这个数据未定义

2.1.3 - 引用类型(复合类型,复杂类型)

2.1.3.1 - js中复合类型的数据只有一个就是对象。

2.1.3.2 - 对象类型中可以存放任意类型的数据,包括对象

2.1.3.3 - js中有很多种对象,如我们前边用过的数组,元素对象等

2.1.4 - 传值与传址

2.1.4.1 - 基本类型的数据,在我们赋值的时候,传递的是具体的数值,也就是传值

2.1.4.2 - 引用类型的数据,在我们赋值的时候,传递的是该数据在内存中的引用地址,也就是传址

2.2 - typeof运算符

2.2.1 - typeof运算符可以帮助我们判断出我们的数据是哪一个类型

2.2.2 - typeof运算符的结果和我们的数据类型的划分稍有不同,它一共划分了6种类型,分别是:

2.2.2.1 - Number 数字

2.2.2.2 - String 字符串

2.2.2.3 - Boolean 布尔值

2.2.2.4 - function 函数

2.2.2.5 - undefined 定义

2.2.2.6 - Object 对象

2.3 - 强制数据类型转换

2.3.1 - parseInt()

2.3.1.1 - 转换成整数

2.3.1.2 - 转换规则:去掉头部的空格之后,从左向右一位一位匹配

2.3.1.2.1 - 第0为就是非数字,返回NaN

2.3.1.2.2 - 其中一位是非数字,就返回这位之前的数字

2.3.1.2.3 - 全部是数字,就整体返回

2.3.1.3 - 注意parseInt的第二个参数,是转换时使用的进制

2.3.2 - parseFloat()

2.3.2.1 - 转换为浮点数(小数)

2.3.2.2 - 转换规则和parseInt一致,但可以多匹配一位小数点

2.3.3 - number()

2.3.3.1 - 转换成数字

2.3.3.2 - 布尔值,true转换为1,false转换为0

2.3.3.3 - 数字,返回原数字

2.3.3.4 - null,返回0

2.3.3.5 - undefined,返回NaN

2.3.3.6 - 字符串的话,遵循以下规则

2.3.3.6.1 - 完全符合数字规则(10进制及16进制数字),则返回转换后的10进制数字

2.3.3.6.2 - 空字符串,则转换为0

2.3.3.6.3 - 上述规则以外,返回NaN

2.3.3.7 - 对象,先调用对象的valueOf()方法,然后依照前面的规则转换返回的值。如果 转换的结果是NaN,则调用对象的toString()方法,然后再次依照前面的规则转换返回的字符串。

2.3.4 - NaN和isNaN

2.3.4.1 - NaN(not a number)非数字,是一个特殊的数字。数据类型数字

2.3.4.2 - NaN不等于任何值,包括NaN本身

2.3.4.3 - isNaN() 检测一个值,转换成数字之后,是否是NaN,是返回true,否则返回false

2.3.4.4 - NaN参与到运算之后,运算结果也是NaN

2.3.4.5 - isNaN() 在检测时,调用的是 Number()方法,来进行检测

2.3.5 - String()

2.3.5.1 - 对象、函数、数字、布尔值,调用自身的tostring()方法

2.3.5.2 - null 返回 "null"

2.3.5.3 - undefined 返回 "undefined"

2.3.6 - Boolean()

2.3.6.1 - 转换结果为true的有

2.3.6.1.1 - true、非空字符串、任何非0的数字、非空对象

2.3.6.2 - 转换结果为false的有

2.3.6.2.1 - false、空字符串、0、NaN、null、undefined

2.4 - 算术运算符

2.4.1 - + 加、- 减、* 乘、/ 除、% 取模(求余数)

2.4.2 - "+"加 隐式类型转换规则:

2.4.2.1 - 两侧都是数字直接相加

2.4.2.2 - 一侧是字符串时直接进行字符串连接

2.4.2.3 - 如果两侧是布尔类型,undefined,null则隐式调用number() 转换后,进行数字相加

2.4.2.4 - 遇到函数或者object,则转成字符串连接

2.4.3 - 减、* 乘、/ 除、% 取模 隐式类型转换规则:

2.4.3.1 - 遇到非数字,调用number() 转换成数字后进行运算

2.5 - 赋值运算符

2.5.1 - ++自增 、--自减

2.5.1.1 - 自增,自减的赋值关系,先计算后赋值和先赋值后计算

2.5.2 - =、+=、-=、*=、/=、%=

2.5.3 - 赋值运算符隐式类型转换规则:

2.5.3.1 - 遇到非数字,调用number() 转换成数字后进行运算

2.6 - 关系运算符

2.6.1 - <、>、<=、>=、==、!=、===、!==

2.6.2 - 关系运算符的返回结果为 true 或 false

2.6.3 - <、>、<=、>= 、==、!= 比较规则:

2.6.3.1 - 两侧都是数值,直接比较

2.6.3.2 - 两侧都是字符串,比较字符编码

2.6.3.3 - 遇到对象则调用valueOf()方法转换,没有valueOf(),就调用toString()

2.6.3.4 - 遇到布尔值、undefined、null,则转成数字比较

2.6.3.5 - 如果一侧是数字,则将另一侧也转成数字比较

2.6.4 - ===、!==

2.6.4.1 - 两侧类型一样,则进行比较

2.6.4.2 - 两侧类型不一样,直接返回false

2.7 - 逻辑运算法

2.7.1 - && 与、|| 或、! 否

2.7.2 - 逻辑运算符的返回结果为 true 或 false

2.7.3 - && 的执行流程,左侧返回true,再查看右侧

2.7.4 - || 的执行流程,左侧返回true,才查看右侧

2.7.5 - 利用&&和||简化判断

2.7.6 - && 与、|| 或、! 否 隐式类型转换方式:

2.7.6.1 - 调用 Boolean()方法,把值转换成布尔值之后在进行运算

2.8 - 条件操作符 ?

2.8.1 - 运算结果 = 判断条件? 条件成立的结果: 条件不成立的结果

2.8.2 - 判断条件的结果会被隐式转换成布尔值

2.9 - 运算符优先级

2.9.1 - 利用()提升运算优先级

2.10 - 案例:简易计算器

2.11 - 判断:if、switch(case break default)

2.11.1 - if 的书写格式和流程回顾

2.11.2 - switch 的书写格式

2.11.3 - break 终止语句

2.11.4 - switch的执行流程:

2.11.4.1 - 和 case的值相等后开始执行,case下的语句,直到碰到break语句,或者整个语句结束

2.11.4.2 - 如果所有的case都不成立,就执行 default中的内容

2.11.4.3 - switch穿透,如果只有case没有break,执行时会穿透多个case

2.12 - 循环:while、for:

2.12.1 - 循环的四个组成:初始值,判断条件,自增,执行语句

2.12.2 - while语句中的(),只有一个判断条件,初始值,自增要我们自己完成

2.13 - 跳出:break、continue:

2.13.1 - break终止语句

2.13.2 - continue 跳过本次循环

2.13.3 - 给循环起名字,可以指定要终止或跳过某个循环

2.14 - 案例:列表全选操作

2.15 - 练习:评分

2.16 - 练习:验证QQ号码

2.17 - 练习:找到合适的值

3

第三章 function 详解:函数定义与调用、传参、返回值、封装、预解析、作用域、闭包、递归

3.1 - function 函数

3.1.1 - 函数是我们javascript的一个核心概念,我们可以在函数封装放多条语句,这样就可以在任何时候调用执行,达到复用的目的

3.1.2 - 定义函数

3.1.2.1 - function functionname() { //执行代码 }

3.1.3 - 函数调用

3.1.3.1 - functionname()

3.2 - 函数传参

3.2.1 - 形参

3.2.1.1 - function fn(num1, num2) {} 形参, 我们在函数声明时,写在()中声明的名字。

3.2.2 - 实参

3.2.2.1 - fn(1, 2) 实参, 在函数调用时,实际传入的数值。

3.2.2.2 - 形参和实参 是一 一对应的。

3.2.2.3 - 函数理论上可以传入无限个参数

3.3 - arguments 不定参

3.3.1 - arguments中,存放了我们传入函数的所有参数,可以通过下标访问到每一个参数,也可以通过length获取到传入的参数个数

3.4 - 函数返回值

3.4.1 - 每个函数在调用时,都会有一个返回值,没有定义就是undefined

3.4.2 - 可以 return 后定义函数执行之后的返回值

3.4.3 - 函数中 return 后的代码不会被执行

3.5 - 计算后的样式值

3.5.1 - getComputedStyle(element)

3.5.2 - 计算后样式,元素最终渲染出来的样式

3.6 - 函数封装

3.6.1 - 函数封装,简单理解就是把某个功能或者行为中,固定的,可以重复使用的代码,写在函数内部,把需要改变的内容定义成函数的参数(对外访问的接口)的编程方式。

3.6.2 - 封装 css 函数,既可以获取计算后,又可以设置样式

3.7 - 案例:多个选项卡传参

3.8 - 练习:修改文本框的值

3.9 - 预解析机制

3.9.1 - 预解析,在解析一个作用域,或者一个script标签的内容时,js会先把这块代码中的 var 关键字 和 function 关键字,预先提取出来,然后在从上向下执行我们的js语句

3.9.2 - var 预解析

3.9.3 - function 预解析

3.9.3.1 - 在预解析 function 关键字时, 会把我们整个函数提取出来。

3.9.4 - 先预解析 var,后预解析 function

3.10 - 作用域

3.10.1 - 全局作用域,该条数据在全局任意位置,都可以进行读取和修改

3.10.2 - 局部作用域,某段代码被执行时,就会被放入一个执行环境,我们在该环境中定义的数据,就只能在这个环境中,读取和修改。

3.11 - 作用域链

3.11.1 - 作用域链,保证了我们在访问一条数据时的有序访问,首先会调用该作用域中的数据,在该作用域中找不到这条数据时,就会去上一级作用域中查找,一直到全局作用域,如果还是没有就报错。

3.12 - 闭包

3.12.1 - 闭包,有权访问另一个函数作用域的函数

3.12.2 - 常见形式,函数嵌套函数

3.12.3 - 闭包的使用:利用闭包添加索引

3.13 - 匿名函数表达式

3.13.1 - (function(){})()

3.13.2 - !function(){}()

3.14 - 递归

3.14.1 - 递归是函数自己调用自己的情况下构成的

3.14.2 - arguments.callee() 函数自己

3.14.3 - 代码执行过程,在js中代码解析到一个函数调用时,会先把调用的函数执行完再执行下边的代码

3.15 - 案例:商品累计

4

第四章 字符串和数组方法:字符串格式、个数、下标、抽取、分割、转换、筛选、数组去重、排序

4.1 - 字符串的格式:引号包起来0到多个字符

4.1.1 - string.length 字符串中包含的字符个数

4.1.2 - string.charAt(index) 根据传入的下标值,返回字符串中对应位的字符

4.1.3 - string.charCodeAt(index) 根据传入的下标值,返回字符串中对应位字符的Unicode编码

4.1.4 - string.indexOf("str") 返回指定字符串在整段字符串中首次出现的位置

4.1.5 - string.lastIndexOf("str") 返回指定字符串在整段字符串中最后一次出现的位置

4.1.6 - string.slice(start,end) 返回从已有字符串的start抽去到end位形成的新字符串

4.1.7 - string.split(separator) 根据分割符,把字符串分割成数组

4.1.8 - string.substr(start,length) 返回从已有字符串的start位开始抽取length位形成的新字符串

4.1.9 - string.substring(start,end) 返回从已有字符串的start抽去到end位形成的新字符串

4.1.10 - string.toLowerCase() 返回,全部转换成小写字母的新字符串

4.1.11 - string.toUpperCase() 返回,全部转换成大写字母的新字符串

4.1.12 - string.trim() 返回,去掉首尾空格的新字符串

4.1.13 - 模板字符串

4.1.13.1 - 模板字符串允许在字符串中放入表达式

4.1.13.2 - ` 这是加了${"表达式"}的模板字符串 `

4.1.14 - 案例:查找替换文字

4.1.15 - arr.length

4.1.15.1 - length代表了数组中存储的数据个数

4.1.15.2 - 数组的length可以进行操作

4.1.16 - arr.push(data) 向数组的末尾添加一到多条数据,返回数组的新长度

4.1.17 - arr.unshift(data)向数组的头部添加一到多条数据,返回数组的新长度

4.1.18 - rr.pop() 删除数组的最后一位,返回删除掉的数据

4.1.19 - arr.shift() 删除数组的第一位,返回删除掉的数据

4.1.20 - arr.sort() 对数组中的数据进行排序

4.1.21 - arr.concat(arr2) 连接两个或多个数组,返回连接后的新数组

4.1.22 - arr.reverse() 对数组进行翻转

4.1.23 - arr.join(separator) 用分隔符把数组中的数据,连成字符串,返回连接后的字符串

4.1.24 - arr.slice(start,end) 从数组中start开始到end,抽取一个新数组,返回新数组

4.1.25 - arr.splice() 从数组中添加/删除项目,然后返回被删除的项目

4.1.25.1 - arr.splice(index,length) 从数组中的指定位开始,删除length位

4.1.25.2 - arr.splice(index,0,data,data) 从数组的指定位添加数据

4.1.25.3 - arr.splice(index,length,data,data) 用data从数组的index位开始替换掉length位

4.1.26 - arr.forEach() 循环调用数组的每一位

4.1.27 - arr.map() 循环修改数组的每一位,返回修改后的新数组

4.1.28 - arr.filter() 对数组中的数据进行筛选,返回筛选后的新数组

4.1.29 - 案例:数组去重

4.1.30 - 案例:图片排序

4.1.31 - 案例:中文排序

5

第五章 对象:创建对象、数据存储、for in、JSON、Math 随机排序、圆周率、角度弧度

5.1 - 创建对象

5.1.1 - new Object()

5.1.2 - {}

5.2 - 利用对象来存储数据

5.2.1 - obj[key] = value 对象中的数据都是存储在属性中的

5.3 - in 操作符 通过in操作符可以判断对象中是否含有某个对象

5.4 - for-in语句

5.4.1 - for (var s in obj){}

5.4.2 - 通过for-in语句可以枚举到对象中所有属性

5.5 - JSON(JavaScript Object Notation)

5.5.1 - JSON规则:按照对象规则书写的字符串

5.5.2 - JSON用途:数据传输

5.5.3 - JSON操作方法

5.5.3.1 - object JSON.paser(string)

5.5.3.2 - string JSON.stringify(object)

5.6 - Math 对象

5.6.1 - Math.abs() 返回绝对值

5.6.2 - Math.ceil() 返回向上取整后的数值

5.6.3 - Math.floor() 返回向下取整后的数值

5.6.4 - Math.round() 返回四舍五入后的数值

5.6.4.1 - toFixed(n) 返回保留 n 位小数的字符串

5.6.5 - Math.max(x,y) 获取两个数值中较大的一个

5.6.6 - Math.min(x,y) 获取两个数值中较小的一个

5.6.7 - Math.random() 返回 0 ~ 1 之间的随机小数。

5.6.7.1 - 随机 0 - 100 不包含100的整数

5.6.7.2 - 随机 0 - 100 不包含0的整数

5.6.7.3 - 随机 0 - 100 的整数

5.6.7.4 - 数组随机排序

5.6.8 - Math.sqrt() 返回平方根

5.6.9 - Math.PI 圆周率

5.6.10 - 角度和弧度的相互转换

5.6.10.1 - deg = rad*180/Math.PI

5.6.10.2 - rad = deg/180*Math.PI

5.6.11 - Math.sin() 返回正弦值

5.6.12 - Math.cos() 返回余弦值

5.6.13 - Math.tan() 返回正切值

5.6.14 - Math.asin() 返回反正弦值

5.6.15 - Math.acos() 返回反余弦值

5.6.16 - Math.atan() 返回反正切值

5.7 - 案例:根据数据生成商品列表,并可以从大到小和从小到大排序

渐入佳境:JS 动画与 CSS3 的 3D 变换、时间专题

6

第六章 定时器和动画帧:setInterval、setTimeout、定时器管理、动画帧、编号、封装动画帧

6.1 - setInterval(执行函数,间隔时间) 间隔型定时器

6.1.1 - 间隔一定时间,重复执行,执行函数

6.1.2 - 返回值是定时器的编号

6.2 - setTimeout(执行函数,延迟时间) 延迟型定时器

6.2.1 - 延迟一定时间执行,执行函数

6.2.2 - 返回值是定时器的编号

6.3 - 关闭定时器

6.3.1 - clearInterval(定时器编号) 关闭setInterval开启的定时器

6.3.2 - clearTimeout(定时器编号) 关闭setTimeout开启的定时器

6.4 - 定时器管理

6.4.1 - 思路1:利用变量记录定时器编号,每次开始定时器之前,先清除确保当前只有一个定时器在执行

6.4.2 - 思路2:利用变量记录定时器编号,每次开始定时器之前,先判断该定时器是否开始,如果已经开启则不在重复开启

6.5 - 案例:自动播放的选项卡

6.6 - 案例:延时菜单

6.7 - requestAnimateFrame(function) 动画帧

6.7.1 - 在页面重绘之前,通知浏览器调用一个指定的函数,以满足开发者操作动画的需求

6.7.2 - 返回值动画帧编号

6.7.3 - 如果想要实现连续动画需要通过递归实现

6.7.4 - 动画帧的执行是和浏览器的渲染帧频完全一致的,所以不会有丢帧的情况发生,但是用定时器的话,由于定时器的帧频和浏览器的渲染帧频不一致,经常会有丢帧的情况出现

6.7.5 - 动画帧的兼容处理

6.7.5.1 - 高版本浏览器中我们需要添加各种前缀webkit,moz,o

6.7.5.2 - 定版本中不支持动画帧的浏览器用setTimeout做兼容

6.8 - CancelAnimationFrame(动画帧编号)

6.8.1 - 关闭动画帧

6.8.2 - CancelAnimationFrame的兼容处理

6.8.2.1 - 高版本浏览器中我们需要添加各种前缀webkit,moz,o

6.8.2.2 - 低版本中使用用clearTimeout

6.9 - 封装兼容的动画帧处理方法

6.10 - 案例: 下拉广告

7

第七章 动画函数封装:tween、单属性封装、多属性封装、多动画封装、回调函数

7.1 - tween.js tween类来自于flash,在tween中封装了各种各样的动画算法

7.1.1 - tween的动画,主要依赖于t,b,c,d四个参数:

7.1.1.1 - t 动画当前执行至第几次

7.1.1.2 - b 需要动画的样式的初始值

7.1.1.3 - c 需要动画的样式的初始值和结束值的差值

7.1.1.4 - d 动画执行总次数

7.2 - 案例: 控制小方块移动

7.3 - 单个元素,单个属性动画封装

7.3.1 - 需要改变的参数:

7.3.1.1 - el 需要动画的元素

7.3.1.2 - attr 需要动画的属性

7.3.1.3 - target 动画目标值

7.3.1.4 - time 动画时间

7.3.1.5 - type 动画形式

7.3.2 - 封装 css 函数 用于获取元素的计算后样式,及设置样式时的单位添加

7.3.3 - 当前执行次数定义为 0 (t)

7.3.4 - 通过css函数获取到当前值(b)

7.3.5 - 通过目标值和当前值 计算出 差值(c)

7.3.6 - 利用 time 和浏览器渲染帧频计算出 动画总次数(t)

7.3.7 - 调用封装好的 requestAnimateFrame 函数 配合 tween 进行动画,每次动画时 t++

7.4 - 多个元素,单个属性动画封装

7.4.1 - 修改动画管理,把动画管理加给各个元素,或者每个元素都是独立的动画管理

7.5 - 多个元素,多个属性动画封装

7.5.1 - 合并 attr 和 target参数,利用对象来存储 attr和 target

7.5.2 - 修改 b 和 c 以对象的形式来存储 d 和 c

7.6 - 添加回调函数

7.6.1 - 在动画结束之后,添加callBack() 回调函数

7.6.2 - 在动画执行中,添加callIng() 回调函数

7.6.3 - call 修改函数在执行中的this执行

7.7 - 案例: 自动轮播图

7.8 - 练习: 无缝滚动的轮播图

8

第八章 transform 变换、transition 过渡与 animation 动画:变换、角度、缩放、拉伸、位移、3D

8.1 - transoform 变换

8.1.1 - rotate 元素旋转

8.1.1.1 - 角度单位

8.1.1.1.1 - deg 角度: 一个圆周,总共是360角度

8.1.1.1.2 - grad 梯度:一个圆周,总共是400梯度

8.1.1.1.3 - rad 弧度:一个圆周,总共是2π弧度

8.1.1.1.4 - turn 圆周: 一个圆周,或者说一圈

8.1.2 - scale 元素缩放

8.1.2.1 - scaleX 元素宽度缩放

8.1.2.2 - scaleY 元素高度度缩放

8.1.3 - skew

8.1.3.1 - skewX 元素x方向拉伸

8.1.3.2 - skewY 元素y方向拉伸

8.1.4 - translate

8.1.4.1 - translateX 元素x方向位移

8.1.4.2 - translateY 元素y方向位移

8.2 - transform的执行顺序

8.2.1 - 当我们给transform中调用多项变换函数时,要注意的是后写的先计算

8.2.2 - translate位移时不修改元素变换的基点

8.3 - transform-origin

8.3.1 - 设置元素变换时的基点,默认 center center

8.4 - transoform3D 3d变换

8.4.1 - rotate3D

8.4.1.1 - rotateX 围绕着X轴进行旋转

8.4.1.2 - rotateY 围绕着Y轴进行旋转

8.4.1.3 - rotateZ 围绕着Z轴进行旋转

8.4.2 - translate3D

8.4.2.1 - translateX 元素x方向位移

8.4.2.2 - translateY 元素y方向位移

8.4.2.3 - translateZ 元素z方向位移

8.5 - transform-style 定义 元素的子元素怎样在三维空间中呈现

8.6 - perspective 透视距离 定义元素中包含的3d子元素距离视图的距离

8.7 - perspective-origin 视角位置,定义我们从元素的那个方向来看元素内的三维视图

8.8 - backface-visibility 当元素移动至3d视图背面时,则隐藏

8.8.1 - 和旋转父级角度相对的面为背面

8.8.2 - 利用backface-visibility 和 transform-style解决动画过程中的文字模糊问题

8.9 - 案例:3d盒子

8.10 - 利用transform做动画的好处

8.10.1 - transform 不会引起元素重绘,性能要比修改left,top值高出很多

8.10.2 - transform3D 的计算运用的是GPU,所以在计算效率上会比传统的内存计算性能要高

8.11 - transform在获取时,获取到的是矩阵,不能直接进行计算

8.12 - 封装transform获取和设置方法

8.12.1 - 利用元素的自定属性记录transform的每一步操作

8.12.2 - 获取时,直接获取自定义属性中存入的值

8.12.3 - 设置时,先设置自定义属性,然后在进行样式的同步

8.13 - 把封装好的transform方法引入css方法

8.14 - transition过渡 为元素的样式变化时添加动画

8.14.1 - transition-property 设置过渡效果的 CSS 属性的名称。

8.14.1.1 - 注意过渡只能对数值类的样式添加动画

8.14.1.2 - 注意过渡只对已经在页面渲染完成的元素起效果

8.14.2 - transition-duration 设置完成过渡效果需要多少秒(s)或毫秒(ms)

8.14.3 - transition-delay 为过渡添加时间延迟(s||ms)

8.14.4 - transition-property 设置过渡效果的 CSS 属性的名称。

8.14.4.1 - linear 规定以相同速度开始至结束的过渡效果

8.14.4.2 - ease 规定慢速开始,然后变快,然后慢速结束的过渡效果

8.14.4.3 - ease-in 规定以慢速开始的过渡效果

8.14.4.4 - ease-out 规定以慢速结束的过渡效果

8.14.4.5 - cubic-bezier(n,n,n,n) 通过 cubic-bezier 函数中自定义动画形式

8.14.5 - transitionend 事件,过渡完成之后的事件

8.14.5.1 - 元素有多个样式进行过渡时,每条样式过渡完都会触发 transitionend

8.15 - animation

8.15.1 - @keyframes 动画帧

8.15.1.1 - @keyframes name {keyframes-selector{css-styles;}}

8.15.1.2 - keyframes-selector 动画时长占比

8.15.1.2.1 - 0-100% 百分比形式

8.15.1.2.2 - form(0%) to(100%)

8.15.2 - animation-name 要调用的 keyframes 的名字

8.15.3 - animation-duration 完成整个动画所需要的时间(ms||s)

8.15.4 - animation-timing-function 规定速度效果的速度曲线

8.15.4.1 - linear 规定以相同速度开始至结束的过渡效果

8.15.4.2 - ease 规定慢速开始,然后变快,然后慢速结束的过渡效果

8.15.4.3 - ease-in 规定以慢速开始的过渡效果

8.15.4.4 - ease-out 规定以慢速结束的过渡效果

8.15.4.5 - cubic-bezier(n,n,n,n) 通过 cubic-bezier 函数中自定义动画形式

8.15.5 - animation-delay 在动画开始之前添加时间延迟(s||ms)

8.15.6 - animation-iteration-count 设置动画的播放次数

8.15.7 - animation-direction 控制是否应该轮流反向播放动画

8.15.8 - animation-play-state 控制动画暂停或者播放

8.15.9 - animation-fill-mode 控制动画开始之前或者结束之后的状态

8.15.10 - animationStart 事件,在动画开始时执行

8.15.11 - animationEnd 事件,在动画结束时执行

8.15.12 - animationIteration 事件,动画重复播放时执行

8.16 - 分析3种动画实现方式的不同

8.16.1 - transition 使用起来最方便,但是动画过程不受控制,中间过程也不可监控,也不可以自己执行

8.16.2 - animation 比transition麻烦,可以加载完执行,动画过程一定程度上可以控制

8.16.3 - 动画函数,实现的过程麻烦,动画形式丰富,动画过程可控

8.17 - 案例:图片无缝滚动

9

第九章 Date 对象:日期获取、设置时间、Date.now、时钟效果、倒计时、日历

9.1 - Date对象主要用于获取或设置时间,用法 new Date()

9.2 - 日期获取相关参数

9.2.1 - Date() 返回当日的日期和时间

9.2.2 - getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)

9.2.3 - getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)

9.2.4 - getMonth() 从 Date 对象返回月份 (0 ~ 11)

9.2.5 - getFullYear() 从 Date 对象以四位数字返回年份

9.2.6 - getHours() 返回 Date 对象的小时 (0 ~ 23)

9.2.7 - getMinutes() 返回 Date 对象的分钟 (0 ~ 59)

9.2.8 - getSeconds() 返回 Date 对象的秒数 (0 ~ 59)

9.2.9 - getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)

9.2.10 - getTime() 返回 1970 年 1 月 1 日至今的毫秒数

9.2.10.1 - getTime 获取的结果是有时区差异的,如我们当前在东八区,获取到的就是 1970 年 1 月 1 日8时至今的毫秒数

9.2.11 - Date.now() 返回1970 年 1 月 1 日至今的毫秒数

9.3 - 案例:时钟效果

9.4 - 日期获取相关参数

9.4.1 - new Date(2018,4,1,0,0,0)

9.4.2 - new Date("June 10,2018 0:0:0")

9.4.3 - new Date(new Date().getTime())

9.4.4 - setDate() 设置 Date 对象中月的某一天

9.4.5 - setMonth() 设置 Date 对象中月份s

9.4.6 - setFullYear() 设置 Date 对象中的年份

9.4.7 - setYear() 请使用 setFullYear() 方法代替

9.4.8 - setHours() 设置 Date 对象中的小时

9.4.9 - setSeconds() 设置 Date 对象中的秒钟

9.4.10 - setMilliseconds() 设置 Date 对象中的毫秒

9.4.11 - setTime() 以毫秒设置 Date 对象

9.5 - 案例:倒计时效果

9.6 - 综合案例:日历

得心应手:BOM 详解、事件进阶与应用、移动端事件全揭秘

10

第十章 BOM:window 对象、可视区、页面距离、滚动条、location、navigator、history

10.1 - BOM (browser object model) 浏览器对象模型,BOM为我们提供对浏览器信息获取及操作的方法。BOM操作主要基于BOM中的五大对象完成,这五大对象分别是:window、navigator、locaation、history、screen

10.2 - window 对象

10.2.1 - window 对象在js中有两个作用。即是BOM的顶层对象,也是 ECMAScript 中的全局作用域(Global 对象), 声明在全局的的变量、函数都会变成window 对象的属性和方法。

10.2.2 - window.open(URL,name,features,replace) 打开新窗口

10.2.2.1 - URL 声明了要打开窗口的地址

10.2.2.2 - name 类似 a 标签的target,定义我们窗口的打开方式

10.2.2.3 - features 声明了要打开窗口的窗口特征(如:width、height等但兼容性极差)

10.2.2.4 - replace true||false 在浏览历史中创建一个新条目,还是替换当前历史记录

10.2.3 - window.close() 关闭窗口

10.2.4 - 页面相关距离获取

10.2.4.1 - 可视区大小

10.2.4.1.1 - window.innerWidth/window.innerHeight

10.2.4.1.2 - document.body.clientWidth/document.body.clientHeight

10.2.4.2 - 页面大小

10.2.4.2.1 - document.body.scrollWidth/document.body.scrollHeight

10.2.4.3 - 窗口滚动条距离

10.2.4.3.1 - window.pageYOffset/window.pageXOffset

10.2.4.3.2 - document.body.scrollTop/document.body.scrollLeft

10.2.4.3.3 - document.documentElement.scrollTop/document.documentElement.scrollLeft

10.2.4.3.4 - window.scrollY/window.scrollX

10.2.4.3.5 - window.scrollTo(x,y) 设置滚动条位置

10.2.5 - window常用事件

10.2.5.1 - scroll 监听滚动条滚动

10.2.5.2 - resize 监听窗口大小发生变化

10.3 - location 对象

10.3.1 - href 返回完整的url地址

10.3.2 - hash 设置或返回从#号开始的 URL(锚点,hash值)

10.3.3 - search 设置或返回从问号 (?) 开始的 URL

10.3.4 - host 设置或返回主机名和当前 URL 的端口号

10.3.5 - hostname 设置或返回不带端口号的主机名

10.3.6 - pathname 设置或返回 URL 中的目录 和 文件名

10.3.7 - port 设置或返回当前 URL 的端口号

10.3.8 - protocol 设置或返回当前 URL 的协议(http 或 https)

10.3.9 - reload() 刷新当前页面

10.4 - navigator

10.4.1 - appName 返回浏览器的名称

10.4.2 - onLine 返回指明系统是否处于脱机模式的布尔值

10.4.3 - platform 返回运行浏览器的操作系统平台

10.4.4 - userAgent 返回由浏览器代理的详细信息

10.5 - screen

10.5.1 - width/height 屏幕宽高

10.5.2 - availHeight/availWidth 除了任务栏之外的屏幕宽高

10.6 - history

10.6.1 - length 当前 history 列表中的数量

10.6.2 - back() 加载 history 列表中的前一个 URL

10.6.3 - forward() 加载 history 列表中的下一个 URL

10.6.4 - go(number|URL) 方法可加载历史列表中的某个具体的页面

10.6.4.1 - number 倒退或前进几步

10.6.4.2 - URL 具体网址

11

第十一章 事件基础:事件监听、绑定、事件流、事件对象、冒泡、默认行为、鼠标位置、键盘、滚轮

11.1 - 事件,是文档或浏览器窗口发生一些特定交互的交互瞬间。js可以侦听这些交互,在交互发生时执行相应的一些代码

11.2 - 事件监听器 el.addEventListener("event",func,事件流)

11.2.1 - 事件绑定和事件监听的区别:事件绑定只能绑定一次,重复绑定后边会进行覆盖。事件监听可以添加多个处理函数,多个处理函数都会执行

11.2.2 - el 添加事件的元素

11.2.3 - "event": 事件名称,注意这里不叫on(如 click, mouseover, mouseoout)

11.2.4 - func: 事件处理函数

11.2.5 - 事件流: true 捕获阶段,false冒泡阶段

11.3 - el.removeEventListener("event",func,事件流)

11.3.1 - 取消事件监听

11.3.2 - 注意,事件处理函数必须是一个有名字的函数,否则不能被取消点

11.4 - 事件流

11.4.1 - 事件冒泡,事件会由事件发生的元素逐级向上传递至到顶层对象

11.4.2 - 事件捕获,事件会由顶层对象逐级向下传递至事件发生的元素

11.4.3 - 先执行捕获阶段,再执行事件冒泡

11.5 - 事件对象

11.5.1 - 事件发生时会产生一个事件对象event,这个对象中包含了所有与事件相关的信息(如触发事件的元素,事件的类型,鼠标坐标,按下的键盘等)

11.5.2 - e.target 事件源,发生事件的元素

11.5.2.1 - 事件委托:事件委托也称之为事件代理,利用事件冒泡把一组子级的事件,委托在父级进行执行

11.5.3 - e.type 事件类型

11.5.4 - 阻止冒泡

11.5.4.1 - e.cancelBubble = true

11.5.4.2 - e.stopPropagation()

11.5.4.3 - 以上两种方法都是 阻止冒泡的方法

11.5.4.4 - 案例:完整版仿select

11.5.5 - 阻止默认行为

11.5.5.1 - return false 在事件绑定中阻止默认行为

11.5.5.2 - e.preventDefalut() 在事件监听中阻止默认行为

11.5.6 - 鼠标位置获取

11.5.6.1 - e.clientX/e.clientY 鼠标相对可视区的坐标

11.5.6.2 - e.pageX/e.pageY 鼠标相对文档的坐标

11.5.6.3 - contextmenu 右键菜单事件

11.5.6.4 - 案例:自定义右键菜单

11.5.7 - e.button 返回用户按下的是鼠标的哪个键

11.5.7.1 - e.button = 0 鼠标左键

11.5.7.2 - e.button = 1 鼠标中键(鼠标滚轮)

11.5.7.3 - e.button = 2 鼠标右键

11.5.8 - 键盘事件

11.5.8.1 - keydown 键盘按下事件、keyup键盘抬起事件

11.5.8.2 - e.keyCode 获取当前发生事件的键值

11.5.8.3 - 案例:通过上下左右键移动方块

11.5.8.4 - 组合键

11.5.8.4.1 - altKey alt键是否按下、ctrlKey ctrl键是否按下、shiftKey shift键是否按下

11.5.8.4.2 - 案例:利用 ctrl + 回车,提交input中内容

11.5.9 - 滚轮事件

11.5.9.1 - mousewheel/DOMMouseScroll 滚轮事件

11.5.9.2 - e.wheelDelta/e.detail 获取滚轮方向

11.5.9.3 - 封装兼容的滚动操作处理函数

11.6 - 常用事件汇总:

11.6.1 - 鼠标事件

11.6.1.1 - mouseover、mouseenter 鼠标移入

11.6.1.2 - zmouseout、mouseleave 鼠标移出

11.6.1.3 - click 点击

11.6.1.4 - dblclick 双击

11.6.1.5 - contextmenu 右键点击

11.6.1.6 - mousedown 鼠标摁下

11.6.1.7 - mouseup 鼠标抬起

11.6.1.8 - mousemove 鼠标移动

11.6.1.9 - mousewheel/DOMMouseScroll 鼠标滚轮

11.6.2 - 键盘事件

11.6.2.1 - keydown 键盘按下

11.6.2.2 - keyup 键盘抬起

11.6.3 - 表单事件

11.6.3.1 - change 状态发生改变

11.6.3.2 - input value发生变化

11.6.3.3 - blur 失去焦点

11.6.3.4 - focus 获得焦点

11.6.3.4.1 - blur() 使控件失去焦点

11.6.3.4.2 - focus() 使控件获得焦点

11.6.3.4.3 - select() 选中所有内容

11.6.3.5 - reset 重置时

11.6.3.6 - submit 提交时

11.6.3.6.1 - submit() 提交表单

11.7 - 综合案例:图片上一张,下一张切换(添加键盘操作和滚轮操作)

11.8 - 练习:放大镜效果

12

第十二章 事件应用:拖拽、碰撞检测、自定义滚动条、事件综合实例

12.1 - 拖拽的原理分析

12.1.1 - 事件:mousedown鼠标按下,mousemove 鼠标移动、mouseup 鼠标抬起

12.1.2 - 记录摁下时鼠标坐标及元素的当前位置

12.1.3 - move时获取新的鼠标坐标,计算出move于down之间的位移值

12.1.4 - 用down时的鼠标坐标加上位置值求出元素拖拽后的坐标

12.1.5 - 修复拖拽时,滑动过快会甩掉元素的问题。可以把事件加给document

12.1.6 - 修复拖拽时,会选中问题及图片拖拽的问题。阻止默认行为

12.1.7 - 案例:限制范围拖拽

12.2 - 碰撞检测

12.2.1 - 检测元素所有不会碰撞的状态,剩余状态便是碰撞了

12.3 - 综合案例:拖拽图片,碰撞交换位置

12.4 - 自定义滚动条

12.4.1 - 根据内容高度和外框高度计算滚动条高度

12.4.2 - 为滚动条添加限制范围拖拽

12.4.3 - 添加滚轮操作移动滚动条位置

12.4.4 - 根据滚动条移动距离同步内容移动距离

13

第十三章 移动端事件:touch、事件延迟、事件点透、touchEvent、加速度、旋转角度

13.1 - touch事件

13.1.1 - touchstart 手指摁下

13.1.2 - touchmove 手指在元素上摁下之后,在屏幕中移动

13.1.3 - touchend 手指在元素上摁下之后,在屏幕中抬起

13.1.4 - mouse事件的延迟问题,注意鼠标事件在移动端都会有300ms左右的延迟

13.1.5 - 事件点透问题及解决

13.1.6 - 阻止默认事件带来的问题说明

13.1.6.1 - 给document加阻止默认事件的问题

13.1.6.2 - 解决IOS10+ safari 以及部分安卓浏览器 不在支持viewport的最大缩放值和禁止缩放的问题

13.1.6.3 - 解决IOS10+ safari下给body加overflow:hidden无效的问题

13.1.6.4 - 解决事件点透的问题

13.1.6.5 - 禁止mouse事件执行

13.1.6.6 - 阻止浏览器的回弹效果

13.1.6.7 - 阻止触发浏览器的滚动条

13.1.6.8 - 阻止触发系统菜单

13.1.6.9 - 阻止图片文字被选中

13.1.6.10 - 阻止input的输入

13.2 - touchEvent

13.2.1 - touches 当前屏幕上的手指列表

13.2.2 - targetTouches 当前元素上的手指列表

13.2.3 - changedTouches 触发当前事件的手指列表

13.3 - 案例:移动端幻灯片效果实现

13.4 - orientationchange 事件,监听手机横竖屏切换

13.4.1 - window.orientation 获取当前手机横竖屏状态

13.5 - devicemotion 事件,监听手机加速度发生变化

13.5.1 - accelerationIncludingGravity 加速度对象

13.5.1.1 - x x方向速度

13.5.1.2 - y y方向加速度

13.5.1.3 - z z方向加速度

13.5.2 - 注意在ios下和安卓下取值相反

13.6 - deviceorientation 事件, 监听手机旋转角度发生变化

13.6.1 - ev.alpha 围绕Z轴的旋转角度

13.6.2 - ev.beta 围绕X轴的旋转角度

13.6.3 - ev.gamma 围绕Y轴的旋转角度

玩转自如:前后端数据交互、node、ajax、dom、正则表达式(火星文)

14

第十四章 Node.js:环境、Linux、模块、npm、框架、express、Routing、swig、数据库

14.1 - node环境搭建

14.1.1 - Windows

14.1.2 - Mac

14.1.3 - Linux

14.2 - Linux

14.3 - node模块使用

14.4 - commonJS规范

14.5 - 内置模块

14.6 - 第三方模块

14.7 - npm - node package manager

14.8 - 使用http模块搭建web server

14.9 - nodejs-web开发框架介绍

14.9.1 - express

14.9.2 - sails

14.9.3 - koa

14.9.4 - express.io

14.10 - express的安装

14.10.1 - npm init配置安装

14.10.2 - package.json配置安装

14.11 - express项目初始化

14.11.1 - 项目的创建

14.11.2 - 项目的启动运行

14.12 - Routing的使用

14.12.1 - 路由方法:http method、get、post、body-parse模块

14.12.2 - route paths(路由路径):字符串路由、字符串模式路由、正则路由

14.13 - swig模板引擎

14.13.1 - 安装swig

14.13.2 - express中使用swig

14.14.1 - 数据的概念
14.14.2 - 数据库在整个项目中所处的位置
14.14.3 - 数据库的作用--数据持久化
14.14.4 - MongoDB / SqlLite / Mysql 的介绍
14.14.5 - 结构创建
14.14.6 - 数据添加

15

第十五章 AJAX:服务器通信、AJAX 原理、get 和 post、同异步、状态码、ajax 库、跨域、cookie

15.1 - ajax介绍

15.1.1 - ajax全称为Asynchronous JavaScript And XML,即异步的JavaScript和XML

15.1.2 - 主要用来与服务器进行通信

15.1.2.1 - 在不重新加载页面的情况下发送请求给服务器,做到无刷新页面更新数据

15.1.2.2 - 接受并使用从服务器发来的数据

15.2 - 使用ajax技术

15.2.1 - 创建包含发送请求和响应功能的对象:new XMLHttpRequest

15.2.2 - 调用方法,发送实际的请求:

15.2.2.1 - xhr.open():初始化一个请求

15.2.2.1.1 - 语法:xhr.open(method, url[, async])

15.2.2.1.2 - 参数:1、提交方式 Form-method;2,提交地址 Form-action;3、是否为同步,默认为异步

15.2.2.2 - xhr.send():发送ajax请求

15.2.2.2.1 - 参数: 一个可选的参数,其作为请求主体,一般用于post方式

15.2.3 - 常用属性和方法

15.2.3.1 - xhr.onload事件:当一个请求已完成时,将触发load事件

15.2.3.2 - xhr.onreadystatechange事件:当readyState改变是触发的事件

15.2.3.3 - xhr.readyState:记录当前ajax请求所处的状态

15.2.3.3.1 - 值:0,状态:UNSENT,描述: 对象被创建,但尚未调用open方法

15.2.3.3.2 - 值:1,状态:OPENED,描述: 请求已建立, 但未发送 (已调用open方法, 但未调用send方法)

15.2.3.3.3 - 值:2,状态:HEADERS_RECEIVED,描述: 请求已发送 (send方法已调用, 已收到响应头)

15.2.3.3.4 - 值:3,状态:LOADING,描述: 请求处理中, 因响应内容不全

15.2.3.3.5 - 值:4,状态:DONE,描述: 数据接收完毕

15.2.3.4 - xhr.responseText:获取响应的内容,以文本形式存放的内容

15.2.3.5 - xhr.status:http请求的状态码

15.2.3.6 - xhr.statusText:状态短语

15.3 - ajax涉及的知识点

15.3.1 - 请求方法get和post

15.3.1.1 - get方法

15.3.1.1.1 - 长度有限制,发送数据时,向URL 添加数据,格式为key=vaule&key=value

15.3.1.1.2 - 编码类型application/x-www-form-url

15.3.1.1.3 - 参数保留在浏览器历史中

15.3.1.2 - post方法

15.3.2 - 同步和异步

15.3.2.1 - 同步:就是在发出一个功能调用时,在没有得到结果之前,该调用就不返回。也就是必须一件一件事做,等前一件做完了才能做下一件事

15.3.2.2 - 异步:当一个异步过程调用发出后,调用者不能立刻得到结果。通过状态、通知来通知调用者,或通过回调函数处理这个调用

15.3.3 - 状态码status

15.3.3.1 - 200 OK,服务器成功返回用户请求的数据

15.3.3.2 - 304 Not Modified,客户端可以直接从浏览器缓存里获取该资源

15.3.3.3 - 400 Bad Request,发送的请求语法错误,服务器无法正常读取

15.3.3.4 - 403 Forbidden,客户端没有权利访问所请求内容,服务器拒绝本次请求

15.3.3.5 - 404 NOT FOUND,服务器找不到所请求的资源

15.3.3.6 - 500 INTERNAL SERVER ERROR,服务器遇到未知的无法解决的问题

15.3.3.7 - 502 Bad Gateway,服务器获取到了一个无效的HTTP响应s

15.3.4 - JSON.parse()

15.3.4.1 - 当返回的数据为json格式时,需要使用JSON.parse解析

15.3.5 - 发送post请求时

15.3.5.1 - 设置内容的编码类型:xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")

15.3.5.2 - 数据作为send方法的参数发送

15.4 - ajax库使用

15.4.1 - 封装原生的ajax库")

15.4.2 - jQuery中ajax的使用

15.4.2.1 - $.ajax()")

15.4.2.2 - url:请求地址

15.4.2.3 - type:请求类型

15.4.2.4 - data:请求数据

15.4.2.5 - dataType:预期服务器返回的数据类型

15.4.2.6 - success:请求成功调用的函数

15.4.2.7 - error:请求失败时调用的函数

15.4.3 - axios库的使用

15.4.3.1 - 特性:

15.4.3.1.1 - 支持浏览器和服务端发送请求

15.4.3.1.2 - 支持 Promise API

15.4.3.1.3 - 拦截请求和响应

15.4.3.1.4 - 转换请求和响应数据

15.4.3.1.5 - 取消请求

15.4.3.1.6 - 自动转换JSON数据

15.4.3.2 - 使用

15.4.3.2.1 - axios.post(url [,data [,config]])

15.4.3.2.2 - axios.get(url [,config])

15.4.3.2.3 - axios.all(iterable)

15.4.3.2.4 - axios.spread(callback)

15.5 - 上传资源

15.5.1 - from表单上传

15.5.2 - ajax上传

15.5.2.1 - 用一些键值对来模拟一系列表单控件

15.5.2.2 - 更灵活方便的发送表单数据

15.5.3 - xhr.upload.onprogress事件监控上传进度

15.5.4 - xhr.upload.onload事件上传已完成触发

15.6 - 跨域产生和解决方案

15.6.1 - 跨域的产生

15.6.1.1 - 同源策略,为了保证用户信息的安全,防止恶意的网站窃取数据

15.6.1.2 - 同源指三个相同:

15.6.1.2.1 - 协议相同

15.6.1.2.2 - 域名相同

15.6.1.2.3 - 端口相同

15.6.1.3 - 同源策略规定,AJAX请求只能发给同源的网址,否则就报错,以上三个只要有一个不同就产生跨域访问

15.6.2 - 解决方案

15.6.2.1 - JSONP方案

15.6.2.1.1 - script标签不受跨域访问的限制

15.6.2.1.2 - 基本思想是,网页通过添加一个`<script>`元素,向服务器请求JSON数据,服务器收到请求后,将数据数里传回来。

15.6.2.1.3 - 通过回到函数的调用,就可以在函数中拿到请求后的数据

15.6.2.1.4 - 只支持get请求,不支持post请求

15.6.2.2 - 代理方式

15.6.2.2.1 - 前端ajax请求本地接口

15.6.2.2.2 - 本地接口接收到请求后向实际的接口请求数据,然后再将信息返回给前端

15.6.2.3 - CORS请求

15.6.2.3.1 - W3C标准,跨域资源共享(Cross-origin resource sharing)

15.6.2.3.2 - 允许浏览器向跨源服务器发送ajax请求,克服了AJAX只能同源使用的限制

15.6.2.3.3 - 服务端设置响应头

15.7 - cookie介绍

15.7.1 - cookie 是 http 协议的一部分

15.7.2 - 保存登录信息,辨别用户身份

15.7.3 - 大小在4K左右

15.8 - 操作cookie

15.8.1 - 服务端操作cookie

15.8.1.1 - 服务器向客户端发送 cookie

15.8.1.1.1 - 通常使用 HTTP 协议规定的 set-cookie 头操作

15.8.1.1.2 - 规范规定 cookie 的格式为 name = value 格式,且必须包含这部分

15.8.1.2 - 浏览器将 cookie 保存。

15.8.1.3 - 每次请求浏览器都会将 cookie 发向服务器

15.8.2 - 客户端操作cookie

15.8.2.1 - 获取cookie:document.cookie

15.8.2.2 - 设置cookie:document.cookie = newCookie

15.8.3 - 对cookie的设定/更新:

15.8.3.1 - path:表示 cookie 影响到的路径,默认为当前文档位置的路径。

15.8.3.2 - expires 告诉浏览器这个 cookie 什么时候过期,expires 是 UTC 格式时间

15.8.3.3 - secure:当 secure 值为 true 时,cookie 在 HTTP 中是无效,在 HTTPS 中才有效

15.8.3.4 - httpOnly:浏览器不允许脚本操作 document.cookie 去更改 cookie

15.8.4 - 封装操作cookie的方法:setCookie、getCookie、removeCookie

15.9 - localStorage介绍

15.9.1 - 利用localStorage做本地存储

15.9.2 - 保存的数据都仅限于该域名下

15.9.3 - 浏览器关闭,然后重新打开后数据仍然存在,除非清除了浏览器的缓存来清空localStorage

15.9.4 - 大小在5M左右

15.9.5 - 操作localStorage

15.9.5.1 - localStorage.setItem(key,value):设置存储的数据,以key、value的形式存储,将会把键值对添加到存储中,如果键名存在,则更新其对应的值。

15.9.5.2 - localStorage.removeItem():该方法接受一个键名作为参数,并把该键名从存储中删除。

15.9.5.3 - localStorage.getItem():该方法接受一个键名作为参数,返回键名对应的值。

15.9.5.4 - ocalStorage.clear():调用该方法会清空存储中的所有键名。

15.9.6 - storage事件

15.9.6.1 - 创建/更新/删除数据项时,触发该事件,重复设置相同的键值不会触发该事件

15.9.6.2 - 在同一个页面内发生的改变不会起作用——在相同域名下的其他页面发生的改变才会起作用。

15.9.6.3 - 在其他域名下的页面不能访问相同的localStorage

16

第十六章 DOM:DOM 树、节点类型、节点层级、尺寸与坐标、属性操作、表格操作

16.1 - DOM(文档对象模型)

16.2 - DOM树,DOM根据文档结构描绘出的一个层次化的节点树。

16.3 - DOM节点

16.3.1 - childNodes 子节点

16.3.1.1 - nodeType 节点类型

16.3.1.2 - 常用节点:元素节点、属性节点、文本节点、注释节点、文档节点

16.3.1.3 - node.nodeName 节点名称

16.3.2 - 节点的层级关系

16.3.2.1 - parentNode 父节点

16.3.2.2 - children 子元素

16.3.2.3 - firstElementChild 第一个子元素

16.3.2.4 - lastElementChild 最后一个子元素

16.3.2.5 - perviousElementSiblings 上一个兄弟元素

16.3.2.6 - nextElementSiblings 下一个兄弟元素

16.3.2.7 - offsetParent 定位父级

16.3.3 - 元素相关尺寸及位置获取

16.3.3.1 - offsetLeft / offsetTop 距离定位父级的距离

16.3.3.2 - offsetWidth / offsetHeight 可视宽高

16.3.3.3 - clientLeft / clientTop 边框宽度

16.3.3.4 - clientWidth / clientWidth 可视宽高(不含边框)

16.3.3.5 - getBoundingClientRect()

16.3.3.5.1 - width/height 可视宽高

16.3.3.5.2 - left/top/right/bottom 元素距离可视区距离

16.3.4 - 元素的属性操作

16.3.4.1 - 获取属性:getAttribute

16.3.4.2 - 设置属性:setAttribute

16.3.4.3 - 删除属性:removeAttribute

16.3.5 - 元素操作

16.3.5.1 - 创建元素:createElement

16.3.5.2 - 插入元素:appendChild、insertBefore

16.3.5.3 - 删除元素:removeChild

16.3.5.4 - 替换元素:replaceChild

16.3.5.5 - 克隆元素:cloneChild

16.3.6 - 表格操作

16.3.6.1 - tBodies 包含表格中所有 tbody 的一个集合

16.3.6.2 - rows 包含表格中所有行的一个集合

16.3.6.3 - ceils 包含表格中所有单元格的一个集合

16.4 - 综合案例:配后端的留言板案例(添加留言、删除留言)

17

第十七章 正则表达式(火星文):字面量、规则表达式、修饰符、正则方法、元字符、边界符、数量词

17.1 - 什么是正则表达式

17.1.1 - 正则表达式,又称规则表达式,查找匹配某些符合规则的字符串,正则表达式就是写这种规则的工具

17.2 - 创建正则表达式

17.2.1 - 字面量定义:/规则表达式/[修饰符]

17.2.2 - 对象方式: new RegExp(规则表达式字符串,[修饰符])

17.3 - 规则表达式组成

17.3.1 - 普通字符:普通字符包括大小写的字母和数字,以及一些常用的符号

17.3.2 - 元字符:具有特殊意义的专用字符。 比如:{}、[]、()、d、w 等等

17.4 - 修饰符

17.4.1 - 修饰符是影响整个正则规则的特殊符号

17.4.2 - 修饰符可以具有以下值的任意组合:

17.4.2.1 - g(global ): 全局匹配,找到所有匹配,而不是在第一个匹配后停止

17.4.2.2 - i(ignore): 忽略大小写:

17.4.2.3 - m(multiline): 多行模式匹配,分别匹配每一行的开始和结束(由 或 分割)

17.5 - 正则的方法

17.5.1 - 作用:执行一个检索,用来查看正则表达式与指定的字符串是否匹配

17.5.2 - 语法:regexObj.test(str)

17.5.3 - 参数str:用来与正则表达式匹配的字符串

17.5.4 - 返回值:如果正则表达式与指定的字符串匹配 ,返回true;否则false

17.6 - 字符串的方法

17.6.1 - string.search()

17.6.1.1 - 作用:检索指定字符串或正则表达式匹配到的字符串首次出现的位置

17.6.1.2 - 语法:string.search(string|regexObj)

17.6.1.3 - 参数:字符串或正则表达式

17.6.1.4 - 返回值:匹配到的字符串首次出现的位置;没有检索到返回-1

17.6.2 - string.match()

17.6.2.1 - 作用:检索指定字符串或正则表达式匹配到的字符串

17.6.2.2 - 语法:string.match(string|regexObj)

17.6.2.3 - 参数:字符串或正则表达式

17.6.2.4 - 返回值:返回数组---把匹配到的字符串放在数组中;没有检索到返回null

17.6.2.5 - 注意:带有g,全局匹配,返回的是匹配到的字符串组成的数组;不带g,匹配一个字符串,并且数组会有index和input属性

17.6.3 - string.replace()

17.6.3.1 - 作用:用来替换字符串中的某些符合规则的字符

17.6.3.2 - 语法:string.replace(string|regexObj,string|function)

17.6.3.3 - 参数:第一个参数:字符串或正则表达式;第二个参数:字符串或函数

17.6.3.4 - 返回值:替换后新字符串

17.6.3.5 - 第二个参数为函数,必须要有返回值,否则替换后的内容为undefined

17.7 - 元字符

17.7.1 - 正则表达式中有特殊含义的字符

17.7.2 - 传义符 传义符后面跟上一个字符,代表特殊的内容

17.7.3 - d 代表一个数字

17.7.4 - D 代表一个非数字

17.7.5 - s 一个空格

17.7.6 - S 非空格

17.7.7 - w 字母、数字、_

17.7.8 - W 非字母、数字、_

17.8 - 边界符

17.8.1 -  单词边界

17.8.2 - B 非单词边界

17.8.3 - ^ 字符串开始

17.8.4 - $ 字符串结尾

17.9 - 数量词

17.9.1 - 指定规则出现的次数

17.9.2 - {n} 重复出现n次

17.9.3 - {n,} 重复出现至少n次,最多不限

17.9.4 - {n,m} 重复出现至少n次,最多重复出现m次

17.9.5 - 出现0次或多次,等价于{0,}

17.9.6 - ? 出现0次或1次,等价于{0,1}

17.9.7 - 出现1次或多次,等价于{1,}

17.10 - 分组

17.10.1 - 规则表达式中使用(),代表分组、子表达式、子模式

17.10.2 - (?:)不捕获分组信息

17.11 - 字符集合

17.11.1 - 规则表达式中使用[],匹配集合中的任意一个字符

17.11.2 - NaN

17.11.3 - [^]排除字符,匹配任意不在括号内的字符

17.11.4 - 匹配中文:[一-龥]

17.12 - 正则中的两种模式

17.12.1 - 贪婪模式:尽可能多的匹配

17.12.2 - 懒惰模式:尽可能少的匹配

17.12.3 - 加上 ? 开启懒惰模式

17.13 - 案例精选

17.13.1 - 实例:验证QQ

17.13.2 - 实例:验证邮箱

17.13.3 - 实例:去除小说文本标签

17.13.4 - 实例:过滤敏感词

海阔天空:最新 JQuery3、面向对象及深度掌握 ECMAScript6

18

第十八章 面向对象:OOP、封装继承多态、构造函数、new、instanceof、prototype、原型链、class

18.1 - 面向对象编程

18.1.1 - 面向对象编程(oop)是一种编程思想,用抽象方式创建基于现实世界模型的一种编程模式。目的是在编程中促进更好的灵活性和可维护性。

18.1.2 - JavaScript是基于构造函数(constructor)和原型链(prototype),JavaScript 语言使用构造函数(constructor)作为对象的模板

18.1.3 - 所谓”构造函数”,就是专门用来生成对象的函数。它提供模板,描述对象的基本结构。一个构造函数,可以生成多个对象,这些对象都有相同的结构

18.1.4 - 面向对象三大特性:封装、 继承、多态

18.2 - 创建对象

18.2.1 - 使用字面量的形式 {}

18.2.2 - 缺点:创造具有相同属性和方法的对象时,会产生大量重复的代码

18.2.3 - 工厂模式:使用函数封装了创造特定属性和方法的对象,抽象了创建对象的具体过程

18.2.4 - 工厂模式解决了创建相似对象的问题,但没解决对象识别的问题。

18.3 - 构造函数模式

18.3.1 - 构造函数也是普通的函数,当使用new操作符调用时,称之为构造函数或构造方法

18.3.2 - 可以使用构造函数创建特定类型的对象

18.3.3 - new操作符

18.3.3.1 - 作用:执行构造函数,返回一个实例对象

18.3.3.2 - 语法:new constructor[([arguments])]

18.3.3.3 - constructor:指定对象类型的函数;

18.3.3.4 - 当使用new创建对象时:

18.3.3.4.1 - 在函数内部创建一个实例对象,实例对象继承自函数的prototype

18.3.3.4.2 - 将函数中的this指向实例对象

18.3.3.4.3 - 执行函数,通过this给对象添加属性

18.3.3.4.4 - 执行后,返回这个创建的实例对象

18.3.4 - instanceof运算符

18.3.4.1 - 作用:用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性。

18.3.4.2 - 语法:object instanceof constructor

18.3.4.3 - 描述:object要检测的对象;constructor构造函数

18.3.4.4 - 运算后结果:存在值为true;否则为false

18.3.5 - hasOwnProperty()

18.3.5.1 - 作用:用来检测一个对象自身是否具有指定的属性

18.3.5.2 - 语法:obj.hasOwnProperty(prop)

18.3.5.3 - 参数:prop要检测的属性名

18.3.5.4 - 返回值:有指定的属性,返回true;否则返回false

18.3.5.5 - 注意:此方法不会沿着原型链查找继承的属性

18.3.6 - in运算符

18.3.6.1 - 作用:检测指定的属性是否在指定的对象或对象的原型链中

18.3.6.2 - 语法:prop in object

18.3.6.3 - 参数:prop要检测的属性名;

18.3.6.4 - 运算后结果:存在值为true;否则为false

18.3.6.5 - 注意:会沿着原型链查找继承的属性

18.4 - prototype(原型)模式

18.4.1 - 每一个函数都拥有prototype(原型)属性,指向一个对象,称之为原型对象

18.4.2 - 用途是所有通过这个构造函数创建的实例共享原型对象的属性和方法

18.4.3 - 好处是不必要在每个对象中定义共享的属性和方法,直接定义在原型对象上,只需要定义一次

18.4.4 - constructor属性

18.4.4.1 - 原型对象上默认会有一个constructor属性,它的值是拥有这个原型对象的构造函数

18.4.5 - __proto__

18.4.5.1 - 每一个对象都拥有__proto__属性,这个属性指向这个对象的原型[[prototype]]

18.4.5.2 - 通过new构造函数的形式创建的对象会指向构造函数的prototype

18.4.5.3 - 这个属性连接了实例和构造函数原型对象

18.4.6 - 原型链

18.4.6.1 - __proto__属性指向这个对象自己的原型,原型也是一个对象会指向它自己的原型,最顶层的原型对象是Object.prototype

18.4.6.2 - 这些对象和原型对象彼此相互关联,就形成了原型链

18.4.6.3 - 原型链的作用

18.5 - 继承

18.5.1 - 构造函数继承

18.5.1.1 - 在子类型构造函数的内部通过call或apply调用父类构造函数

18.5.1.2 - 把父类构造函数的this指向子类构造函数内部的实例对象

18.5.1.3 - 达到将父类构造函数内部的属性初始化在子类的实例对象上

18.5.2 - 原型式继承

18.5.2.1 - 创建一个对象,作为构造函数的原型对象

18.5.3 - 拷贝继承

18.5.3.1 - 把一个对象上的属性通过拷贝的方式给到构造函数的原型对象

18.5.4 - Object.create()

18.5.4.1 - 作用:会使用指定的原型对象及其属性去创建一个新的对象

18.5.4.2 - 语法:Object.create(proto[, propertiesObject])

18.5.4.3 - 参数:proto新创建对象的原型对象,值为为null或对象;

18.5.4.4 - 返回值:指定原型对象上添加新属性后的对象

18.5.5 - Object.getPrototypeOf()

18.5.5.1 - 作用:返回指定对象的原型(内部[[Prototype]]属性的值)

18.5.5.2 - 语法:Object.getPrototypeOf(obj)

18.5.5.3 - 参数:obj要返回其原型的对象

18.5.6 - Object.setPrototypeOf()

18.5.6.1 - 作用:设置一个指定的对象的原型

18.5.6.2 - 语法:Object.setPrototypeOf(obj, prototype)

18.5.6.3 - 参数:obj要设置其原型的对象;prototype该对象的新原型(一个对象 或 null)

18.5.7 - Object.isPrototypeOf()

18.5.7.1 - 作用:方法用于测试一个对象是否存在于另一个对象的原型链上

18.5.7.2 - 语法:prototypeObj.isPrototypeOf(object)

18.5.7.3 - 参数:object在该对象的原型链上搜寻

18.5.7.4 - 返回值:要检测的对象在原型链上返回true,否则为false;

18.6 - ECMAScript 2015中的 class 使用

18.6.1 - 实质上是 JavaScript 现有的基于原型的继承的语法糖

18.6.2 - 提供了一个更简单和更清晰的语法来创建对象并处理继承

18.6.3 - 定义类

18.6.3.1 - 使用关键字:class

18.6.3.2 - 语法:class 类名{}

18.6.3.3 - 类名不会声明提升,首先需要声明你的类,然后访问它

18.6.3.4 - constructor:是类的默认方法,通过new命令生成对象实例时,自动调用该方法

18.6.3.5 - 静态方法:使用关键字static

18.6.4 - Class 的继承extends关键字

18.6.4.1 - Class 可以通过extends关键字实现继承,这比 ES5 的通过修改原型链实现继承,要清晰和方便很多。

18.6.4.2 - super 关键字,可以使用 super 关键字来调用一个父类的构造函数,如果继承中子类中有constructor必须调用一下super,否则会报错。

18.6.5 - 【实例】选项卡面向对象初体验

18.6.6 - 【实例】拖拽面向对象

19

第十九章 jQuery3:整体架构、代码分析、选择器、常用 API、JQ 事件、动画、编写 JQ 插件

19.1 - JQuery介绍

19.1.1 - jQuery 是一个兼容多浏览器的javascript库,核心理念是write less,do more(写得更少,做得更多)

19.1.2 - jQuery的语法设计可以使开发更加便捷,例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能

19.2 - JQuery整体架构

19.2.1 - 使用匿名函数自执行,避免变量全局污染

19.2.2 - 给匿名函数传入window和函数,兼容模块化写法

19.2.3 - 在浏览器环境,给factory传入的是window

19.2.4 - 传入window可以节省找全局window的时间,提高性能

19.2.5 - noGlobal为undefined,确保undefined可以使用

19.2.6 - 代码分析

19.2.6.1 - 不用new的方式,因为内部已经实例化了

19.2.6.2 - 防止循环调用,构造函数为jQuery原型上的方法

19.2.6.3 - jQuery原型给到init函数的原型,可以访问jQuery原型方法和属性

19.2.6.4 - 通过挂载window对象上暴露出jQuery,别名为$,方便操作

19.2.7 - jQuery内置选择器库Sizzle.js

19.3 - JQuery选择器、常用API

19.3.1 - $(callBack)、$(document).ready(callBack)

19.3.2 - jQuery( selector [context ] )

19.3.3 - jQuery( element )

19.3.4 - 选择器

19.3.4.1 - 元素选择器:$("#id")、$("#className")、$("tagname")

19.3.4.2 - 属性选择器: $("[href]")、$("[href='#']")

19.3.4.3 - 过滤选择器: :first、:last、:not(selector)、:eq(index)、 :animated

19.3.4.4 - 属性过滤选择器:$("[attribute = value]")、$(" [attribute != value]")、$("[attribute]")

19.3.4.5 - eq()、click()、css()、addClass()、index()、find() 等方法的使用

19.3.4.6 - 工具方法

19.3.4.6.1 - $.type()、$.isFunction()、$. isNumeric() 、$. isArray()、$. isWindow()、$. isEmptyObject()、$. isPlainObject()

19.4 - DOM/BOM操作

19.4.1 - 元素选择:find()、children()、parent() 等方法使用

19.4.2 - 过滤操作:filter()、has()、parents()、closest()、siblings() 等方法使用

19.4.3 - 对元素进行增删改操作: clone()、wrap()、unwrap()、remove()

19.4.4 - 元素位置与尺寸:width()、innerWidth()、outerWidth()、offset()、position()等方法

19.4.5 - 改变浏览器触发事件:resize()、scroll()等方法

19.5 - JQuery事件系统

19.5.1 - 常用事件: click()、mouseover()、mouseout、mouseenter()、mouseleave()、hover() 等事件

19.5.2 - 绑定和解除绑定的方法: on(evName,callback)、off(evName,callback)

19.5.3 - 事件委托和自定义事件: on(evName,target,callback)

19.5.4 - 事件触发器:trigger(evName)

19.5.5 - 事件对象Event:clientX/clientY、pageX/pageY、target、stopPropagation()、preventDefault()

19.6 - JQuery动画

19.6.1 - 动画函数: show()、hide()、toggle(),fadeIn()、fadeOut()、fadeToggle()

19.6.2 - 动画函数: slideDown()、slideUp()、slideToggle()、animate()等

19.6.3 - animate函数参数的使用:duration持续时间,easing动画形式,callback回调函数

19.6.4 - 动画链式运动、延迟运动delay(),停止动画stop()、停止并到达目标点finish()

19.7 - 编写和使用JQuery插件

19.7.1 - 使用插件功能其实就是给JQuery扩展功能

19.7.2 - $.extend()扩展JQuery静态方法

19.7.3 - $().extend()扩展JQuery动态方法

19.7.4 - 编写浅拷贝和深拷贝方法

19.8 - 实例:JQuery版本的拖拽

19.9 - 实例:JQuery好友列表

19.10 - 实例:JQuery表单验证插件

20

第二十章 ECMAScript6:let、块级作用域、const、解构赋值、模板字符串、箭头函数、扩展

20.1 - ECMAScript6介绍

20.1.1 - 是目前ECMAScript语言规范的标准,通常被称为"ES2015"

20.1.2 - 目标是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言

20.2 - 声明变量的方式

20.2.1 - var关键字

20.2.2 - let关键字

20.2.2.1 - 不允许重复声明

20.2.2.2 - 不存在变量提升

20.2.2.3 - 声明只在最靠近的一个块中(大括号内)有效

20.2.2.4 - 块级作用域 暂存死区(从块的开始到声明这段的区域)

20.2.3 - const关键字

20.2.3.1 - 特性同let

20.2.3.2 - 声明一个只读的常量。一旦声明,常量的值就不能改变

20.3 - 解构赋值

20.3.1 - ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构

20.3.2 - 数组的解构赋值

20.3.3 - 对象的解构赋值

20.3.4 - 字符串的解构赋值

20.3.5 - 函数参数的解构赋值

20.4 - 模板字符串

20.4.1 - 模板字符串(template string)是增强版的字符串,用反引号(`)标识。

20.4.2 - 占位符 ${} 中写入表达式

20.5 - 箭头函数

20.5.1 - 使用“箭头”(=>)定义函数

20.5.2 - 函数体内的this值,绑定的定义时所在的作用域的this

20.5.3 - 不可以当作构造函数

20.5.4 - 不可以使用arguments对象

20.6 - 函数的扩展

20.6.1 - 函数参数默认值,给形参直接赋值

20.6.2 - 在函数体中,不能用let或const再次声明,否则会报错

20.6.3 - rest 参数(形式为...变量名),用于获取函数的多余参数,放在数组中可取代arguments

20.7 - 数组的扩展

20.7.1 - 扩展运算符(spread),将一个数组转为用逗号分隔的参数序列。

20.7.2 - Array.from():用于将类数组和可遍历的对象转为真正的数组

20.7.3 - arr.includes():返回一个布尔值,表示某个数组是否包含给定的值

20.7.4 - arr.find():用于找出数组中第一个符合条件的元素

20.7.5 - arr.findIndex():用于找出数组中第一个符合条件的元素的下标

20.8 - 字符串的扩展

20.8.1 - str.repeat(n)返回一个新字符串,表示将原字符串重复n次。

20.9 - 对象的扩展和简写

20.9.1 - 简洁表示法:1. 变量名和属性名相同,可直接写入变量名;2. 函数可省略function关键字

20.9.2 - 属性名表达式: 定义属性可以使用[]计算的方式

20.9.3 - Object.is():比较同值相等,可比较出NaN是否相同

20.9.4 - Object.assign():用户合并对象,将源对象的所有可枚举属性,复制到目标对象,如果不是对象,转成对应类型的对象

20.9.5 - Object.keys():返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键名

融会贯通:JavaScript 全栈系列工程化进阶:react 全家桶、vue 全家桶

21

第二十一章 React+redux 全家桶开发:jsx、可维护组件、props、数据流、state、路由、webpack

21.1 - React.js 是一个帮助你构建页面 UI 的库,它不是一个框架,它只是一个库。它只提供 UI (view)层面的解决方案。React 的组件就相当于 MVC 里面的 View层。

21.2 - React.js 将帮助我们将界面分成了各个独立的小块,每一个块就是组件,这些组件之间可以组合、嵌套,就成了我们的页面。

21.3 - 一个组件的显示形态和行为有可能是由某些数据决定的。而数据是可能发生改变的,这时候组件的显示形态就会发生相应的改变。而 React.js 也是基于数据渲染界面。

21.4 - React.js

21.4.1 - jsx 语法, 写结构的语法糖, 快速创建 dom 结构

21.4.1.1 - 在 jsx 中嵌入表达式,jsx 本身作为表达式,在 jsx 中指定属性,在 jsx 中指定 children

21.4.1.2 - jsx 中的防注入攻击, react 会把内容转成字符串

21.4.1.3 - 写在 React 作用域内,使用点符号,大写开头的自定义组件

21.4.1.4 - 运行时选择类型的解决方案

21.4.1.5 - 在属性中使用表达式,字符串字面量,属性的默认值: true,属性的展开写法,字面量作为 children

21.4.1.6 - jsx 作为 children,表达式作为 children,函数作为 children

21.4.1.7 - 会被忽略的 Booleans, Null, Undefined, 不会渲染到页面

21.4.2 - 定义组件, 构建一个可维护的应用

21.4.2.1 - 类式组件, 有完整的生命周期和内部状态

21.4.2.2 - 函数式组件, 为渲染而生, 没有生命周期和内部状态

21.4.2.3 - 使用 PropTypes 对 props 进行类型检查, 在开发期间规范代码和数据检测

21.4.2.4 - 定义默认 props, 在没有传入 props 的时候, 保证有一个默认值

21.4.2.5 - 使用 refs 得到真实的 DOM, 可以调用浏览器 dom 的 API

21.4.2.6 - 使用 refs 得到类组件实例, 可以访问组件实例的方法和属性

21.4.3 - JSX中的事件系统Event

21.4.3.1 - react 中的合成事件对象, 事件触发会往回调函数传入一个 event 对象, 这是 react 集成的, 也可以通过 event.nativeEvent 拿到原生事件对象

21.4.3.2 - react 中支持的事件, react 中有着完善的事件支持, 而且不需要额外兼容

21.4.4 - props, 构建视图, 在组件直接建立沟通的桥梁

21.4.4.1 - 组件之间的交流, 组件之间可以通过 prop 传递数据

21.4.4.2 - 单向数据流, 组件的数据永远是从顶层流向底层, 这会带来清晰的数据流

21.4.4.3 - props 只读, 属性是只读的, 这样会保护单向数据流的特性

21.4.5 - state, 更新视图, 把对页面的维护变成对数据的维护

21.4.5.1 - 定义组件的内部状态, 内部状态意味它某个时刻可能会变化

21.4.5.2 - react 更新视图的机制, 如果要修改 state, 应该使用 setState

21.4.5.3 - state 的异步更新, 在一次事件循环中 state 不会马上改变

21.4.5.4 - state 的合并更新, 多次 setStete 会合并在一起, 保证效率和性能

21.4.5.5 - 让组件受控, 限制组件自身的行为, 接受 react 控制

21.4.5.6 - setState API, 通过它来更新组件的状态

21.4.6 - 生命周期, 利用钩子函数更简便的参与页面的状态变化

21.4.6.1 - Mounting 阶段

21.4.6.1.1 - constructor(), 构造组件实例

21.4.6.1.2 - componentWillMount(), 组件将要挂载之前

21.4.6.1.3 - render(), 返回 jsx, 用于渲染

21.4.6.1.4 - componentDidMount(), 组件挂载完成之后调用,可以在此发起数据请求

21.4.6.2 - Updating 和相应的生命周期函数

21.4.6.2.1 - componentWillReceiveProps(), 依赖于父组件更新阶段的 render 执行, 可以在此 setState

21.4.6.2.2 - shouldComponentUpdate(), 可以拦截此次更新, 阻断 render 的执行, 在这里可以做一些性能优化的操作

21.4.6.2.3 - render(), 返回 jsx, 用于渲染

21.4.6.2.4 - componentDidUpdate(), 更新之后函数会执行

21.4.6.3 - Unmounting 和相应的生命周期函数

21.4.6.3.1 - componentWillUnmount(), 在组件卸载之前可以在此做一些清空操作, 比如不再等待数据返回, 清空定时器和事件

21.4.7 - react-router-dom

21.4.7.1 - 构建多视图应用的最佳实践

21.4.7.2 - 不同类型的Router, 你应该把你的组件置于这个组件之下

21.4.7.2.1 - BrowserRouter, 使用 html5 history api, 需要后端的服务器配置

21.4.7.2.2 - HashRouter, 它使用起来兼容性更强, 也不需要在服务器做一些其他配置

21.4.7.3 - Link和 NavLink, 一个增强的 a 链接, 你可以使用它来跳转页面

21.4.7.4 - Route, 路由的核心组件, 如果 path 被匹配到, 它指定的组件会被渲染

21.4.7.4.1 - 使用 component 渲染组件, 接受一个组件变量或回调函数用于渲染

21.4.7.4.2 - 使用 render 渲染组件, 接受一个回调函数用于渲染

21.4.7.4.3 - 使用 children 渲染组件, 接受一个回调函数用于渲染, 但此 route 一定会被匹配

21.4.7.4.4 - atch prop、location prop、history prop、被匹配到的组件可以通过不同的方式拿到以上三个组件

21.4.7.4.5 - exact 级别的匹配, 这意味着你没法利用穿透特性去匹配路由

21.4.7.4.6 - strict 级别的匹配, path 的后的 slash 大有不同, 它要求你的 location.pathname 也必须也有 slash

21.4.7.5 - Switch , 有时候你想让一个的 pathname 匹配到多个 Route 来组合你的页面, 但有时候你只想挑选其中一个, 使用 Switch

21.4.7.6 - Redirect 路由的重定向 , 如果它被渲染, 会重新跳转地址

21.4.7.7 - withRouter 可以跨层级拿到 match, location, history

21.4.8 - redux状态管理

21.4.8.1 - 管理更复杂的应用状态, 提供可预测的状态管理

21.4.8.2 - action 动作, 如果你要修改数据, 你应该先发起一个动作

21.4.8.2.1 - action creater, 它用来创建 action, 有中间件参与有你还可以在里面封装逻辑和异步操作

21.4.8.2.2 - 使用 bindActionCreators 绑定 action creater, 这样你就可以直接发起 action 啦

21.4.8.3 - reudcer , 计算出下一个应用状态

21.4.8.3.1 - 纯函数, 确定的输入总会有相同的数据, 并且无副作用

21.4.8.3.2 - 使用 combineReducers 合并子 reducers, reducer 只有一个, 此方法可以把你写的小 reducer 快速合并成一个

21.4.8.4 - middleware, 中间件, 捕捉每一次 action

21.4.8.4.1 - 理解 middleware, 在 action 的发起到 reducer 的执行的期间, 你可以让 middleware 介入并做一些其他操作

21.4.8.4.2 - 一个简单的 middleware, redux-thunk, 这样你的 action creator 可以返回更多的数据类型

21.4.8.5 - store, 应用中唯一 store, 使用这个对象用来维护整个应用的 state

21.4.8.5.1 - getState 方法, 获取state

21.4.8.5.2 - dispatch( action ), 更新 state

21.4.8.5.3 - subscribe(listener) 注册监听器

21.4.8.6 - react-redux, 让 react 和 redux 连接起来

21.4.8.6.1 - Provider 应用中最顶层的组件

21.4.8.6.2 - connect, 连接 react组件 和 store, 这个高阶组件可以返回一个增强过后的组件, 如果你想让某个应用从 state 里面拿到数据, 使用 connect

21.4.9 - webpack

21.4.9.1 - 模块打包器, 除了分析 js 模块依赖, 配合相应的 loader 还可以对你的资源依赖进行分析和打包

21.4.9.2 - loader 相关, 在引入模块前, loader 会先预处理一下模块的内容

21.4.9.2.1 - babel-loader 处理 js 模块, 配合不同的 babel 插件可以编译不同内容

21.4.9.2.2 - css, style-loader 引入 css, 如果你要引入 css, 应该先让 css-loader 介入处理

21.4.9.2.3 - file-loader 加载资源文件, css-loader 会帮你引入一些图片或者你会在 js 里面引入一些资源依赖, 这个时候需要你把这些路径和资源交给 file-loader 处理.

21.4.9.3 - plugin 相关, 插件会做一些 loader 做不来的事情, 它可能会在构建的不同时间点起作用

21.4.9.3.1 - html-webpack-plugin

21.4.9.3.2 - clean-webpack-plugin

21.4.9.3.3 - ProvidePlugin, 更快速的引入模块

21.4.9.3.4 - devtool 找到源码的位置

21.4.9.3.5 - webpack-dev-server, 开发测试的利器

22

第二十二章 vue 2.0 全家桶开发:响应式编程、声明式渲染、指令、数据类、钩子函数、组件通信、vuex

22.1 - Vue是一个构建数据驱动的Web界面的库,通过简单的API提供高效的数据绑定和灵活的组件系统。

22.2 - Vue具有简洁、轻量、快速、 数据驱动、 组件化等特点,除此之外,Vue还具有上手快,简单易学,学完即用,快速开发的优势。

22.3 - 可把页面组件化、模块化,分工明确,互不干涉,低耦合的设计使组件可复用、可测试,更易于维护。

22.4 - 响应式编程,开发者只需要聚焦在状态的逻辑处理上,让框架来进行DOM操作,不需要自己手动更新视图

22.5 - 官方提供健全的周边工具,例如vue-cli创建项目目录和开发环境配置、vue-router前端路由创建单页应用、vuex集中式应用状态管理器。

22.6 - Vue语法从零到熟练

22.6.1 - Vue的两大特点

22.6.1.1 - 响应式数据绑定:数据的增删改查都是可被watch的,一旦变动自动更新视图

22.6.1.2 - 可组合的视图组件:把页面拆成多组件,可达到封装、复用、可测试的目的

22.6.2 - 声明式渲染

22.6.2.1 - 描述要什么样子,让框架帮你做

22.6.2.2 - 声明模板语法将实例数据进行绑定

22.6.2.3 - 模板语法-插值:采用“Mustache”语法{{表达式|实例数据}}

22.6.2.4 - 把注意力全身心的投入到业务逻辑的数据处理上,而无需手动变动DOM的更新

22.6.3 - 指令

22.6.3.1 - 自定义属性,写在标签上以v-为前缀的特殊属性

22.6.3.2 - 预期的值为javascript表达式

22.6.3.3 - 作用是将数据和DOM做关联,当表达式的值改变时,响应式地作用于DOM上

22.6.4 - 常用指令一览

22.6.4.1 - v-bind:动态的绑定数据到DOM元素上,当数据发生变化,响应的更新DOM数据

22.6.4.2 - v-once:只渲染元素和组件一次,随后数据更新,并不会重新更新DOM数据,可视为静态内容,将渲染结果缓存起来,用于优化更新性能

22.6.4.3 - v-show:根据表达式之真假值,切换元素的 display CSS 属性

22.6.4.4 - v-if:根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建

22.6.4.5 - v-if、v-else-if、v-else:多重条件选择渲染

22.6.4.6 - v-for:基于源数据多次渲染元素或模板块;v-for默认行为试着不改变整体,而是替换元素。迫使其重新排序的元素,你需要提供一个 key 的特殊属性:

22.6.4.7 - v-model:随表单控件类型不同而不同,在表单控件或者组件上创建双向绑定

22.6.4.8 - v-cloak:以隐藏未编译的 Mustache 标签直到实例准备完毕

22.6.4.9 - v-once:只渲染元素和组件一次,这可以用于优化更新性能

22.6.4.10 - 自定义指令:除了核心功能默认内置的指令,也允许注册自定义指令

22.6.5 - 选项对象

22.6.5.1 - 在启动整个应用实例化时传入的参数。通过这些选项来创建想要的行为

22.6.5.2 - el(element):提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标

22.6.5.3 - 数据类:

22.6.5.3.1 - data(数据):应用的数据,可被转为getter/setter,能够响应数据的变化

22.6.5.3.2 - computed(计算属性):将对data数据的逻辑抽离在计算属性中;这些属性依赖data的变化而相应;计算属性的结果会被缓存,多次使用不重新计算。

22.6.5.3.3 - methods(方法):存放应用中封装的方法,例如事假处理函数

22.6.5.3.4 - watch(侦听属性):当有一些数据需要随着其它数据变动而变动时,可通过watch侦听

22.6.5.3.5 - computed VS methods VS watch watch:这三者在某些功能点是重复的,何时使用使用在什么样的场景。

22.6.5.4 - 生命周期钩子函数

22.6.5.4.1 - beforeCreate:实例初始化之后,数据观测之前调用

22.6.5.4.2 - created:实例创建完成后被立即调用,数据观测,计算属性,方法定义都已完成,但还没开始挂载。

22.6.5.4.3 - beforeMount:挂载开始之前被调用

22.6.5.4.4 - mounted:挂载之后调用该钩子函数

22.6.5.4.5 - beforeUpdate:数据更新时调用,可以在这个钩子中进一步地更改状态,这不会触发附加的重渲染过程

22.6.5.4.6 - updated:数据更新之后调用该函数,当这个钩子被调用时,组件 DOM 已经更新

22.6.5.4.7 - beforeDestroy:实例销毁之前调用

22.6.5.4.8 - destroyed:实例销毁后调用,调用后实例中所有东西都会解除绑定,子实例也会被销毁

22.6.6 - 组件

22.6.6.1 - 什么是组件:

22.6.6.1.1 - 1. 封装可重用的代码;

22.6.6.1.2 - 2. 组件是自定义元素,Vue.js 的编译器为它添加特殊功能

22.6.6.1.3 - 3. 用 is 特性进行了扩展的原生 HTML 元素

22.6.6.2 - 组件的定义和使用:

22.6.6.2.1 - 1. 全局组件

22.6.6.2.2 - 2. 局部组件;

22.6.6.2.3 - 3. 单文件组件

22.6.6.3 - 一个通用组件所具备的三个部分:

22.6.6.3.1 - 1. Prop允许外部环境定制组件;

22.6.6.3.2 - 2. custom event监听内部触发外部产生的副作用;

22.6.6.3.3 - 3. slot插槽允许将外部环境的结构组合到组件中

22.6.6.4 - 组件之间的通信

22.6.6.4.1 - 1. 父->子 使用可定制的prop传递

22.6.6.4.2 - 2. 子->父 自定义事件

22.6.6.5 - slot插槽定制组件的结构

22.6.6.5.1 - 1. 单个插槽

22.6.6.5.2 - 2. 具名插槽

22.6.6.5.3 - 3. 作用域插槽

22.6.6.6 - 组件间的双向数据绑定

22.6.6.7 - 多种组件:动态组件、异步组件、递归组件

22.6.7 - vue-cli脚手架创建无痛webpack配置目录结构

22.6.7.1 - webpack的基础配置初探

22.6.7.1.1 - 1. 启动应用开发模式

22.6.7.1.2 - 2. resolve配置访问路径

22.6.7.1.3 - 3. 打包项目

22.6.7.2 - 单文件组件的定义和使用

22.6.7.2.1 - 1. 定义的命名约定

22.6.7.2.2 - 2. import引入使用组件

22.6.8 - vue-router单页应用的前端路由管理利器

22.6.8.1 - 前端路由的作用

22.6.8.1.1 - 将组件映射在对应的路由,访问时渲染

22.6.8.1.2 - 做单页应用

22.6.8.2 - 路由配置使用前置准备

22.6.8.2.1 - 安装路由模块

22.6.8.2.2 - 配置路由参数

22.6.8.2.3 - 注入Vue根实例中

22.6.8.2.4 - router-view声明渲染的位置

22.6.8.3 - 嵌套路由:视图有多层组件嵌套,同样路由也有多层组件嵌套,格式为:/a/b/c

22.6.8.4 - 动态路由:把匹配到的路径都映射到同一个组件,其中不同路径可以设置为动态路径访问,可通过路由信息对象$route拿到动态参数pramas

22.6.8.5 - 命名路由:通过name标识一个路由

22.6.8.6 - HTML5 History 模式

22.6.8.7 - 重定向 和 别名

22.6.8.8 - 导航守卫

22.6.8.8.1 - 全局守卫

22.6.8.8.2 - 路由对象守卫

22.6.8.8.3 - 组件内守卫

22.6.8.9 - 代码分隔懒加载:结合 Vue 的异步组件和 Webpack 的代码分割功能,轻松实现路由组件的懒加载

22.6.8.10 - 编程式导航

22.6.8.10.1 - router.push()向history stack中添加记录

22.6.8.10.2 - router.replace()替换当前history stack中的记录

22.6.8.10.3 - router.go()指定前进后退的记录数

22.6.8.11 - 常用API:

22.6.8.11.1 - router-link:创建一个链接

22.6.8.11.2 - router-view:声明组件渲染的位置

22.6.8.11.3 - mode:访问模式,默认为:“hash”模式,可改为“history”

22.6.8.11.4 - base:路由的基本路径,上线到服务端常用

22.6.9 - vuex集中式应用状态管理器

22.6.9.1 - vuex采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化

22.6.9.2 - 什么时候需要用到vuex

22.6.9.2.1 - 1. 当多个视图依赖于同一状态

22.6.9.2.2 - 2. 来自不同视图的行为需要变更同一状态

22.6.9.3 - store(仓库):上就是一个容器,它包含着你的应用中大部分的状态;状态存储是响应式的;不能直接改变 store 中的状态;

22.6.9.4 - state(状态):定义应用的单一状态树,用一个对象就包含了全部的应用层级状态

22.6.9.5 - getter(派分的状态):抽离操作状态的逻辑,可被多组件使用

22.6.9.6 - mutation(修改状态的唯一途径):要使改变状态可被记录,必须要commit一个mutation;mutation必须是同步更新状态。

22.6.9.7 - action(异步操作):异步操作产生结果;Action 提交的是 mutation,而不是直接变更状态。

22.6.10 - axios 后端通信

22.6.10.1 - Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。

22.6.10.2 - 支持 Promise API

22.6.10.3 - 拦截请求和响应

22.6.10.4 - 转换请求数据和响应数据

22.6.10.5 - 自动转换 JSON 数据

22.6.10.6 - 常用API:

22.6.10.6.1 - axios(config):可以通过向 axios 传递相关配置来创建请求

22.6.10.6.2 - axios.get(url[, config])

22.6.10.6.3 - axios.post(url[, data[, config]])

京ICP备08102442号 2007-2018.MIAOOV.COM 版权所有