网页设计与制作 JavaScript+jQuery标准教程 微课版

第 1章　网页设计基础

【学习目标】　01

【导引示例】　01

1.1　网页设计概述　01

1.1.1　网页设计常用技术　02

1.1.2　网页设计工具　02

1.1.3　网页展示工具　02

1.2　HTML和CSS　02

1.2.1　HTML基础　03

1.2.2　HTML常用标签　03

1.2.3　CSS基础语法　04

1.2.4　CSS选择器　04

1.2.5　CSS常用样式属性　04

1.3　初识JavaScript　05

1.3.1　JavaScript发展史　05

1.3.2　引入方式　05

1.3.3　输出语句　06

1.3.4　注释　06

【案例分析1-1】Hello，JavaScript！程序　07

1.4　初识jQuery　07

1.4.1　jQuery发展史　07

1.4.2　引入jQuery　08

1.4.3　jQuery基础语法　08

【案例分析1-2】Hello，jQuery！程序　08

1.5　思考与练习　09

1.5.1　疑难解读　09

1.5.2　课后习题　10

第　2章 JavaScript基础

【学习目标】　11

【导引示例】　11

2.1　变量　11

2.1.1　定义变量　11

2.1.2　关键字　12

【案例分析2-1】数据交换编程思想　13

2.2　数据类型　13

2.2.1　数据类型分类　13

2.2.2　数值类型　14

2.2.3　字符串类型　14

2.2.4　布尔类型　15

2.2.5　其他基本数据类型　15

2.2.6　数据类型转换　16

【案例分析2-2】输出多种类型变量的值　18

2.3　运算符　18

2.3.1　运算符概述　18

2.3.2　运算规则　18

2.3.3　运算符优先级　20

【案例分析2-3】连接并输出多个变量的内容　21

2.4　分支结构　21

2.4.1　if语句　21

2.4.2　if...else语句　22

2.4.3　if...else if语句　23

2.4.4　switch语句　24

【案例分析2-4】根据分数输出等级评价　24

2.5　循环结构　25

2.5.1　for循环　25

2.5.2　while循环　26

2.5.3　do...while循环　26

【案例分析2-5】控制台输出九九乘法表　27

2.6　跳转结构　27

2.6.1　continue语句　28

2.6.2　break语句　28

【案例分析2-6】当累加和大于100时跳出循环　28

【案例分析2-7】根据用户输入的层数绘制金字塔　28

2.7　思考与练习　29

2.7.1　疑难解读　29

2.7.2　课后习题　30

第3章　数组和函数

【学习目标】　31

【导引示例】　31

3.1　初识数组　32

3.1.1　创建数组　32

3.1.2　访问数组元素　33

3.1.3　数组遍历　33

【案例分析3-1】获取数组元素中的*大值　34

3.2　数组元素操作　34

3.2.1　修改数组元素　34

3.2.2　数组元素排序　36

【案例分析3-2】对数组元素进行排序后输出　36

3.3　初识函数　37

3.3.1　函数定义　37

3.3.2　函数的参数　38

3.3.3　函数的返回值　38

3.3.4　自调用函数　39

【案例分析3-3】利用函数判断闰年　39

3.4　作用域　40

3.4.1　作用域的分类　40

3.4.2　访问父级作用域变量　40

3.4.3　闭包函数　41

【案例分析3-4】求任意两个数的和　42

【案例分析3-5】输出杨辉三角　42

3.5　思考与练习　44

3.5.1　疑难解读　44

3.5.2　课后习题　44

第4章　类和对象

【学习目标】　46

【导引示例】　46

4.1　面向对象　47

4.1.1　自定义对象　47

4.1.2　访问对象的属性和方法　47

4.1.3　对象构造器　48

4.1.4　定义类　48

4.1.5　实例化对象　49

4.1.6　内置对象　49

【案例分析4-1】根据输入内容输出员工工资信息　50

4.2　初识浏览器对象模型　51

4.2.1　初识BOM　51

4.2.2　BOM结构　51

4.3　window对象　52

4.3.1　window对象的属性和方法　52

4.3.2　窗口加载事件　53

【案例分析4-2】根据需求修改窗口尺寸　54

4.4　BOM中的其他对象　54

4.4.1　location对象　54

4.4.2　navigator对象　55

4.4.3　history对象　56

4.4.4　screen对象　57

【案例分析4-3】定时切换诗句　58

4.5　思考与练习　59

4.5.1　疑难解读　59

4.5.2　课后习题　59

第5章　文档对象模型和事件

【学习目标】　61

【导引示例】　61

5.1　初识DOM　62

5.1.1　DOM树　62

5.1.2　document对象　62

5.2　对元素的操作　63

5.2.1　查找元素　63

5.2.2　设置元素的文本内容和属性值　65

5.2.3　设置元素样式　66

【案例分析5-1】侧边栏折叠效果　67

5.3　事件　68

5.3.1　事件概述　68

5.3.2　鼠标事件　68

5.3.3　键盘事件　69

5.3.4　表单事件　70

【案例分析5-2】图片交互效果　71

5.4　DOM节点　72

5.4.1　节点基础　72

5.4.2　创建节点　73

5.4.3　添加和删除节点　73

5.4.4　替换节点　75

【案例分析5-3】添加快捷方式　76

【案例分析5-4】图片移动到鼠标指针所在位置　77

5.5　思考与练习　78

5.5.1　疑难解读　78

5.5.2　课后习题　79

第6章　jQuery基础

【学习目标】　80

【导引示例】　80

6.1　jQuery选择器　81

6.1.1　元素选择器　81

6.1.2　属性选择器　82

6.1.3　关系选择器　82

6.1.4　过滤器　83

6.1.5　表单过滤器　85

【案例分析6-1】选项卡　85

6.2　jQuery事件　86

6.2.1　事件方法的基础语法　86

6.2.2　绑定事件　87

6.2.3　注销事件　89

【案例分析6-2】使用on()方法实现文本交互效果　91

6.3　jQuery中的交互事件方法　91

6.3.1　鼠标事件　91

6.3.2　键盘事件　92

6.3.3　页面事件　93

6.3.4　表单事件　94

6.3.5　event对象的方法和属性　95

【案例分析6-3】调用自定义事件方法切换文本样式　96

【案例分析6-4】商品展示栏的交互效果　97

6.4　思考与练习　98

6.4.1　疑难解读　98

6.4.2　课后习题　98

第7章　jQuery页面操作

【学习目标】　100

【导引示例】　100

7.1　HTML元素操作　101

7.1.1　获取和设置元素内容　101

7.1.2　操作元素属性　102

7.1.3　创建元素　103

7.1.4　添加元素　104

7.1.5　替换和克隆元素　106

7.1.6　删除元素　107

7.1.7　包裹元素　109

7.1.8　DOM树操作　110

【案例分析7-1】购物车　111

7.2　CSS类操作　112

7.2.1　添加CSS类　112

7.2.2　删除CSS类　113

7.2.3　动态切换CSS类　113

7.2.4　获取和设置CSS样式　114

7.2.5　元素尺寸操作　115

【案例分析7-2】下拉菜单效果　115

【案例分析7-3】多图片商品展示框　117

7.3　思考与练习　118

7.3.1　疑难解读　118

7.3.2　课后习题　118

第8章　jQuery动画

【学习目标】　120

【导引示例】　120

8.1　基础动画效果　121

8.1.1　隐藏元素　121

8.1.2　显示元素　121

8.1.3　状态切换　122

【案例分析8-1】侧边栏　123

8.2　淡入/淡出动画效果　124

8.2.1　淡入显示元素　124

8.2.2　淡出隐藏元素　125

8.2.3　淡入/淡出切换元素　125

8.2.4　精准控制淡入/淡出动画效果　126

【案例分析8-2】补全古诗并显示和隐藏译文　127

8.3　滑动动画效果和自定义动画效果　127

8.3.1　滑动显示和隐藏匹配的元素　127

8.3.2　滑动切换元素的可见性　129

8.3.3　自定义动画效果　129

8.3.4　停止动画　131

【案例分析8-3】实现下拉菜单左右抖动后的隐藏和显示　132

【案例分析8-4】图片顺序切换效果　132

8.4　思考与练习　134

8.4.1　疑难解读　134

8.4.2　课后习题　134

第9章　jQuery的工具函数

【学习目标】　136

【导引示例】　136

9.1　工具函数概述与数组操作　137

9.1.1　工具函数概述　137

9.1.2　获取数组元素　137

9.1.3　数组操作　139

【案例分析9-1】将数组数据添加到表格中　140

9.2　字符串操作函数　141

9.2.1　字符串空格处理　141

9.2.2　JSON字符串格式处理　141

【案例分析9-2】登录数据处理　142

9.3　测试操作函数　142

9.3.1　判断对象是否为空　142

9.3.2　判断参数类型　143

【案例分析9-3】判断参数的类型　143

9.4　函数扩展　144

9.4.1　合并对象函数　144

9.4.2　扩展属性和方法函数　145

【案例分析9-4】扩展一个求和方法　146

9.5　其他工具函数　146

9.5.1　元素操作函数　146

9.5.2　获取时间函数　148

9.5.3　判断对象类型函数　148

【案例分析9-5】将用户输入的内容存储到元素　149

【案例分析9-6】模拟用户注册和登录　150

9.6　思考与练习　151

9.6.1　疑难解读　151

9.6.2　课后习题　152

第　10章 jQuery插件

【学习目标】　153

【导引示例】　153

10.1　jQuery插件基础　154

10.1.1　jQuery插件概述　154

10.1.2　jQuery插件的使用方式　154

10.2　常用的jQuery插件　154

10.2.1　Validate插件　154

10.2.2　Cookie插件　157

10.2.3　Growl插件　158

10.2.4　EasyZoom插件　159

【案例分析10-1】带状缩略图放大　160

10.3　jQuery UI插件　162

10.3.1　jQuery UI插件基础　162

10.3.2　交互　162

10.3.3　小部件　166

10.3.4　效果　170

【案例分析10-2】选项卡　172

【案例分析10-3】菜单　173

10.4　思考与练习　174

10.4.1　疑难解读　174

10.4.2　课后习题　175

第　11章 综合实训：开发网络相册

【学习目标】　176

11.1　分析页面　176

11.1.1　设计分析　176

11.1.2　功能分析　176

11.2　模块拆分　177

11.2.1　相册列表　177

11.2.2　标准相片展示框　178

11.2.3　相片缩略图列表　178

11.3　交互效果设计　179

11.3.1　相册排序效果　179

11.3.2　相片轮播效果　180

11.3.3　切换缩略图效果　181

11.3.4　相片切换和局部放大效果　182

11.4　网络相册效果展示　183

11.5　思考与练习　186

11.5.1　疑难解读　186

11.5.2　课后习题　187

第　12章

综合实训：开发汽车销售门户网页

【学习目标】　188

12.1　网页分析　188

12.1.1　首页布局分析　188

12.1.2　详情页面布局分析　188

12.2　网页结构设计　189

12.2.1　首页元素布局　189

12.2.2　首页样式添加　191

12.2.3　详情页面元素布局　193

12.2.4　详情页面样式添加　194

12.3　首页交互效果设计　195

12.3.1　下拉菜单自动显示效果　195

12.3.2　汽车信息列表切换效果　196

12.3.3　点击按钮关闭下拉菜单效果　196

12.3.4　广告图片自动轮播效果　196

12.3.5　点击列表切换广告图片效果　197

12.3.6　图片放大和文字显示效果　197

12.3.7　按钮交互效果　198

12.4　详情页面交互效果设计　199

12.4.1　滚动页面切换导航栏效果　199

12.4.2　点击元素滚动页面效果　199

12.4.3　滚动页面显示相应元素效果　200

12.4.4　表格交互效果　200

12.5　汽车销售网页效果展示　201

12.6　思考与练习　203

12.6.1　疑难解读　203

12.6.2　课后习题　204