妙味 2018 年全新升级版 WEB 前端开发工程师就业课程

查看章节 全部展开 共7个阶段,33 章节,331 小节知识点。

前端初窥:HTML5 & CSS3 零基础入门修炼、PC 整站与移动端、less、bootstrap

1

第一章 代码初识:前端工作流位置、工作职责、编程语言、页面结构、样式表、盒模型

1.1 - 前端开发工程师在整个工作流中所处的位置

1.1.1 - 产品经理

1.1.2 - 设计 UI / 用户体验研究

1.1.3 - 前端开发工程师

1.1.4 - QA 质量保障工程师

1.1.5 - 运维(开发)工程师

1.2 - 前端开发工程师的工作内容

1.2.1 - 工作职责

1.2.1.1 - 基本职责:常规开发、界面交互、数据交互

1.2.1.2 - 职位职责:用户体验把控、对性能的追求

1.2.2 - 软素质:具有探索精神、每天都在进步

1.3 - 前端开发环境及软件

1.3.1 - Photoshop 切图、修图、测量

1.3.2 - 编辑器 WebStorm、HBuilder、Atom、Visual Studio Code、...

1.3.3 - 浏览器

1.3.3.1 - IE浏览器:IE6、IE7、IE8、IE9、IE10、IE11

1.3.3.2 - 标准浏览器:firefox(fireBug)、chrome、safari…

1.4 - 什么是语言

1.4.1 - 人与人之间的沟通交流,我们会用到各种语言,比如:汉语,英语……

作为一个前端工程师,要与浏览器沟通交流,就要用到浏览器所能识别的语言

1.5 - 什么是语言

1.5.1 - html(Hypertext Markup Language)超文本标记语言 - 结构

1.5.2 - css(Cascading Style Sheets)层叠样式表 - 样式

1.5.3 - js(javascript)- 行为

1.6 - 页面基本结构

1.6.1 - 声明文档类型:`< !DOCTYPE HTML>`

1.6.2 - 标签:标签对、单标签

1.6.3 - 标签嵌套结构:父子级嵌套、兄弟级并列

1.6.4 - `< div>标签内容< /div>` div标签,一块内容

1.7 - 样式表的书写规则及出现的位置

1.7.1 - 行间样式表

1.7.1.1 - IE浏览器:IE6、IE7、IE8、IE9、IE10、IE11

1.7.1.2 - 标准浏览器:firefox(fireBug)、chrome、safari…

1.7.2 - 内部样式表

1.7.2.1 - `< style>…………< /style>` 写在页面专门的 style 标签中

1.7.2.2 - 标签选择器: 标签名 {样式...}

1.7.2.3 - 样式写法:样式名:样式值

1.7.3 - 外部样式表

1.7.3.1 - `< link href="style.css" rel="stylesheet"/>` 写在专门的css文件中,通过link引入当前页面

1.8 - 常见样式汇总

1.8.1 - px 像素 计量单位

1.8.2 - width 宽度

1.8.3 - height 高度

1.8.3.1 - 在ps中测量区域宽高

1.8.4 - border 边框

1.8.4.1 - 边框的组成

1.8.4.1.1 - border-width 边框宽度

1.8.4.1.2 - border-style 边框样式

1.8.4.1.3 - border-color 边框颜色

1.8.4.2 - 设置颜色的三种模式

1.8.4.2.1 - 颜色英文关键字:pink、plum、red、...

1.8.4.2.2 - 三原色:rgb(255, 255, 0)

1.8.4.2.3 - 十六进制颜色代码: #1215AC

1.8.4.3 - 制作三角形边框

1.8.4.4 - 练习:网易线框练习(边框版)

1.8.5 - background 背景

1.8.5.1 - background-color: gray; 背景颜色

1.8.5.2 - background-image: url(bg.jpg); 背景图

1.8.5.3 - background-repeat: no-repeat; 背景图是否重复

1.8.5.4 - background-position: center 0px; 背景图位置

1.8.5.5 - background-attachment: fixed; 背景是否滚动

1.8.5.6 - background复合样式

1.8.5.7 - 练习:网易线框练习(背景版)

1.8.6 - 文字设置

1.8.6.1 - font-weight 文字着重

1.8.6.2 - font-style 文字倾斜

1.8.6.3 - font-size 文字大小(一般均为偶数)

1.8.6.4 - line-height 行高

1.8.6.5 - font-family 字体(中文默认宋体)

1.8.6.6 - font复合样式: font-style | font-weight | font-size/line-height | font-family

1.8.6.7 - 中英文字体的字体大小及行高测量

1.8.7 - 文本设置

1.8.7.1 - color 文字颜色

1.8.7.2 - text-align 文本对齐方式

1.8.7.3 - text-indent 首行缩进(em缩进字符)

1.8.7.4 - text-decoration 文本修饰

1.8.7.5 - letter-spacing 字母间距

1.8.7.6 - word-spacing 单词间距(以空格为解析单位)

1.8.7.7 - white-space 强制不换行

1.8.7.8 - 关于空格的认知及计算

1.8.7.9 - 练习:关键字颜色区分

1.8.8 - padding 内边距

1.8.8.1 - padding-top 上边内边距

1.8.8.2 - padding-right 右边内边距

1.8.8.3 - padding-bottom 下边内边距

1.8.8.4 - padding-left 左边内边距

1.8.8.5 - padding复合样式: top right bottom left;

1.8.8.6 - padding的注意事项: 内边距相当于给一个盒子加了填充厚度会影响盒子大小。

1.8.9 - margin 外边距

1.8.9.1 - margin-top 上边外边距

1.8.9.2 - margin-right 右边外边距

1.8.9.3 - margin-bottom 下边外边距

1.8.9.4 - margin-left 左边外边距

1.8.9.5 - margin复合样式: margin: top right bottom left;

1.8.9.6 - 外边距的问题

1.8.9.6.1 - 上下外边距会叠压

1.8.9.6.2 - 父子级包含的时候子级的margin-top会传递给父级

1.8.10 - 盒模型

1.8.10.1 - 盒子大小 = border + padding + width/height

1.8.10.2 - 盒子宽度 = 左border+左padding+width+右padding +右border

1.8.10.3 - 盒子高度 = 上border+上padding+height+下padding+下border

1.8.11 - 超链接 `< a href="">< /a>`

1.8.11.1 - href

1.8.11.1.1 - 页面跳转

1.8.11.1.2 - 锚点

1.8.11.1.3 - 下载

1.8.11.1.4 - target 链接打开方式

1.8.11.2 - 相关伪类

1.8.11.2.1 - :link 未访问的链接

1.8.11.2.2 - :visited 访问过后的链接

1.8.11.2.3 - :hover 鼠标悬停的链接

1.8.11.2.4 - :active 激活的链接

1.8.12 - 练习:网易产品模块

本章节案例&练习:
>> 网易线框练习(一)
>> 关键字颜色区分
>> 网易产品模块
>> 模拟右键系统菜单 — 扩展
>> 模拟系统警告框弹出窗 — 扩展
>> 简洁导航文字设置 — 扩展

2

第二章 常用标签:结构标签、块级标签、行内标签、SEO、选择器、优先级、编码规范

2.1 - 常用标签

2.1.1 - `< header></header>` 主要用于页面的头部的信息介绍,也可用于板块头部

2.1.2 - `< article></article>` 用来在页面中表示一套结构完整且独立的内容部分 可以用来呈现论坛的一个帖子,杂志或报纸中的一篇文章,一篇 - 博客,用户提交的评论内容,可互动的页面模块挂件等。

2.1.3 - `< aside>< /aside>` 包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组,以及其他类似的有别与主要内容的部分

2.1.4 - `< section>< /section>` 用于划分页面上的不同区域,或者划分文章里不同的节

2.1.5 - `< footer>< /footer>` 页面的底部 或者 版块底部

2.1.6 - `< nav>< /nav>` 导航 (包含链接的的一个列表)

2.1.7 - `< div>< /div>` 无意义块

2.1.8 - h1-h6 标题

2.1.9 - `< p>< /p>` 段落

2.1.10 - `< ul>< /ul>` 无序列表

2.1.11 - `< ol>< /ol>` 有序列表

2.1.12 - `< li>< /li>` ol或者ul的列表项

2.1.13 - `< img src="" />` 图片

2.1.13.1 - src

2.1.13.1.1 - 相对路径

2.1.13.1.2 - 绝对路径

2.1.13.2 - img特性

2.1.13.2.1 - 支持宽高

2.1.13.2.2 - 只设置宽度或者高度等比缩放

2.1.13.2.3 - img的空隙问题

2.1.14 - `< figure>< /figure>` 用于媒体元素进行组合

2.1.15 - `< figcaption> < /figcaption>` 用于对figure的内容 进行说明

2.1.16 - `< dl>< /dl>` 定义列表,dl下边只能包含dt和dd

2.1.17 - `< dt>< /dt>` 列表中的项目,dt是dl的子元素

2.1.18 - `< dd>< /dd>` 描述列表中的项目,dd是dl的子元素

2.1.19 - `< span>< /span>` 区分样式

2.1.20 - `< base />` 为页面上的所有链接规定默认地址或默认目标

2.1.21 - `<strong></strong>` 强调(粗体)

2.1.22 - < em>< /em>` 强调(斜体)

2.1.23 - `< time>< /time>` 时间

2.1.24 - `< mark>< /mark>` 标记

2.1.25 - `< progress>< /progress>` 进度条

2.1.25.1 - max

2.1.25.2 - value

2.2 - 浅析SEO

2.2.1 - SEO :搜索引擎优化

2.2.2 - 部分方法

2.2.2.1 - a、页面标签语义化

2.2.2.2 - b、使用对SEO有利的标签:h1/h2/h3/strong/em……

2.2.2.3 - c、提高页面关键词密度

2.2.2.4 - d、……等等

2.2.3 - SEM:搜索引擎营销;(包含SEO

2.3 - 常用选择器

2.3.1 - id选择器 #id{}

2.3.2 - 类选择器 .class{}

2.3.3 - 标签选择器 div{}

2.3.4 - 群组选择器 #id, .class, div{}

2.3.5 - 包含选择器 #id .class{}

2.3.6 - 通配符 *{}

2.3.6.1 - 通配符的优缺点

2.4 - 选择器优先级

2.4.1 - 选择器优先级计算规则

2.4.2 - 基础选择器优先级 style > id > class > 类型选择 > *

2.4.3 - 包含选择器优先级计算

2.4.4 - 群组选择器优先级

2.5 - 标签样式初始化订制方案

2.5.1 - css reset 原则:但凡是浏览默认的样式,都不要使用。

2.6 - 标签类型

2.6.1 - 块元素

2.6.1.1 - 默认独占一行

2.6.1.2 - 没有宽度时,默认撑满一行

2.6.1.3 - 支持所有css命令

2.6.1.4 - 支持所有css命令

2.6.2 - 内嵌(内联、行内)

2.6.2.1 - 同排可以继续跟同类的标签

2.6.2.2 - 内容撑开宽度

2.6.2.3 - 不支持宽高

2.6.2.4 - 不支持上下的margin

2.6.2.5 - 代码换行被解析

2.7 - 标签类型转换

2.7.1 - display 显示

2.7.1.1 - block 显示为块 使内联元素具备块属性标签的特性

2.7.1.2 - inline 显示为内嵌 使行块属性标签具备内联元素的特性

2.8 - inline-block

2.8.1 - 特性

2.8.1.1 - 块在一行显示

2.8.1.2 - 行内属性标签支持宽高

2.8.1.3 - 没有宽度的时候内容撑开宽度

2.8.2 - 问题

2.8.2.1 - 代码换行被解析

2.8.3 - inline-block的应用

2.8.4 - vertical-align 垂直对齐方式

2.9 - cursor

2.9.1 - cursor 指针样式 (规定要显示的光标的类型)

2.9.2 - cursor:pointer | text | move ……

2.9.3 - cursor:url(hand.cur),pointer

2.10 - 编码规范

2.10.1 - HTML编码规范

2.10.2 - CSS编码规范

2.10.3 - 其他规范

2.10.3.1 - 所有书写均在英文半角状态下的小写

2.10.3.2 - id,class必须以字母开头

2.10.3.3 - 所有标签必须闭合

2.10.3.4 - html标签用tab键缩进

2.10.3.5 - 属性值必须带引号

2.10.3.6 - ul,li/ol,li/dl,dt,dd拥有父子级关系的标签

2.10.3.7 - p,dt,h标签 里面不能嵌套块属性标签

2.10.3.8 - a标签不能嵌套a

2.10.3.9 - 内联标签不能嵌套块标签

2.11 - 练习:商品推荐横排列表

2.12 - 练习:热卖商品竖排列表

本章节案例&练习:
>> 商品推荐横排列表(编写H5结构)
>> 热卖商品竖排列表(编写H5结构)
>> 热卖单品关键字(100%还原设计稿)— 扩展
>> 主推商品与关键字组合模块(编写H5结构)— 扩展

3

第三章 浮动:文档流、浮动特性、clear、清除浮动的方法、BFC、overflow

3.1 - 文档流:文档流是文档中可显示对象在排列时所占用的位置

3.2 - 浮动的前世今生

3.2.1 - 浮动:使元素脱离文档流,按照指定方向发生移动,遇到父级边界或者相邻的浮动元素停了下来。

3.3 - 基础语法

3.3.1 - float:left | right | none | inherit;

3.4 - 浮动的特性

3.4.1 - 块在一排显示

3.4.2 - 内联支持宽高

3.4.3 - 默认内容撑开宽度

3.4.4 - 脱离文档流

3.4.5 - 阻止margin叠压

3.5 - clear:left | right | both | none | inherit

3.5.1 - 元素的某个方向上不能有浮动元素

3.6 - 为什么需要清除浮动?

3.7 - 清除浮动的几种方法

3.7.1 - 加高 - 问题:扩展性不好

3.7.2 - 空标签清浮动 - 问题:IE6 最小高度 19px(解决后IE6下还有2px偏差)

3.7.3 - br清浮动 - 问题:不符合工作中:结构、样式、行为,三者分离的要求

3.7.4 - after伪类 清浮动方法

3.8 - BFC (Block Formatting Context)

3.8.1 - 作用

3.8.1.1 - 包含浮动元素

3.8.1.2 - 不被浮动元素覆盖

3.8.1.3 - margin传递撑开宽度

3.8.2 - 触发BFC的条件

3.8.2.1 - float的值不为none

3.8.2.2 - overflow的值不为visible

3.8.2.3 - overflow

3.8.2.4 - display的值为 table-cell、table-caption和inline-block之一

3.8.2.5 - position的值不为 static或 relative中的任何一个

3.9 - overflow: hidden | scroll | auto

3.10 - 练习:全球通业务模块

3.11 - 练习:综合性复杂模块

本章节案例&练习:
>> 全球通业务模块
>> 本周主打模块
>> 电影主打模块
>> 时尚秀模块 — 扩展
>> 节气列表模块 — 扩展
>> 明星荐片模块 — 扩展

4

第四章 定位进阶:相对定位、偏移量、绝对定位、层级提升、固定定位、透明度、多背景、滤镜

4.1 - position:relative 相对定位

4.1.1 - 不影响元素本身的特性

4.1.2 - 不使元素脱离文档流(元素移动之后原始位置会被保留)

4.1.3 - 如果没有定位偏移量,对元素本身没有任何影响

4.1.4 - 提升层级

4.2 - 偏移量

4.2.1 - top/right/bottom/left 定位元素偏移量。

4.3 - position:absolute 绝对定位

4.3.1 - 使元素完全脱离文档流

4.3.2 - 使内嵌支持宽高

4.3.3 - 块属性标签内容撑开宽度

4.3.4 - 如果有定位父级相对于定位父级发生偏移,没有定位父级相对于document发生偏移

4.3.5 - 相对定位一般都是配合绝对定位元素使用

4.3.6 - 提升层级

4.4 - z-index:[number] 定位层级

4.4.1 - 定位元素默认后者层级高于前者

4.4.2 - 建议在兄弟标签之间比较层级

4.5 - position:fixed 固定定位

4.5.1 - 与绝对定位的特性基本一致,的差别是始终相对整个文档进行定位

4.5.2 - 问题:IE6不支持固定定位

4.6 - opacity 透明度

4.7 - 多背景设置

4.8 - linear-gradient 线性渐变

4.9 - radial-gradient 径向渐变

4.10 - text-shadow 文字阴影

4.11 - box-shadow 盒子阴影

4.12 - filter 滤镜

4.13 - border-radius 圆角设置

4.14 - 练习:鼠标移入线框变色

4.15 - 练习:大练习-影片标高清图标层

本章节案例&练习:
>> 图片层上方设置半透明层
>> 综合练习-影片标高清图标层
>> 大练习-影片标高清图标层
>> 鼠标移入底红消失 — 扩展
>> 鼠标移入线框变色 — 扩展

5

第五章 表格和表单:表格标签、表格样式重置、横跨列数、行数、form、表单控件、属性选择器、伪类

5.1 - 表格标签

5.1.1 - table 表格

5.1.2 - thead 表格头

5.1.2.1 - th 元素定义表头

5.1.3 - tbody 表格主体

5.1.3.1 - tr 表格行

5.1.3.2 - td 元素定义表格单元

5.2 - 表格样式重置

5.2.1 - table{border-collapse:collapse;} 单元格间隙合并

5.2.2 - th,td{padding:0;}重置单元格默认填充

5.3 - colspan 属性规定单元格可横跨的列数

5.4 - rowspan 属性规定单元格可横跨的行数

5.5 - form 表单

5.5.1 - action

5.5.2 - method

5.6 - `< input type="…" name="" value="" />` 表单元素

5.6.1 - text 文本框

5.6.2 - password 密码

5.6.3 - radio 单选

5.6.4 - checkbox 复选

5.6.5 - submit 提交

5.6.6 - image

5.6.7 - reset 重置

5.6.8 - button 按钮

5.6.9 - file 上传

5.6.10 - hidden 隐藏

5.6.11 - email 电子邮箱文本框

5.6.12 - tel 电话号码

5.6.13 - url 网页的URL

5.6.14 - search 搜索引擎

5.6.15 - range 特定范围内的数值选择器

5.6.16 - number 只能包含数字的输入框

5.6.17 - color 颜色选择器

5.6.18 - datetime-local 显示完整日期,不含时区

5.6.19 - time 显示时间,不含时区

5.6.20 - date 显示日期

5.6.21 - week 显示周

5.6.22 - month 显示月

5.7 - label标签 input元素定义标注

5.8 - select/option 下拉选框

5.9 - textarea 文本域

5.10 - 表单元素属性

5.10.1 - checked属性 在页面加载时默认选定的 input 元素

5.10.2 - disabled属性 属性规定应该禁用 input 元素

5.10.3 - placeholder 输入框提示信息

5.10.4 - autocomplete 是否保存用户输入值

5.10.5 - autofocus 指定表单获取输入焦点

5.10.6 - required 此项必填,不能为空

5.10.7 - pattern 正则验证 pattern="d{1,5}"

5.10.8 - formaction 在submit里定义提交地址

5.11 - 属性选择器

5.11.1 - E[attr]只使用属性名,但没有确定任何属性值

5.11.2 - E[attr="value"]指定属性名,并指定了该属性的属性值

5.11.3 - E[attr~="value"]指定属性名,并且具有属性值,此属性值是一个词列表,并且以空格隔开,其中词列表中包含了一个value词,而且等号前面的“〜”不能不写

5.11.4 - E[attr^="value"]指定了属性名,并且有属性值,属性值是以value开头的

5.11.5 - E[attr$="value"]指定了属性名,并且有属性值,而且属性值是以value结束的

5.11.6 - E[attr*="value"]指定了属性名,并且有属性值,而且属值中包含了value

5.11.7 - E[attr|="value"]指定了属性名,并且属性值是value或者以“value-”开头的值(比如说zh-cn)

5.12 - 表单相关伪类

5.12.1 - E:disabled 表示不可点击的表单控件

5.12.2 - E:enabled 表示可点击的表单控件

5.12.3 - E:checked 表示已选中的checkbox或radio

5.13 - 练习:综合表单实例

本章节案例&练习:
>> 综合练习-天气预报
>> 综合表单实例-表格布局

6

第六章 结构选择器:元素下、相邻、同级、n 个子节点、类型匹配

6.1 - E>E 找到元素下的第一层子元素

6.2 - E+E 相邻元素选择器

6.3 - E~E 同级元素选择器

6.4 - E:nth-child(n) 表示E父元素中的第n个子节点

6.4.1 - :nth-child(odd) 匹配奇数行

6.4.2 - :nth-child(even) 匹配偶数行

6.4.3 - :nth-child(3n+1) 根据自然数匹配

6.5 - E:nth-last-child(n) 表示E父元素中的第n个子节点,从后向前计算

6.6 - E:nth-of-type(n) 表示E父元素中的第n个子节点,且类型为E

6.7 - E:nth-last-of-type(n)表示E父元素中的第n个子节点,且类型为E,从后向前计算

6.8 - E:first-child 表示E元素中的第一个子节点

6.9 - E:last-child 表示E元素中的最后一个子节点

6.10 - E:first-of-type 表示E父元素中的第一个子节点且节点类型是E的

6.11 - E:last-of-type 表示E父元素中的最后一个子节点且节点类型是E的

6.12 - E:only-child表示E元素中只有一个子节点。注意:子节点不包含文本节点

6.13 - E:only-of-type 表示E的父元素中只有一个子节点,且这个唯一的子节点的类型必须是E。注意:子节点不包含文本节点

本章节案例&练习:
>> 隔行变色
>> 综合练习-影片标高清图标层
>> 表单美化 — 扩展

7

第七章 PC 端整站开发:CSS 精灵(sprites)、项目文件管理规划、难点解析、特殊布局

7.1 - css sprites 精灵/雪碧图

7.2 - 项目文件管理

7.3 - 页面规划

7.4 - 难点解析

7.4.1 - 通栏banner处理方案

7.4.2 - 电商类网站导航结构分析

7.4.3 - 视频类网站细节处理

7.5 - 练习:整页练习

本章节案例&练习:
>> 整页练习:完成类似大小的单页面一个

8

第八章 Less:编译、常用语法、变量、混合、参数、嵌套、运算、作用域、注释、循环

8.1 - less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量、混合(mixin)、函数等功能,让 CSS 更易维护、方便制作主题、扩充

8.2 - less编译

8.2.1 - less 本身不被浏览器识别,我们在使用 less 时,一定要经过编译

8.2.2 - 编译方法

8.2.2.1 - 第三方工具编译(Koala)

8.2.2.2 - 客户端编译,引入 less.js 文件进行编译,但是不推荐在生产环境中使用

8.2.2.3 - 利用 node.js 在服务端进行编译

8.3 - less 常用语法

8.3.1 - 变量,为数据起个简单的名字方便重复调用,需要注意的是,less 中的变量只能定义一次,其本质就是“常量”

8.3.1.1 - 在选择器中使用变量

8.3.1.2 - 在 url 中使用变量

8.3.1.3 - 在属性名中使用变量

8.3.1.4 - 在属性值中使用变量

8.3.2 - 混合,混合类似于我们在其他程序中的函数,我们可以用 id class 等方式把一个代码块包起来,这样的话,就可以重复去调用一个代码块

8.3.3 - 混合防止编译,在选择器后边跟一个括号,本代码块在编译时就不会被编译

8.3.4 - 带参数混合,在混合中我们可以定义参数,这样的话我们就可以在调用混合是传递数据进去

8.3.4.1 - 默认情况下,参数要与传入的数据一一对应

8.3.4.2 - 定义参数的默认值

8.3.4.3 - 给传入的数据起名字

8.3.5 - 嵌套,在写包含选择器时,可以直接写在父代码块中

8.3.5.1 - & 父选择器

8.3.6 - 运算,在 less 中 我们可以进行加减乘除等运算

8.3.7 - 作用域 ,在代码块中定义的数据,就只能在该代码块中进行使用

8.3.8 - 注释

8.3.8.1 - 单行注释,编译时不会被编译

8.3.8.2 - 多行注释,编译时会被保留

8.3.9 - merge 对于 通过,分割的复合样式,进行合并

8.3.10 - Guards 其实就是我们所说的判断,我们可以给一个代码块定义一个判断条件在实际使用时当条件成立时,才会调用到代码块中的内容

8.3.10.1 - 逻辑运算符:>,>=,=,=<,<

8.3.11 - 循环,在 less 中想要使用循环的话,我们就必须采取递归的形式

本章节案例&练习:
>> 整页练习:完成类似大小的单页面一个

9

第九章 移动端开发与适配:测试环境搭建、服务器配置、rem 布局、弹性盒模型

9.1 - 移动端

9.1.1 - 移动端测试环境

9.1.2 - Emulation

9.1.3 - 本地服务器配置

9.1.4 - 物理分辨率和显示分辨率

9.1.5 - window.devicePixelRatio 像素比

9.1.6 - 清除IOS下按钮的圆角

9.1.7 - 移动端链接和按钮的阴影消除

9.1.8 - 移动端rem布局

9.1.9 - background-size

9.1.10 - box-sizing 怪异盒模型

9.1.11 - background-origin

9.1.12 - background-clip

9.2 - 案例: [妙味商城](http://miaov.com/index.php/Course/homeworkDetail/hid/140.html)

9.3 - 练习:[淘宝移动端](http://miaov.com/index.php/Course/homeworkDetail/hid/142.html)

9.4 - 练习:[百度移动端](http://miaov.com/index.php/Course/homeworkDetail/hid/143.html)

9.5 - 弹性盒模型

9.5.1 - display:flex

9.5.2 - flex-direction

9.5.3 - row

9.5.4 - row-reverse

9.5.5 - window.devicePixelRatio 像素比

9.5.6 - justify-content

9.5.7 - align-items

9.5.8 - flex-wrap

9.5.9 - align-content

9.5.10 - flex-flow

9.5.11 - order

9.5.12 - 弹性盒模型的margin:auto

9.5.13 - align-self

9.5.14 - flex

9.6 - 案例: 移动端淘宝banner

本章节案例&练习:
>> 百度(baidu)
>> 京东(jd)
>> 淘宝(taobao)
>> 移动端价格列表
>> 移动端简单页面布局

10

第十章 Bootstrap 和响应式:媒询、自定义字体图标、bootstrap 特性、源码、栅格系统

10.1 - Media Queries

10.1.1 - 媒体类型

10.1.2 - 关键字

10.1.3 - 媒体类型

10.2 - 练习:jQuery响应式官网(头部)

10.3 - bootstrap

10.3.1 - font-face和自定义文字图标

10.3.2 - 预处理脚

10.3.3 - Bootstrap的特性

10.3.4 - Bootstrap工程环境

10.3.5 - Bootstrap源码

10.3.6 - Bootstrap设计思想

10.3.7 - 安装方式

10.3.8 - Bootstrap页面的基本结构

10.3.9 - 栅格系统

10.3.10 - 栅格大小屏控制

10.3.11 - 媒体查询参数说明

10.3.12 - offset 偏移设置

10.3.13 - 栅格系统响应式工具

10.3.14 - bootstrap的默认UI设置

10.3.15 - 字体图标

10.3.16 - 下拉菜单

10.3.17 - 按钮组

10.3.18 - 输入框组

10.3.19 - 相关导航

10.3.20 - 缩略图

10.3.21 - 媒体对象

10.3.22 - 具有响应式特性的嵌入内容略

10.4 - 实战:[Ghost中文网](http://www.ghostchina.com/)

本章节案例&练习:
>> jQuery响应式官网
>> UC官网

11

第十一章 git 和 github 使用:SVN、集成式、图形界面、git 命令、github 创建

11.1 - 使用版本控制工具的好处

11.1.1 - 协同合作

11.1.2 - 版本存储

11.2 - git 介绍

11.3 - 分布式的版本控制工具

11.3.1 - git 可使用命令行

11.3.2 - git 提供的 GUI 图形界面操作

11.4 - SVN 介绍

11.5 - 集成式的版本控制工具

11.6 - 图形界面

11.7 - 拉取服务器代码--- updata

11.8 - 提交代码--- commit

11.9 - git 的安装和设置 config 用户名邮箱配置

11.10 - 配置邮箱 git config --global user.email

11.11 - 配置用户名 git config --global user.name

11.12 - git 分为工作区、暂存区、版本库

11.13 - 工作区:本地开发文件目录

11.13.1 - 暂存区:称为 stage 或 index,在工作区和版本区中间缓冲的区域

11.14 - 版本区(库):本地的版本库

11.15 - git 常用命令操作

11.16 - 初始化版本库---git init

11.17 - 查看工作区文件状态 --- git status

11.18 - 添加工作区文件到暂存区 --- git add

11.19 - 从暂存区提交到版本库 --- git commit

11.20 - github 介绍

11.21 - 通过 Git 进行版本控制

11.22 - 软件源代码托管服务

11.23 - 社交平台

11.24 - 开源项目源码托放平台

11.25 - git 连接 github 托管本地代码

11.25.1 - 生成私钥和公钥

11.25.2 - 设置 github 的 ssh

11.26 - github 远程仓库的创建

11.26.1 - git 连接远程仓库 --- git remote

11.26.2 - 推送本地代码到 github 仓库 --- git push

11.27 - 拉取远程仓库

11.28 - 克隆远程仓库到本地 git clone

11.29 - 拉取远程仓库更新本地工作区--- git pull

本章节案例&练习:
>> github基本使用
>> git连接github

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

12

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

12.1 - javascript是用来做什么的

12.1.1 - 行为交互

12.1.2 - 数据交互

12.1.3 - 逻辑交互

12.2 - 常见网页特效的原理

12.2.1 - 修改样式

12.2.2 - 修改内容

12.3 - js书写位置

12.3.1 - 行间

12.3.1.1 - html 标签的属性中添加

12.3.2 - script

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

12.3.3 - 外联

12.3.3.1 - 单独的js文件

12.4 - getELementById()

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

12.4.2 - id的唯一性

12.5 - 什么是事件

12.5.1 - onclick

12.5.2 - onload

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

12.5.2.2 - 为什么要使用onload事件

12.5.2.3 - 页面的加载顺序说明

12.6 - 初识函数

12.6.1 - 函数的声明

12.6.2 - 匿名函数

12.6.3 - 函数的调用

12.6.3.1 - 直接调用函数

12.6.3.2 - 通过事件调用函数

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

12.7 - 变量

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

12.7.2 - 变量的声明和调用

12.7.3 - var 关键字

12.8 - 命名规范

12.8.1 - 变量命名的注意事项

12.8.1.1 - 关键字和保留字

12.8.1.2 - 特殊字符的问题

12.8.1.2.1 - 用数字来命名

12.8.1.2.2 - 用中文来命名

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

12.8.1.3 - 驼峰命名

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

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

12.9.1 - 属性的读操作

12.9.1.1 - 元素的style 属性

12.9.1.1.1 - cssText

12.9.1.2 - innerHTML

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

12.9.1.3 - className

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

12.9.1.4 - src

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

12.9.1.5 - href

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

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

12.9.1.6 - value

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

12.9.2 - 属性的写操作

12.9.2.1 - innerHTML

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

12.9.2.2 - cssText

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

12.10 - 案例:热身练习讲解

12.11 - 字符串

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

12.11.2 - 字符串连接

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

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

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

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

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

12.13 - if判断

12.13.1 - if语句的各种写法

12.13.1.1 - if(){}

12.13.1.2 - if(){} else {}

12.13.1.3 - if(){} else if(){} else {}

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

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

12.13.1.6 - 布尔值

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

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

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

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

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

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

12.15.3 - 自定义判断条件

12.15.4 - "!" 布尔值取反

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

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

12.16.1.1 - 都是数字进行相加

12.16.1.2 - 遇到字符串进行连接

12.17 - 初始数组

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

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

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

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

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

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

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

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

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

12.21 - 新的获取元素的方法

12.21.1 - querySelector

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

12.22 - 获取一组元素操作

12.22.1 - querySelectorAll

12.22.2 - getElementsByTagName

12.22.3 - getElementsByClassName

12.22.4 - 一组元素的下标和length

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

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

12.23 - for循环

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

12.23.2 - 循环语句的组成部分

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

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

12.23.2.3 - "+=","-=","/=","*="

12.23.3 - for循环的执行顺序

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

12.23.5 - for循环的结束值

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

12.23.7 - for 循环 嵌套 for循环时

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

12.24.1 - mouseover事件和mouseout事件

12.25 - 取模

12.25.1 - 取模的应用场景

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

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

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

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

12.26 - this关键字

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

12.26.2 - 事件调用的this指向

12.26.3 - 非事件调用的this指向

12.27 - 案例:简易仿select控件

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

12.28 - 案例:单选模拟

12.29 - 选项卡思路讲解

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

12.29.2 - 索引值的应用

12.29.2.1 - 自定义属性

12.29.2.2 - 利用循环设置索引

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

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

12.29.4 - 思路2:大清洗

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

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

12.29.5 - 思路3:定点清除

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

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

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

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

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

12.31 - 练习:好友列表

本章节案例&练习:
>> 仿select
>> 好友列表练习
>> 简易留言板
>> 京东幻灯片
>> 列表展开收缩
>> 模拟单选
>> 图片切换
>> 百度文库评分 — 扩展
>> 百度音乐全选 — 扩展
>> 点击生成V形并变换四个方向(提高版) — 扩展
>> 控制多组图片 — 扩展
>> 模拟手机短信发送 — 扩展

13

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

13.1 - 数据类型划分

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

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

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

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

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

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

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

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

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

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

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

13.1.4 - 传值与传址

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

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

13.2 - typeof运算符

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

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

13.2.2.1 - Number 数字

13.2.2.2 - String 字符串

13.2.2.3 - Boolean 布尔值

13.2.2.4 - function 函数

13.2.2.5 - undefined 定义

13.2.2.6 - Object 对象

13.3 - 强制数据类型转换

13.3.1 - parseInt()

13.3.1.1 - 转换成整数

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

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

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

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

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

13.3.2 - parseFloat()

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

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

13.3.3 - number()

13.3.3.1 - 转换成数字

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

13.3.3.3 - 数字,返回原数字

13.3.3.4 - null,返回0

13.3.3.5 - undefined,返回NaN

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

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

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

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

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

13.3.4 - NaN和isNaN

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

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

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

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

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

13.3.5 - String()

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

13.3.5.2 - null 返回 "null"

13.3.5.3 - undefined 返回 "undefined"

13.3.6 - Boolean()

13.3.6.1 - 转换结果为true的有

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

13.3.6.2 - 转换结果为false的有

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

13.4 - 算术运算符

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

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

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

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

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

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

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

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

13.5 - 赋值运算符

13.5.1 - ++自增 、--自减

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

13.5.2 - =、+=、-=、*=、/=、%=

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

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

13.6 - 关系运算符

13.6.1 - <、>、<=、>=、==、!=、===、!==

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

13.6.3 - <、>、<=、>= 、==、!= 比较规则

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

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

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

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

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

13.6.4 - ===、!==

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

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

13.7 - 逻辑运算法

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

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

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

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

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

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

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

13.8 - 条件操作符 ?

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

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

13.9 - 运算符优先级

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

13.10 - 案例:简易计算器

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

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

13.11.2 - switch 的书写格式

13.11.3 - break 终止语句

13.11.4 - switch的执行流程

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

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

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

13.12 - 循环:while、for

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

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

13.13 - 跳出:break、continue

13.13.1 - break终止语句

13.13.2 - continue 跳过本次循环

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

13.14 - 案例:列表全选操作

13.15 - 练习:评分

13.16 - 练习:验证QQ号码

13.17 - 练习:找到合适的值

本章节案例&练习:
>> 验证QQ号码
>> 找数据

14

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

14.1 - function 函数

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

14.1.2 - 定义函数

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

14.1.3 - 函数调用

14.1.3.1 - functionname()

14.2 - 函数传参

14.2.1 - 形参

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

14.2.2 - 实参

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

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

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

14.3 - arguments 不定参

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

14.4 - 函数返回值

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

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

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

14.5 - 计算后的样式值

14.5.1 - getComputedStyle(element)

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

14.6 - 函数封装

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

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

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

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

14.9 - 预解析机制

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

14.9.2 - var 预解析

14.9.3 - function 预解析

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

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

14.10 - 作用域

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

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

14.11 - 作用域链

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

14.12 - 闭包

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

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

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

14.13 - 匿名函数表达式

14.13.1 - (function(){})()

14.13.2 - !function(){}()

14.14 - 递归

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

14.14.2 - arguments.callee() 函数自己

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

14.15 - 案例:商品累计

本章节案例&练习:
>> 修改文本框的值
>> 商品累计 — 扩展

15

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

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

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

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

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

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

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

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

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

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

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

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

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

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

15.1.13 - 模板字符串

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

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

15.1.14 - 案例:查找替换文字

15.1.15 - arr.length

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

15.1.29 - 案例:数组去重

15.1.30 - 案例:图片排序

15.1.31 - 案例:中文排序

本章节案例&练习:
>> 图片排序
>> 查找替换文字
>> 文字搬运工 — 扩展
>> 消除表情小游戏 — 扩展

16

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

16.1 - 创建对象

16.1.1 - new Object()

16.1.2 - {}

16.2 - 利用对象来存储数据

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

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

16.4 - for-in语句

16.4.1 - for (var s in obj){}

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

16.5 - JSON(JavaScript Object Notation)

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

16.5.2 - JSON用途:数据传输

16.5.3 - JSON操作方法

16.5.3.1 - object JSON.paser(string)

16.5.3.2 - string JSON.stringify(object)

16.6 - Math 对象

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

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

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

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

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

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

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

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

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

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

16.6.7.3 - 随机 0 - 100 的整数

16.6.7.4 - 数组随机排序

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

16.6.9 - Math.PI 圆周率

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

16.6.10.1 - deg = rad*180/Math.PI

16.6.10.2 - rad = deg/180*Math.PI

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

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

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

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

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

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

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

本章节案例&练习:
>> 数据生成商品列表并排序

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

17

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

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

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

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

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

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

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

17.3 - 关闭定时器

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

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

17.4 - 定时器管理

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

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

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

17.6 - 案例:延时菜单

17.7 - requestAnimateFrame(function) 动画帧

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

17.7.2 - 返回值动画帧编号

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

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

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

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

17.8 - CancelAnimationFrame(动画帧编号)

17.8.1 - 关闭动画帧

17.8.2 - CancelAnimationFrame的兼容处理

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

17.8.2.2 - 低版本中使用用clearTimeout

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

17.10 - 案例: 下拉广告

本章节案例&练习:
>> 站长导航
>> 自动播放选项卡
>> 自动切换选项卡 — 扩展

18

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

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

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

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

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

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

18.1.1.4 - d 动画执行总次数

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

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

18.3.1 - 需要改变的参数:

18.3.1.1 - el 需要动画的元素

18.3.1.2 - attr 需要动画的属性

18.3.1.3 - target 动画目标值

18.3.1.4 - time 动画时间

18.3.1.5 - type 动画形式

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

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

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

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

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

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

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

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

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

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

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

18.6 - 添加回调函数

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

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

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

18.7 - 案例: 自动轮播图

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

本章节案例&练习:
>> 无缝滚动轮播图

19

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

19.1 - transoform 变换

19.1.1 - rotate 元素旋转

19.1.1.1 - 角度单位

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

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

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

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

19.1.2 - scale 元素缩放

19.1.2.1 - scaleX 元素宽度缩放

19.1.2.2 - scaleY 元素高度度缩放

19.1.3 - skew

19.1.3.1 - skewX 元素x方向拉伸

19.1.3.2 - skewY 元素y方向拉伸

19.1.4 - translate

19.1.4.1 - translateX 元素x方向位移

19.1.4.2 - translateY 元素y方向位移

19.2 - transform的执行顺序

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

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

19.3 - transform-origin

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

19.4 - transoform3D 3d变换

19.4.1 - rotate3D

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

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

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

19.4.2 - translate3D

19.4.2.1 - translateX 元素x方向位移

19.4.2.2 - translateY 元素y方向位移

19.4.2.3 - translateZ 元素z方向位移

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

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

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

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

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

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

19.9 - 案例:3d盒子

19.10 - 利用transform做动画的好处

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

19.15 - animation

19.15.1 - @keyframes 动画帧

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

19.15.1.2 - keyframes-selector 动画时长占比

19.15.1.2.1 - 0-100% 百分比形式

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

19.17 - 案例:图片无缝滚动

本章节案例&练习:
>> 3d盒子
>> 滚动相册

20

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

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

20.2 - 日期获取相关参数

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

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

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

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

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

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

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

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

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

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

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

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

20.3 - 案例:时钟效果

20.4 - 日期获取相关参数

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

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

20.4.3 - new Date(new Date().getTime())

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

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

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

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

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

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

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

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

20.5 - 案例:倒计时效果

20.6 - 综合案例:日历

本章节案例&练习:
>> 图片时钟
>> 商品下架 — 扩展

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

21

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

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

21.2 - window 对象

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

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

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

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

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

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

21.2.3 - window.close() 关闭窗口

21.2.4 - 页面相关距离获取

21.2.4.1 - 可视区大小

21.2.4.1.1 - window.innerWidth/window.innerHeight

21.2.4.1.2 - document.body.clientWidth/document.body.clientHeight

21.2.4.2 - 页面大小

21.2.4.2.1 - document.body.scrollWidth/document.body.scrollHeight

21.2.4.3 - 窗口滚动条距离

21.2.4.3.1 - window.pageYOffset/window.pageXOffset

21.2.4.3.2 - document.body.scrollTop/document.body.scrollLeft

21.2.4.3.3 - document.documentElement.scrollTop/document.documentElement.scrollLeft

21.2.4.3.4 - window.scrollY/window.scrollX

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

21.2.5 - window常用事件

21.2.5.1 - scroll 监听滚动条滚动

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

21.3 - location 对象

21.3.1 - href 返回完整的url地址

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

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

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

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

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

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

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

21.3.9 - reload() 刷新当前页面

21.4 - navigator

21.4.1 - appName 返回浏览器的名称

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

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

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

21.5 - screen

21.5.1 - width/height 屏幕宽高

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

21.6 - history

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

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

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

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

21.6.4.1 - number 倒退或前进几步

21.6.4.2 - URL 具体网址

本章节案例&练习:
>> 返回顶部
>> 土豆网登录弹出层
>> 遮罩层
>> 招聘信息 — 扩展

22

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

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

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

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

22.2.2 - el 添加事件的元素

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

22.2.4 - func: 事件处理函数

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

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

22.3.1 - 取消事件监听

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

22.4 - 事件流

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

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

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

22.5 - 事件对象

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

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

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

22.5.3 - e.type 事件类型

22.5.4 - 阻止冒泡

22.5.4.1 - e.cancelBubble = true

22.5.4.2 - e.stopPropagation()

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

22.5.4.4 - 案例:完整版仿select

22.5.5 - 阻止默认行为

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

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

22.5.6 - 鼠标位置获取

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

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

22.5.6.3 - contextmenu 右键菜单事件

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

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

22.5.7.1 - e.button = 0 鼠标左键

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

22.5.7.3 - e.button = 2 鼠标右键

22.5.8 - 键盘事件

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

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

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

22.5.8.4 - 组合键

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

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

22.5.9 - 滚轮事件

22.5.9.1 - mousewheel/DOMMouseScroll 滚轮事件

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

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

22.6 - 常用事件汇总:

22.6.1 - 鼠标事件

22.6.1.1 - mouseover、mouseenter 鼠标移入

22.6.1.2 - mouseout、mouseleave 鼠标移出

22.6.1.3 - click 点击

22.6.1.4 - dblclick 双击

22.6.1.5 - contextmenu 右键点击

22.6.1.6 - mousedown 鼠标摁下

22.6.1.7 - mouseup 鼠标抬起

22.6.1.8 - mousemove 鼠标移动

22.6.1.9 - mousewheel/DOMMouseScroll 鼠标滚轮

22.6.2 - 键盘事件

22.6.2.1 - keydown 键盘按下

22.6.2.2 - keyup 键盘抬起

22.6.3 - 表单事件

22.6.3.1 - change 状态发生改变

22.6.3.2 - input value发生变化

22.6.3.3 - blur 失去焦点

22.6.3.4 - focus 获得焦点

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

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

22.6.3.4.3 - select() 选中所有内容

22.6.3.5 - reset 重置时

22.6.3.6 - submit 提交时

22.6.3.6.1 - submit() 提交表单

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

22.8 - 练习:放大镜效果

本章节案例&练习:
>> 多模式切换幻灯片
>> 仿select
>> 放大镜
>> 事件委托
>> 右键菜单
>> 键盘控制元素移动 - 游戏人物运动 — 扩展
>> 鼠标改变数值 — 扩展
>> 延时菜单 — 扩展

23

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

23.1 - 拖拽的原理分析

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

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

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

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

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

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

23.1.7 - 案例:限制范围拖拽

23.2 - 碰撞检测

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

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

23.4 - 自定义滚动条

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

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

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

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

本章节案例&练习:
>> 自定义滚动条
>> QQ邮箱删除 — 扩展

24

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

24.1 - touch事件

24.1.1 - touchstart 手指摁下

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

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

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

24.1.5 - 事件点透问题及解决

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

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

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

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

24.1.6.4 - 解决事件点透的问题

24.1.6.5 - 禁止mouse事件执行

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

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

24.1.6.8 - 阻止触发系统菜单

24.1.6.9 - 阻止图片文字被选中

24.1.6.10 - 阻止input的输入

24.2 - touchEvent

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

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

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

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

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

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

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

24.5.1 - accelerationIncludingGravity 加速度对象

24.5.1.1 - x x方向速度

24.5.1.2 - y y方向加速度

24.5.1.3 - z z方向加速度

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

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

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

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

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

本章节案例&练习:
>> 移动端幻灯片
>> Smartisan OS系统-设置时间点 — 扩展
>> 移动端小游戏 — 扩展
>> 音悦Tai首页交互效果实现 — 扩展

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

25

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

25.1 - node环境搭建

25.1.1 - Windows

25.1.2 - Mac

25.1.3 - Linux

25.2 - Linux

25.3 - node模块使用

25.4 - commonJS规范

25.5 - 内置模块

25.6 - 第三方模块

25.7 - npm - node package manager

25.8 - 使用http模块搭建web server

25.9 - nodejs-web开发框架介绍

25.9.1 - express

25.9.2 - sails

25.9.3 - koa

25.9.4 - express.io

25.10 - express的安装

25.10.1 - npm init配置安装

25.10.2 - package.json配置安装

25.11 - express项目初始化

25.11.1 - 项目的创建

25.11.2 - 项目的启动运行

25.12 - Routing的使用

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

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

25.13 - swig模板引擎

25.13.1 - 安装swig

25.13.2 - express中使用swig

25.14 - 数据库

25.14.1 - 数据的概念

25.14.2 - 数据库在整个项目中所处的位置

25.14.3 - 数据库的作用--数据持久化

25.14.4 - MongoDB / SqlLite / Mysql 的介绍

25.14.5 - 结构创建

25.14.6 - 数据添加

本章节案例&练习:
>> express的使用
>> 服务端路由使用
>> 理解中间件

26

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

26.1 - ajax介绍

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

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

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

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

26.2 - 使用ajax技术

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

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

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

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

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

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

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

26.2.3 - 常用属性和方法

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

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

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

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

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

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

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

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

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

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

26.2.3.6 - xhr.statusText:状态短语

26.3 - ajax涉及的知识点

26.3.1 - 请求方法get和post

26.3.1.1 - get方法

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

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

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

26.3.1.2 - post方法

26.3.2 - 同步和异步

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

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

26.3.3 - 状态码status

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

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

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

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

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

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

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

26.3.4 - JSON.parse()

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

26.3.5 - 发送post请求时

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

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

26.4 - ajax库使用

26.4.1 - 封装原生的ajax库")

26.4.2 - jQuery中ajax的使用

26.4.2.1 - $.ajax()")

26.4.2.2 - url:请求地址

26.4.2.3 - type:请求类型

26.4.2.4 - data:请求数据

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

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

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

26.4.3 - axios库的使用

26.4.3.1 - 特性:

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

26.4.3.1.2 - 支持 Promise API

26.4.3.1.3 - 拦截请求和响应

26.4.3.1.4 - 转换请求和响应数据

26.4.3.1.5 - 取消请求

26.4.3.1.6 - 自动转换JSON数据

26.4.3.2 - 使用

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

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

26.4.3.2.3 - axios.all(iterable)

26.4.3.2.4 - axios.spread(callback)

26.5 - 上传资源

26.5.1 - from表单上传

26.5.2 - ajax上传

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

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

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

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

26.6 - 跨域产生和解决方案

26.6.1 - 跨域的产生

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

26.6.1.2 - 同源指三个相同:

26.6.1.2.1 - 协议相同

26.6.1.2.2 - 域名相同

26.6.1.2.3 - 端口相同

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

26.6.2 - 解决方案

26.6.2.1 - JSONP方案

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

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

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

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

26.6.2.2 - 代理方式

26.6.2.2.1 - 前端ajax请求本地接口

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

26.6.2.3 - CORS请求

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

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

26.6.2.3.3 - 服务端设置响应头

26.7 - cookie介绍

26.7.1 - cookie 是 http 协议的一部分

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

26.7.3 - 大小在4K左右

26.8 - 操作cookie

26.8.1 - 服务端操作cookie

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

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

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

26.8.1.2 - 浏览器将 cookie 保存。

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

26.8.2 - 客户端操作cookie

26.8.2.1 - 获取cookie:document.cookie

26.8.2.2 - 设置cookie:document.cookie = newCookie

26.8.3 - 对cookie的设定/更新:

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

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

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

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

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

26.9 - localStorage介绍

26.9.1 - 利用localStorage做本地存储

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

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

26.9.4 - 大小在5M左右

26.9.5 - 操作localStorage

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

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

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

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

26.9.6 - storage事件

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

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

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

本章节案例&练习:
>> 动态留言本
>> jsonp-获取豆瓣接口

27

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

27.1 - DOM(文档对象模型)

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

27.3 - DOM节点

27.3.1 - childNodes 子节点

27.3.1.1 - nodeType 节点类型

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

27.3.1.3 - node.nodeName 节点名称

27.3.2 - 节点的层级关系

27.3.2.1 - parentNode 父节点

27.3.2.2 - children 子元素

27.3.2.3 - firstElementChild 第一个子元素

27.3.2.4 - lastElementChild 最后一个子元素

27.3.2.5 - perviousElementSiblings 上一个兄弟元素

27.3.2.6 - nextElementSiblings 下一个兄弟元素

27.3.2.7 - offsetParent 定位父级

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

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

27.3.3.2 - offsetWidth / offsetHeight 可视宽高

27.3.3.3 - clientLeft / clientTop 边框宽度

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

27.3.3.5 - getBoundingClientRect()

27.3.3.5.1 - width/height 可视宽高

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

27.3.4 - 元素的属性操作

27.3.4.1 - 获取属性:getAttribute

27.3.4.2 - 设置属性:setAttribute

27.3.4.3 - 删除属性:removeAttribute

27.3.5 - 元素操作

27.3.5.1 - 创建元素:createElement

27.3.5.2 - 插入元素:appendChild、insertBefore

27.3.5.3 - 删除元素:removeChild

27.3.5.4 - 替换元素:replaceChild

27.3.5.5 - 克隆元素:cloneChild

27.3.6 - 表格操作

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

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

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

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

本章节案例&练习:
>> 表单表格数据操作
>> 动态方式 - 创建文件夹
>> 多级下拉菜单 — 扩展
>> 商品筛选 — 扩展
>> 上下移动元素 — 扩展
>> 左右移动元素 — 扩展

28

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

28.1 - 什么是正则表达式

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

28.2 - 创建正则表达式

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

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

28.3 - 规则表达式组成

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

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

28.4 - 修饰符

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

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

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

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

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

28.5 - 正则的方法

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

28.5.2 - 语法:regexObj.test(str)

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

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

28.6 - 字符串的方法

28.6.1 - string.search()

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

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

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

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

28.6.2 - string.match()

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

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

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

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

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

28.6.3 - string.replace()

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

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

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

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

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

28.7 - 元字符

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

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

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

28.7.3 - d 代表一个数字

28.7.4 - D 代表一个非数字

28.7.5 - s 一个空格

28.7.6 - S 非空格

28.7.7 - w 字母、数字、_

28.7.8 - W 非字母、数字、_

28.8 - 边界符

28.8.1 -  单词边界

28.8.2 - B 非单词边界

28.8.3 - ^ 字符串开始

28.8.4 - $ 字符串结尾

28.9 - 数量词

28.9.1 - 指定规则出现的次数

28.9.2 - {n} 重复出现n次

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

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

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

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

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

28.10 - 分组

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

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

28.11 - 字符集合

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

28.11.2 - NaN

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

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

28.12 - 正则中的两种模式

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

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

28.12.3 - 加上 ? 开启懒惰模式

28.13 - 案例精选

28.13.1 - 实例:验证QQ

28.13.2 - 实例:验证邮箱

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

28.13.4 - 实例:过滤敏感词

本章节案例&练习:
>> 查找出现次数最多的
>> 查找字符串中数字
>> 格式化日期
>> 数据校验

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

29

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

29.1 - 面向对象编程

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

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

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

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

29.2 - 创建对象

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

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

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

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

29.3 - 构造函数模式

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

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

29.3.3 - new操作符

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

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

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

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

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

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

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

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

29.3.4 - instanceof运算符

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

29.3.4.2 - 语法:object instanceof constructor

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

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

29.3.5 - hasOwnProperty()

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

29.3.5.2 - 语法:obj.hasOwnProperty(prop)

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

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

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

29.3.6 - in运算符

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

29.3.6.2 - 语法:prop in object

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

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

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

29.4 - prototype(原型)模式

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

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

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

29.4.4 - constructor属性

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

29.4.5 - __proto__

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

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

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

29.4.6 - 原型链

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

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

29.4.6.3 - 原型链的作用

29.5 - 继承

29.5.1 - 构造函数继承

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

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

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

29.5.2 - 原型式继承

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

29.5.3 - 拷贝继承

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

29.5.4 - Object.create()

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

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

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

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

29.5.5 - Object.getPrototypeOf()

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

29.5.5.2 - 语法:Object.getPrototypeOf(obj)

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

29.5.6 - Object.setPrototypeOf()

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

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

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

29.5.7 - Object.isPrototypeOf()

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

29.5.7.2 - 语法:prototypeObj.isPrototypeOf(object)

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

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

29.6 - ECMAScript 2015中的 class 使用

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

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

29.6.3 - 定义类

29.6.3.1 - 使用关键字:class

29.6.3.2 - 语法:class 类名{}

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

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

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

29.6.4 - Class 的继承extends关键字

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

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

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

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

本章节案例&练习:
>> 面向对象的幻灯片
>> 面向对象版-选项卡
>> 团队协同工具

30

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

30.1 - JQuery介绍

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

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

30.2 - JQuery整体架构

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

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

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

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

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

30.2.6 - 代码分析

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

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

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

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

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

30.3 - JQuery选择器、常用API

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

30.3.2 - jQuery( selector [context ] )

30.3.3 - jQuery( element )

30.3.4 - 选择器

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

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

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

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

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

30.3.4.6 - 工具方法

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

30.4 - DOM/BOM操作

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

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

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

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

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

30.5 - JQuery事件系统

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

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

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

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

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

30.6 - JQuery动画

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

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

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

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

30.7 - 编写和使用JQuery插件

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

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

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

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

30.8 - 实例:JQuery版本的拖拽

30.9 - 实例:JQuery好友列表

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

本章节案例&练习:
>> jQuery版选项卡
>> jQuery版无缝滚动轮播图

31

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

31.1 - ECMAScript6介绍

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

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

31.2 - 声明变量的方式

31.2.1 - var关键字

31.2.2 - let关键字

31.2.2.1 - 不允许重复声明

31.2.2.2 - 不存在变量提升

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

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

31.2.3 - const关键字

31.2.3.1 - 特性同let

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

31.3 - 解构赋值

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

31.3.2 - 数组的解构赋值

31.3.3 - 对象的解构赋值

31.3.4 - 字符串的解构赋值

31.3.5 - 函数参数的解构赋值

31.4 - 模板字符串

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

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

31.5 - 箭头函数

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

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

31.5.3 - 不可以当作构造函数

31.5.4 - 不可以使用arguments对象

31.6 - 函数的扩展

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

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

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

31.7 - 数组的扩展

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

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

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

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

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

31.8 - 字符串的扩展

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

31.9 - 对象的扩展和简写

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

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

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

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

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

本章节案例&练习:
>> ECMAscript6学习
>> ECMAscript6浏览器支持

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

32

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

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

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

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

32.4 - React.js

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

32.4.3 - JSX中的事件系统Event

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

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

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

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

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

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

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

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

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

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

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

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

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

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

32.4.6.1 - Mounting 阶段

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

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

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

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

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

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

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

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

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

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

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

32.4.7 - react-router-dom

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

32.4.8 - redux状态管理

32.4.8 - redux状态管理

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

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

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

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

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

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

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

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

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

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

32.4.8.5.1 - getState 方法, 获取state

32.4.8.5.2 - dispatch( action ), 更新 state

32.4.8.5.3 - subscribe(listener) 注册监听器

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

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

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

32.4.9 - webpack

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

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

32.4.9.2.1 - babel-loader 处理 js 模块, 配合不同的 babel 插件可以编译不同内容

32.4.9.2.2 - css, style-loader 引入 css, 如果你要引入 css, 应该先让 css-loader 介入处理

32.4.9.2.3 - file-loader 加载资源文件, css-loader 会帮你引入一些图片或者你会在 js 里面引入一些资源依赖, 这个时候需要你把这些路径和资源交给 file-loader 处理.

32.4.9.3 - plugin 相关, 插件会做一些 loader 做不来的事情, 它可能会在构建的不同时间点起作用

32.4.9.3.1 - html-webpack-plugin

32.4.9.3.2 - clean-webpack-plugin

32.4.9.3.3 - ProvidePlugin, 更快速的引入模块

32.4.9.3.4 - devtool 找到源码的位置

32.4.9.3.5 - webpack-dev-server, 开发测试的利器

本章节案例&练习:
>> 第三方接口cnnode实战案例

33

第三十三章 vue 2.0 全家桶开发:响应式编程、声明式渲染、指令、数据类、钩子函数、组件通信、vuex

33.1 - Vue是一个构建数据驱动的Web界面的库,通过简单的API提供高效的数据绑定和灵活的组件系统。

33.2 - Vue具有简洁、轻量、快速、 数据驱动、 组件化等特点,除此之外,Vue还具有上手快,简单易学,学完即用,快速开发的优势。

33.3 - 可把页面组件化、模块化,分工明确,互不干涉,低耦合的设计使组件可复用、可测试,更易于维护。

33.4 - 响应式编程,开发者只需要聚焦在状态的逻辑处理上,让框架来进行DOM操作,不需要自己手动更新视图

33.5 - 官方提供健全的周边工具,例如vue-cli创建项目目录和开发环境配置、vue-router前端路由创建单页应用、vuex集中式应用状态管理器。

33.6 - Vue语法从零到熟练

33.6.1 - Vue的两大特点

33.6.1.1 - 响应式数据绑定:数据的增删改查都是可被watch的,一旦变动自动更新视图

33.6.1.2 - 可组合的视图组件:把页面拆成多组件,可达到封装、复用、可测试的目的

33.6.2 - 声明式渲染

33.6.2.1 - 描述要什么样子,让框架帮你做

33.6.2.2 - 声明模板语法将实例数据进行绑定

33.6.2.3 - 模板语法-插值:采用“Mustache”语法{{表达式|实例数据}}

33.6.2.4 - 把注意力全身心的投入到业务逻辑的数据处理上,而无需手动变动DOM的更新

33.6.3 - 指令

33.6.3.1 - 自定义属性,写在标签上以v-为前缀的特殊属性

33.6.3.2 - 预期的值为javascript表达式

33.6.3.3 - 作用是将数据和DOM做关联,当表达式的值改变时,响应式地作用于DOM上

33.6.4 - 常用指令一览

33.6.4.1 - v-bind:动态的绑定数据到DOM元素上,当数据发生变化,响应的更新DOM数据

33.6.4.2 - v-once:只渲染元素和组件一次,随后数据更新,并不会重新更新DOM数据,可视为静态内容,将渲染结果缓存起来,用于优化更新性能

33.6.4.3 - v-show:根据表达式之真假值,切换元素的 display CSS 属性

33.6.4.4 - v-if:根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建

33.6.4.5 - v-if、v-else-if、v-else:多重条件选择渲染

33.6.4.6 - v-for:基于源数据多次渲染元素或模板块;v-for默认行为试着不改变整体,而是替换元素。迫使其重新排序的元素,你需要提供一个 key 的特殊属性:

33.6.4.7 - v-model:随表单控件类型不同而不同,在表单控件或者组件上创建双向绑定

33.6.4.8 - v-cloak:以隐藏未编译的 Mustache 标签直到实例准备完毕

33.6.4.9 - v-once:只渲染元素和组件一次,这可以用于优化更新性能

33.6.4.10 - 自定义指令:除了核心功能默认内置的指令,也允许注册自定义指令

33.6.5 - 选项对象

33.6.5.1 - 在启动整个应用实例化时传入的参数。通过这些选项来创建想要的行为

33.6.5.2 - el(element):提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标

33.6.5.3 - 数据类:

33.6.5.3.1 - data(数据):应用的数据,可被转为getter/setter,能够响应数据的变化

33.6.5.3.2 - computed(计算属性):将对data数据的逻辑抽离在计算属性中;这些属性依赖data的变化而相应;计算属性的结果会被缓存,多次使用不重新计算。

33.6.5.3.3 - methods(方法):存放应用中封装的方法,例如事假处理函数

33.6.5.3.4 - watch(侦听属性):当有一些数据需要随着其它数据变动而变动时,可通过watch侦听

33.6.5.3.5 - computed VS methods VS watch watch:这三者在某些功能点是重复的,何时使用使用在什么样的场景。

33.6.5.4 - 生命周期钩子函数

33.6.5.4 - 生命周期钩子函数

33.6.5.4.2 - created:实例创建完成后被立即调用,数据观测,计算属性,方法定义都已完成,但还没开始挂载。

33.6.5.4.3 - beforeMount:挂载开始之前被调用

33.6.5.4.4 - mounted:挂载之后调用该钩子函数

33.6.5.4.5 - beforeUpdate:数据更新时调用,可以在这个钩子中进一步地更改状态,这不会触发附加的重渲染过程

33.6.5.4.6 - updated:数据更新之后调用该函数,当这个钩子被调用时,组件 DOM 已经更新

33.6.5.4.7 - beforeDestroy:实例销毁之前调用

33.6.5.4.8 - destroyed:实例销毁后调用,调用后实例中所有东西都会解除绑定,子实例也会被销毁

33.6.6 - 组件

33.6.6.1 - 什么是组件:

33.6.6.1.1 - 1. 封装可重用的代码;

33.6.6.1.2 - 2. 组件是自定义元素,Vue.js 的编译器为它添加特殊功能

33.6.6.1.3 - 3. 用 is 特性进行了扩展的原生 HTML 元素

33.6.6.2 - 组件的定义和使用:

33.6.6.2.1 - 1. 全局组件

33.6.6.2.2 - 2. 局部组件;

33.6.6.2.3 - 3. 单文件组件

33.6.6.3 - 一个通用组件所具备的三个部分:

33.6.6.3.1 - 1. Prop允许外部环境定制组件;

33.6.6.3.2 - 2. custom event监听内部触发外部产生的副作用;

33.6.6.3.3 - 3. slot插槽允许将外部环境的结构组合到组件中

33.6.6.4 - 组件之间的通信

33.6.6.4 - 组件之间的通信

33.6.6.4.2 - 2. 子->父 自定义事件

33.6.6.5 - slot插槽定制组件的结构

33.6.6.5.1 - 1. 单个插槽

33.6.6.5.2 - 2. 具名插槽

33.6.6.5.3 - 3. 作用域插槽

33.6.6.6 - 组件间的双向数据绑定

33.6.6.7 - 多种组件:动态组件、异步组件、递归组件

33.6.7 - vue-cli脚手架创建无痛webpack配置目录结构

33.6.7.1 - webpack的基础配置初探

33.6.7.1.1 - 1. 启动应用开发模式

33.6.7.1.2 - 2. resolve配置访问路径

33.6.7.1.3 - 3. 打包项目

33.6.7.2 - 单文件组件的定义和使用

33.6.7.2.1 - 1. 定义的命名约定

33.6.7.2.1 - 1. 定义的命名约定

33.6.8 - vue-router单页应用的前端路由管理利器

33.6.8.1 - 前端路由的作用

33.6.8.1 - 前端路由的作用

33.6.8.1.2 - 做单页应用

33.6.8.2 - 路由配置使用前置准备

33.6.8.2.1 - 安装路由模块

33.6.8.2.2 - 配置路由参数

33.6.8.2.3 - 注入Vue根实例中

33.6.8.2.4 - router-view声明渲染的位置

33.6.8.3 - 嵌套路由:视图有多层组件嵌套,同样路由也有多层组件嵌套,格式为:/a/b/c

33.6.8.4 - 动态路由:把匹配到的路径都映射到同一个组件,其中不同路径可以设置为动态路径访问,可通过路由信息对象$route拿到动态参数pramas

33.6.8.5 - 命名路由:通过name标识一个路由

33.6.8.6 - HTML5 History 模式

33.6.8.7 - 重定向 和 别名

33.6.8.8 - 导航守卫

33.6.8.8.1 - 全局守卫

33.6.8.8.2 - 路由对象守卫

33.6.8.8.2 - 路由对象守卫

33.6.8.8.2 - 路由对象守卫

33.6.8.10 - 编程式导航

33.6.8.10.1 - router.push()向history stack中添加记录

33.6.8.10.2 - router.replace()替换当前history stack中的记录

33.6.8.10.3 - router.go()指定前进后退的记录数

33.6.8.11 - 常用API:

33.6.8.11.1 - router-link:创建一个链接

33.6.8.11.2 - router-view:声明组件渲染的位置

33.6.8.11.3 - mode:访问模式,默认为:“hash”模式,可改为“history”

33.6.8.11.4 - base:路由的基本路径,上线到服务端常用

33.6.9 - vuex集中式应用状态管理器

33.6.9.1 - vuex采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化

33.6.9.2 - 什么时候需要用到vuex

33.6.9.2.1 - 1. 当多个视图依赖于同一状态

33.6.9.2.2 - 2. 来自不同视图的行为需要变更同一状态

33.6.9.3 - store(仓库):上就是一个容器,它包含着你的应用中大部分的状态;状态存储是响应式的;不能直接改变 store 中的状态;

33.6.9.4 - state(状态):定义应用的单一状态树,用一个对象就包含了全部的应用层级状态

33.6.9.5 - getter(派分的状态):抽离操作状态的逻辑,可被多组件使用

33.6.9.6 - mutation(修改状态的唯一途径):要使改变状态可被记录,必须要commit一个mutation;mutation必须是同步更新状态。

33.6.9.7 - action(异步操作):异步操作产生结果;Action 提交的是 mutation,而不是直接变更状态。

33.6.10 - axios 后端通信

33.6.10.1 - Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。

33.6.10.2 - 支持 Promise API

33.6.10.3 - 拦截请求和响应

33.6.10.4 - 转换请求数据和响应数据

33.6.10.5 - 自动转换 JSON 数据

33.6.10.6 - 常用API:

33.6.10.6.1 - axios(config):可以通过向 axios 传递相关配置来创建请求

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

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

京ICP备08102442号 2007-2018.MIAOOV.COM 版权所有