Javascript特效实战PDF电子书下载

学习情境1 JS动态显示内容 1

1.1 任务引入 1

1.2 任务分析 1

1.2.1 任务目标 1

1.2.2 设计思路 1

1.3 任务实施 2

任务1 创建站点和HTML页面 2

任务2 在页面中添加JS代码 3

任务3 实现JS在页面中动态显示内容 4

1.4 知识小结 5

1.4.1 ＜script＞标签 5

1.4.2 document.write() 5

1.4.3 JS代码添加方式 5

1.5 知识拓展 6

1.5.1 警告框alert 6

1.5.2 JS中的数据类型 6

1.5.3 JS中的变量 7

1.6 能力拓展 8

1.6.1 常用JS调试方法 8

1.6.2 写出优秀JS程序的基础——良好的编码习惯 8

1.7 思考与练习 8

学习情境2 简易计算器 9

2.1 任务引入 9

2.2 任务分析 9

2.2.1 任务目标 9

2.2.2 设计思路 10

2.3 任务实施 10

任务1 站点的建立以及页面的布局 10

任务2 按钮功能的实现 11

任务3 加减乘除的实现 12

2.4 知识小结 14

2.4.1 通过id获取页面标签 14

2.4.2 获取文本框的值 14

2.4.3 数据类型转换 15

2.4.4 基本运算符 16

2.5 知识拓展 17

2.5.1 函数 17

2.5.2 按钮的单击事件 17

2.6 能力拓展 18

2.7 思考与练习 18

学习情境3 表单验证 19

3.1 任务引入 19

3.2 任务分析 19

3.2.1 任务目标 19

3.2.2 设计思路 20

3.3 任务实施 21

任务1 表单结构布局 21

任务2 及时判断输入信息 23

任务3 获取和验证输入信息 24

任务4 阻止错误信息的提交1 25

任务5 阻止错误信息的提交2 27

3.4 知识小结 28

3.4.1 表单＜form＞的onsubmit事件 28

3.4.2 字符串的length属性与indexof()方法 28

3.5 知识拓展 29

3.5.1 条件判断语句if...else 29

3.5.2 一些简单的字符串操作 29

3.6 能力拓展 31

HTML5表单验证 31

3.7 思考与练习 31

学习情境4 二级菜单 32

4.1 任务引入 32

4.2 任务分析 32

4.2.1 任务目标 32

4.2.2 设计思路 33

4.3 任务实施 33

任务1 在页面中添加banner（横幅广告）结构 33

任务2 页面中一级菜单的布局 35

任务3 页面中二级菜单的布局 36

任务4 显示二级菜单 38

任务5 隐藏二级菜单 40

4.4 知识小结 40

4.4.1 二级菜单的结构特点 40

4.4.2 二级菜单的样式特点 41

4.4.3 onmouseover与onmouseout事件 41

4.5 知识拓展 41

4.5.1 getElementById与getElementsByTagName 41

4.5.2 JS控制标签的CSS属性 42

4.5.3 JS中的事件 43

4.5.4 函数的传参 44

4.6 能力拓展 45

4.7 思考与练习 45

学习情境5 电子时钟 46

5.1 任务引入 46

5.2 任务分析 46

5.2.1 任务目标 46

5.2.2 设计思路 47

5.3 任务实施 47

任务1 时钟结构布局 47

任务2 获取系统时间 48

任务3 显示系统时间 49

任务4 时间走动 50

5.4 知识小结 51

5.4.1 Date对象 51

5.4.2 innerHTML属性 53

5.4.3 计时器：setInterval 54

5.5 知识拓展 55

5.5.1 函数延迟调用：setTimeout 55

5.5.2 选择流程语句：switch 57

5.6 能力拓展 58

5.6.1 双位数显示时间 58

5.6.2 计算时间间距 58

5.7 思考与练习 60

学习情境6 选项卡 61

6.1 任务引入 61

6.2 任务分析 61

6.2.1 任务目标 61

6.2.2 设计思路 62

6.3 任务实施 62

任务1 选项卡结构布局 62

任务2 获取选项卡标签 64

任务3 修改标签样式 65

任务4 关联选项卡所选标签和对应的内容 66

6.4 知识小结 68

6.4.1 关键字：this 68

6.4.2 className属性 69

6.4.3 标签的自定义属性 69

6.5 知识拓展 71

6.5.1 childNodes与children 71

6.5.2 循环语句：for语句 72

6.6 能力拓展 72

自定义属性兼容性 72

6.7 思考与练习 73

学习情境7 无缝滚动 74

7.1 任务引入 74

7.2 任务分析 74

7.2.1 任务目标 74

7.2.2 设计思路 75

7.3 任务实施 75

任务1 页面公告板块的布局 75

任务2 实现公告的无缝向上滚动 77

任务3 鼠标控制无缝滚动的暂停与开始 81

7.4 知识小结 82

7.4.1 滚动原理 82

7.4.2 offsetHeight属性 82

7.5 知识拓展 82

7.5.1 innerHTML属性 82

7.5.2 offsetHeight和offsetWidth属性 84

7.6 能力拓展 84

7.6.1 垂直图片滚动 84

7.6.2 内容的水平滚动（图片或文字） 84

7.7 思考与练习 85

学习情境8 图片切换 86

8.1 任务引入 86

8.2 任务分析 86

8.2.1 任务目标 86

8.2.2 设计思路 87

8.3 任务实施 87

任务1 图片切换的结构布局 87

任务2 建立对象数组 90

任务3 图片自动切换 90

任务4 序号标签切换 91

任务5 鼠标控制图片切换 92

8.4 知识小结 93

8.5 知识拓展 94

8.5.1 getElementsByTagName方法 94

8.5.2 style属性和className属性 96

8.6 能力拓展 101

JS动态控制标签事件 101

8.7 思考与练习 102

学习情境9 省市级联 103

9.1 任务引入 103

9.2 任务分析 103

9.2.1 任务目标 103

9.2.2 设计思路 103

9.3 任务实施 105

任务1 建立省市数据 105

任务2 创建数据关联 106

任务3 加载省市数据 107

任务4 显示省市信息 108

9.4 知识小结 110

9.4.1 一维数组和多维数组 110

9.4.2 body.onload事件 111

9.4.3 select对象 113

9.5 知识拓展 115

文档对象模型（DOM） 115

9.6 能力拓展 123

9.6.1 DOM方式动态创建表格 123

9.6.2 制作列表隔行变色 124

9.6.3 退出系统确认框制作 125

9.7 思考与练习 126

学习情境10 jQuery制作二级菜单 127

10.1 任务引入 127

10.2 任务分析 127

10.2.1 任务目标 127

10.2.2 设计思路 128

10.3 任务实施 128

任务1 二级菜结构与样式编写 128

任务2 jQuery文件的引入 130

任务3 jQuery实现二级菜单效果 131

10.4 知识小结 133

10.4.1 jQuery的基础选择器：$() 133

10.4.2 jQuery的ready函数 135

10.4.3 添加jQuery事件 136

10.4.4 jQuery的hover事件 137

10.4.5 二级菜单的显示与隐藏 137

10.5 知识拓展 137

10.5.1 jQuery基础动画效果 137

10.5.2 jQuery过滤选择器 138

10.6 能力拓展 140

10.6.1 jQuery隔行变色 140

10.6.2 透明度变化式二级菜单效果 140

10.7 思考与练习 141

学习情境11 jQuery制作选项卡 142

11.1 任务引入 142

11.2 任务分析 142

11.2.1 任务目标 142

11.2.2 设计思路 143

11.3 任务实施 143

任务1 制作选项卡的结构与样式 143

任务2 制作选项卡标题特效 146

任务3 制作选项卡内容特效 147

11.4 知识小结 148

11.4.1 index()函数 149

11.4.2 eq()函数 149

11.4.3 选项卡的结构特点 149

11.5 知识拓展 149

11.5.1 jQuery样式操作 150

11.5.2 jQuery DOM操作 150

11.6 能力拓展 151

11.6.1 单行背景色变化 151

11.6.2 添加删除附件 152

11.7 思考与练习 153

学习情境12 AJAX注册用户名检测 154

12.1 任务引入 155

12.2 任务分析 156

12.2.1 任务目标 156

12.2.2 设计思路 156

12.3 任务实施 157

任务1 表单页面布局 157

任务2 失去焦点事件处理函数 158

任务3 AJAX用户名验证实现 158

12.4 知识小结 162

12.4.1 XmlHttpRequest对象的创建 162

12.4.2 AJAX处理用户请求关键步骤 163

12.5 知识拓展 164

12.5.1 JS对象与JSON数据 164

12.5.2 XML DOM 166

12.6 能力拓展 169

12.6.1 使用post发送数据请求 169

12.6.2 使用JSON数据响应结果 170

12.7 思考与练习 171

附录 172

附录1 Javascript正则表达式 172

附1.1 正则表达式简介 172

附1.2 正则表达式基础语法 172

附1.3 Javascript正则表达式的使用 175

附1.4 常用正则表达式速查 176

附录2 jQuery常用插件 177

附2.1 表单验证插件：Validation 177

附2.2 日历插件：Datepicker 182

附2.3 图片局部放大插件：cloud-zoom 183

附2.4 其他常用jQuery插件 184