Web前端开发：交互式设计（JavaScript+jQuery）

单元1　JavaScript概述 1

1.1 认识JavaScript 1

1.1.1 什么是JavaScript 1

1.1.2 JavaScript的发展历程 2

1.1.3 JavaScript的用途 3

1.1.4 JavaScript的组成 4

1.2 搭建JavaScript开发环境 5

1.2.1 选择JavaScript脚本编辑器 5

1.2.2 安装与配置Visual Studio Code 6

1.2.3 安装并使用Node.js 9

1.2.4 安装与配置http-server 10

1.3 在HTML中使用JavaScript 10

1.3.1 嵌入HTML文档中的脚本 11

1.3.2 引入外部JavaScript文件的脚本 11

1.3.3 嵌入HTML标签事件中的脚本 12

单元2　JavaScript基础 14

2.1 JavaScript词法符号 14

2.1.1 字符集 14

2.1.2 字母大小写敏感性 14

2.1.3 空白符和换行符 15

2.1.4 可选择的分号 15

2.1.5 注释与文本换行符 15

2.1.6 标识符 15

2.1.7 关键字与保留字 15

2.2 数据类型 16

2.2.1 Boolean 16

2.2.2 Null 17

2.2.3 Undefined 17

2.2.4 Number 17

2.2.5 BigInt 18

2.2.6 String 18

2.2.7 Symbol 19

2.2.8 Object 20

2.3 变量 21

2.3.1 什么是变量 21

2.3.2 使用var定义变量 21

2.3.3 使用let定义变量 22

2.3.4 变量的赋值 23

2.3.5 变量的作用域 23

2.4 常量 24

2.4.1 符号常量 24

2.4.2 字面量 25

2.5 运算符和表达式 28

2.5.1 算术运算符 28

2.5.2 赋值运算符 29

2.5.3 关系运算符 29

2.5.4 逻辑运算符 29

2.5.5 相加运算符 30

2.5.6 其他运算符 30

2.5.7 运算符优先级 31

2.5.8 JavaScript表达式 31

2.5.9 数据类型转换 33

2.6 语句 34

2.6.1 if语句 34

2.6.2 if...else语句 35

2.6.3 switch语句 35

2.6.4 for语句 37

2.6.5 while语句 38

2.6.6 do...while语句 40

2.6.7 for...in语句 40

2.6.8 for...of语句 41

2.6.9 label语句 41

2.6.10 break语句 41

2.6.11 continue语句 41

2.6.12 throw语句 42

2.6.13 try...catch语句 42

2.6.14 try...catch...finally语句 43

2.6.15 空语句 44

2.6.16 定义语句 44

2.6.17 return语句 44

单元3　JavaScript函数 45

3.1 认识函数 45

3.1.1 什么是函数 45

3.1.2 函数声明 46

3.1.3 函数调用 47

3.1.4 函数作用域 49

3.1.5 函数提升 50

3.2 函数参数与返回值 50

3.2.1 函数参数 50

3.2.2 函数返回值 53

3.3 箭头函数 54

3.3.1 使用箭头函数声明函数 54

3.3.2 箭头函数的特征 54

3.4 闭包函数 55

3.4.1 理解闭包 55

3.4.2 闭包函数的实现 55

3.5 递归函数 56

3.5.1 理解递归函数 56

3.5.2 尾调用优化 56

3.6 系统函数 57

3.6.1 encodeURI()函数 57

3.6.2 decodeURI()函数 57

3.6.3 parseInt函数 57

3.6.4 parseFloat()函数 58

3.6.5 isNaN()函数 58

3.6.6 eval()函数 58

单元4　面向对象编程 62

4.1 理解对象 62

4.1.1 对象的基本概念 62

4.1.2 属性类型 63

4.1.3 定义多个属性 65

4.1.4 读取属性的特征 66

4.2 创建对象 67

4.2.1 构造函数模式 67

4.2.2 原型模式 67

4.2.3 对象迭代 68

4.3 继承 69

4.3.1 认识原型链 69

4.3.2 原型式继承 71

4.3.3 寄生式继承 71

4.3.4 寄生式组合继承 72

4.4 类 73

4.4.1 类定义 73

4.4.2 类构造函数 73

4.4.3 类成员 74

4.4.4 继承 76

单元5　JavaScript内置对象 80

5.1 Object对象 80

5.1.1 创建Object对象 80

5.1.2 Object对象常用属性 82

5.1.3 Object对象常用方法 82

5.2 Function对象 83

5.2.1 创建Function对象 84

5.2.2 Function对象常用属性 84

5.2.3 Function对象常用方法 84

5.3 Array对象 84

5.3.1 创建Array对象 85

5.3.2 Array对象常用属性 85

5.3.3 Array对象常用方法 86

5.4 String对象 94

5.4.1 创建String对象 95

5.4.2 String对象常用属性 95

5.4.3 String对象常用方法 95

5.5 Boolean对象 97

5.5.1 创建Boolean对象 97

5.5.2 Boolean对象常用属性 97

5.5.3 Boolean对象常用方法 97

5.6 Number对象 98

5.6.1 创建Number对象 98

5.6.2 Number对象常用属性 98

5.6.3 Number对象常用方法 99

5.7 Date对象 100

5.7.1 创建Date对象 100

5.7.2 Date对象常用属性 100

5.7.3 Date对象常用方法 100

5.8 RegExp对象 103

5.8.1 认识正则表达式 104

5.8.2 创建RegExp对象 104

5.8.3 正则表达式中的特殊字符 104

5.8.4 RegExp对象常用属性 106

5.8.5 RegExp对象常用方法 106

5.9 Math对象 113

5.9.1 Math对象常用属性 114

5.9.2 Math对象常用方法 114

单元6　BOM编程 117

6.1 认识BOM 117

6.1.1 什么是BOM 117

6.1.2 BOM的层次结构 118

6.2 window对象 118

6.2.1 window对象常用属性 118

6.2.2 window对象常用方法 119

6.3 document对象 124

6.3.1 document对象常用属性 124

6.3.2 document对象常用方法 125

6.4 history对象 127

6.4.1 history对象常用属性 127

6.4.2 history对象常用方法 127

6.5 location对象 129

6.5.1 location对象常用属性 129

6.5.2 location对象常用方法 131

6.6 navigator对象 132

6.6.1 navigator对象常用属性 132

6.6.2 navigator对象常用方法 132

单元7　DOM编程 134

7.1 认识DOM 134

7.1.1 什么是DOM 134

7.1.2 DOM类型 135

7.1.3 DOM节点 136

7.2 DOM节点操作 137

7.2.1 访问节点 137

7.2.2 创建节点 140

7.2.3 添加节点 140

7.2.4 插入节点 141

7.2.5 删除节点 142

7.3 DOM样式操作 145

7.3.1 存取元素样式 145

7.3.2 存取元素尺寸 147

7.3.3 存取元素位置 148

7.3.4 操作className属性 150

单元8　DOM事件 155

8.1 认识DOM事件 155

8.1.1 什么是事件 155

8.1.2 事件的组成 156

8.1.3 事件的传播 156

8.2 事件处理程序 158

8.2.1 HTML事件处理程序 159

8.2.2 DOM0级事件处理程序 159

8.2.3 DOM2级事件处理程序 161

8.3 事件对象 162

8.3.1 DOM事件对象常用属性 162

8.3.2 DOM事件对象常用方法 162

8.4 事件类型 163

8.4.1 UI事件 164

8.4.2 焦点事件 166

8.4.3 鼠标事件 168

8.4.4 滚轮事件 169

8.4.5 输入事件 170

8.4.6 键盘事件 171

单元9　利用jQuery编程 185

9.1 认识jQuery 185

9.1.1 jQuery简介 185

9.1.2 jQuery的特点 186

9.1.3 jQuery代码编写方法 186

9.1.4 jQuery对象与DOM对象的转换 187

9.2 jQuery选择器 187

9.2.1 认识jQuery选择器 187

9.2.2 jQuery选择器分类 188

9.2.3 jQuery中元素属性的操作 191

9.2.4 jQuery中样式类的操作 192

9.2.5 jQuery中样式属性的操作 193

9.2.6 jQuery中元素内容的操作 193

9.2.7 在jQuery中查找元素集合中的元素 194

9.3 jQuery中的DOM操作 196

9.3.1 创建元素 196

9.3.2 插入元素 196

9.3.3 复制元素 197

9.3.4 替换元素 198

9.3.5 包裹元素 198

9.3.6 删除元素 198

9.4 jQuery中的事件处理 201

9.4.1 jQuery中的事件处理机制 201

9.4.2 jQuery中的页面载入事件 201

9.4.3 jQuery中的事件绑定 201

9.4.4 jQuery中的事件冒泡 203

9.4.5 jQuery中的合成事件 204

9.4.6 jQuery中的模拟事件触发操作 205

9.5 jQuery中的动画 209

9.5.1 显示和隐藏效果 209

9.5.2 滑动效果 210

9.5.3 淡入淡出效果 211

9.5.4 自定义动画 212

9.6 jQuery中的AJAX 214

9.6.1 认识AJAX 214

9.6.2 jQuery中的AJAX方法 215

9.6.3 jQuery中的AJAX事件 216

单元10　利用JavaScript/jQuery设计个性化网站 218

10.1 建设目标 218

10.1.1 展示公司形象 218

10.1.2 获得更多目标用户 218

10.1.3 开拓市场 219

10.2 网站规划 219

10.2.1 市场分析 219

10.2.2 网站建设目标和功能 219

10.2.3 网站建设中所使用的技术 219

10.2.4 网站建设内容 220

10.3 网站设计 220

10.3.1 设计目标 220

10.3.2 网站结构设计 220

10.3.3 网页效果设计 221

10.4 网页制作 224

10.4.1 制作首页 224

10.4.2 制作“联系我们”网页 235