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

　　本书是针对零基础读者编写的动态网站开发入门教材，循序渐进地介绍了JavaScript开发技术。依据Web前端开发岗位的职业能力要求，本书重点介绍了JavaScript 的核心技术，并在此基础上详细讲解了jQuery框架的使用方法。本书使用热点案例，可以让初学者快速掌握动态网站开发技术。通过扫描二维码，读者可以进行课堂训练，进一步巩固所学知识，提高实际开发能力。本书内容全面，结合ECMAScript6（简称ES6）标准，重点突出，易于理解，每章内容简洁紧凑，从实践的角度入手，为读者更好地使用JavaScript及jQuery框架开发动态网页提供了很好的指导。本书分为10个单元，前9个单元包括JavaScript概述、JavaScript基础、JavaScript函数、面向对象编程、JavaScript内置对象、BOM编程、DOM编程、DOM事件、利用jQuery编程。后一个单元通过利用JavaScript/jQuery设计一个个性化网站，以提升读者的综合技能。本书适合作为高等职业院校软件技术、计算机应用技术、数字媒体技术、大数据技术与应用等专业的动态网页程序设计相关课程的教材，也可以作为打算学习和从事JavaScript+jQuery动态网页设计的开发人员的参考书。

　　孙佳帝，男，2019年被评为优秀党员，软件技术专业教研室主任。2017年，组建"长职新创研发中心”，组织并策划长职院数字化校园建设之路。期间，带领软件技术专业师生与企业开发工程师为长职院开发了10余套应用系统，主要包括统一身份认证中心、数据服务中心、基于人像识别技术的智能化教室系统等。其中的单独招生等多个系统推广到了多个兄弟院校和其他相关领域应用。参与项目研发的学生多次在各种大赛中获奖，多数学生被大企业录用。2014年-2017年间，参与"吉林省农产品质量安全追溯系统”的设计、研发工作，该系统在2016年正式上线2017年，作为负责人，成功立项了吉林省普通高等学校高水平专业（群）建设项目，促进了专业的发展。2018年，专业申报成为吉林省首批"双师双能型”教师培养培训基地，并为吉林省多个本科类院校教师进行实践技能培训，帮助高校教师提升实践能力水平。

单元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