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

1.1 任务引入

1.2 任务分析

1.2.1 任务目标

1.2.2 设计思路

1.3 任务实施

任务1 创建站点和HTML页面

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

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

1.4 知识小结

1.4.1 ＜script＞标签

1.4.2 document.write()

1.4.3 JS代码添加方式

1.5 知识拓展

1.5.1 警告框alert

1.5.2 JS中的数据类型

1.5.3 JS中的变量

1.6 能力拓展

1.6.1 常用JS调试方法

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

1.7 思考与练习

学习情境2 简易计算器

2.1 任务引入

2.2 任务分析

2.2.1 任务目标

2.2.2 设计思路

2.3 任务实施

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

任务2 按钮功能的实现

任务3 加减乘除的实现

2.4 知识小结

2.4.1 通过id获取页面标签

2.4.2 获取文本框的值

2.4.3 数据类型转换

2.4.4 基本运算符

2.5 知识拓展

2.5.1 函数

2.5.2 按钮的单击事件

2.6 能力拓展

2.7 思考与练习

学习情境3 表单验证

3.1 任务引入

3.2 任务分析

3.2.1 任务目标

3.2.2 设计思路

3.3 任务实施

任务1 表单结构布局

任务2 及时判断输入信息

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

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

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

3.4 知识小结

3.4.1 表单＜form＞的onsubmit事件

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

3.5 知识拓展

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

3.5.2 一些简单的字符串操作

3.6 能力拓展

HTML5表单验证

3.7 思考与练习

学习情境4 二级菜单

4.1 任务引入

4.2 任务分析

4.2.1 任务目标

4.2.2 设计思路

4.3 任务实施

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

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

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

任务4 显示二级菜单

任务5 隐藏二级菜单

4.4 知识小结

4.4.1 二级菜单的结构特点

4.4.2 二级菜单的样式特点

4.4.3 onmouseover与onmouseout事件

4.5 知识拓展

4.5.1 getElementById与getElementsByTagName

4.5.2 JS控制标签的CSS属性

4.5.3 JS中的事件

4.5.4 函数的传参

4.6 能力拓展

4.7 思考与练习

学习情境5 电子时钟

5.1 任务引入

5.2 任务分析

5.2.1 任务目标

5.2.2 设计思路

5.3 任务实施

任务1 时钟结构布局

任务2 获取系统时间

任务3 显示系统时间

任务4 时间走动

5.4 知识小结

5.4.1 Date对象

5.4.2 innerHTML属性

5.4.3 计时器：setInterval

5.5 知识拓展

5.5.1 函数延迟调用：setTimeout

5.5.2 选择流程语句：switch

5.6 能力拓展

5.6.1 双位数显示时间

5.6.2 计算时间间距

5.7 思考与练习

学习情境6 选项卡

6.1 任务引入

6.2 任务分析

6.2.1 任务目标

6.2.2 设计思路

6.3 任务实施

任务1 选项卡结构布局

任务2 获取选项卡标签

任务3 修改标签样式

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

6.4 知识小结

6.4.1 关键字：this

6.4.2 className属性

6.4.3 标签的自定义属性

6.5 知识拓展

6.5.1 childNodes与children

6.5.2 循环语句：for语句

6.6 能力拓展

自定义属性兼容性

6.7 思考与练习

学习情境7 无缝滚动

7.1 任务引入

7.2 任务分析

7.2.1 任务目标

7.2.2 设计思路

7.3 任务实施

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

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

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

7.4 知识小结

7.4.1 滚动原理

7.4.2 offsetHeight属性

7.5 知识拓展

7.5.1 innerHTML属性

7.5.2 offsetHeight和offsetWidth属性

7.6 能力拓展

7.6.1 垂直图片滚动

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

7.7 思考与练习

学习情境8 图片切换

8.1 任务引入

8.2 任务分析

8.2.1 任务目标

8.2.2 设计思路

8.3 任务实施

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

任务2 建立对象数组

任务3 图片自动切换

任务4 序号标签切换

任务5 鼠标控制图片切换

8.4 知识小结

8.5 知识拓展

8.5.1 getElementsByTagName方法

8.5.2 style属性和className属性

8.6 能力拓展

JS动态控制标签事件

8.7 思考与练习

学习情境9 省市级联

9.1 任务引入

9.2 任务分析

9.2.1 任务目标

9.2.2 设计思路

9.3 任务实施

任务1 建立省市数据

任务2 创建数据关联

任务3 加载省市数据

任务4 显示省市信息

9.4 知识小结

9.4.1 一维数组和多维数组

9.4.2 body.onload事件

9.4.3 select对象

9.5 知识拓展

文档对象模型（DOM）

9.6 能力拓展

9.6.1 DOM方式动态创建表格

9.6.2 制作列表隔行变色

9.6.3 退出系统确认框制作

9.7 思考与练习

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

10.1 任务引入

10.2 任务分析

10.2.1 任务目标

10.2.2 设计思路

10.3 任务实施

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

任务2 jQuery文件的引入

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

10.4 知识小结

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

10.4.2 jQuery的ready函数

10.4.3 添加jQuery事件

10.4.4 jQuery的hover事件

10.4.5 二级菜单的显示与隐藏

10.5 知识拓展

10.5.1 jQuery基础动画效果

10.5.2 jQuery过滤选择器

10.6 能力拓展

10.6.1 jQuery隔行变色

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

10.7 思考与练习

学习情境11 jQuery制作选项卡

11.1 任务引入

11.2 任务分析

11.2.1 任务目标

11.2.2 设计思路

11.3 任务实施

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

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

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

11.4 知识小结

11.4.1 index()函数

11.4.2 eq()函数

11.4.3 选项卡的结构特点

11.5 知识拓展

11.5.1 jQuery样式操作

11.5.2 jQuery DOM操作

11.6 能力拓展

11.6.1 单行背景色变化

11.6.2 添加删除附件

11.7 思考与练习

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

12.1 任务引入

12.2 任务分析

12.2.1 任务目标

12.2.2 设计思路

12.3 任务实施

任务1 表单页面布局

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

任务3 AJAX用户名验证实现

12.4 知识小结

12.4.1 XmlHttpRequest对象的创建

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

12.5 知识拓展

12.5.1 JS对象与JSON数据

12.5.2 XML DOM

12.6 能力拓展

12.6.1 使用post发送数据请求

12.6.2 使用JSON数据响应结果

12.7 思考与练习

附录

附录1 Javascript正则表达式

附1.1 正则表达式简介

附1.2 正则表达式基础语法

附1.3 Javascript正则表达式的使用

附1.4 常用正则表达式速查

附录2 jQuery常用插件

附2.1 表单验证插件：Validation

附2.2 日历插件：Datepicker

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

附2.4 其他常用jQuery插件