jQuery网页特效设计基础教程 第11章 jQuery在HTML5中的应用 教案
合集下载
JavaScript jQuery网页特效设计任务驱动教程-课程设计
jQuery 知识导航
（1）下载和替代 jQuery 库 （2）jQuery 的引用 （3）jQuery 函数的类别 （4）jQuery 的基础语法 （5）文档就绪函数 ready
JavaScript 和 jQuery 的使用比较
4
（8）JavaScript 的计时方法 （9）JavaScript 的 RegExp 对象及其方法 （10）支持正则表达式的 String 对象的方法
单元序号 单元 3 单元 4 单元 5
JavaScript 知识导航 （1）JavaScript 的循环语句 （2）HTML DOM（文档对象模型） （3）JavaScript 的位置与尺寸方法 JavaScript 的对象 （1）JavaScript 的事件 （2）JavaScript 的事件方法
JavaScript+jQuery 网页特效设计任务驱动教程
单元序号 单元 2 单元 3
单元 4
训练环节 特效赏析 引导训练 自主训练 特效赏析 引导训练 自主训练 特效赏析
引导训练
自主训练
网页特效设计任务 【任务 2-1】显示常规格式的当前日期与时间 【任务 2-2】采用多种方式显示当前的日期 【任务 2-3】不同的节日显示对应的问候语 【任务 2-4】在特定日期的特定时段显示打折促销信息 【任务 2-5】不同时间段显示不同的问候语 【任务 2-6】一周内每天输出不同的图片 【任务 2-7】实现在线考试倒计时 【任务 2-8】显示限定格式的日期 【任务 2-9】验证日期的有效性 【任务 2-10】实现限时抢购倒计时 【任务 3-1】JavaScript 实现滚动网页标题栏中的文字 【任务 3-2】jQuery 实现向上滚动网站促销公告 【任务 3-3】JavaScript 实现网页状态栏中的文字呈现打字效果 【任务 3-4】JavaScript 实现网页文字滚动与等待的交替效果 【任务 3-5】JavaScript 实现鼠标指针滑过动态改变显示内容及外观效果 【任务 3-6】JavaScript 实现文本围绕鼠标指针旋转 【任务 3-7】jQuery 实现网站动态信息滚动与等待的交替效果 【任务 3-8】JavaScript 实现网站公告信息连续向上滚动 【任务 3-9】jQuery 实现循环滚动网页中的文字 【任务 4-1】JavaScript 实现纵向焦点图片轮换 【任务 4-2】jQuery 实现带左右按钮控制焦点图片切换 【任务 4-3】JavaScript 实现控制网页中的图片尺寸 【任务 4-4】JavaScript 实现限制图片尺寸与滑动鼠标滚轮调整图片尺寸 【任务 4-5】JavaScript 实现网页中图片连续向上滚动 【任务 4-6】JavaScript 实现具有滤镜效果的横向焦点图片轮换 【任务 4-7】JavaScript 实现具有手风琴效果的横向焦点图片轮换 【任务 4-8】JavaScript 实现带缩略图且双向移动的横向焦点图轮换 【任务 4-9】JavaScript 实现随滚动条滑块的移动上下滑动图片 【任务 4-10】jQuery 实现图片纵向移动的焦点图片轮换 【任务 4-11】jQuery 实现具有滤镜效果的横向焦点图片轮换 【任务 4-12】jQuery 实现鼠标指针滑过图片时预览大图 【任务 4-13】jQuery 实现单击箭头按钮切换图片 【任务 4-14】JavaScript 实现图片连续向左滚动 【任务 4-15】JavaScript 实现通用横向焦点图片轮换 【任务 4-16】JavaScript 实现网页图片拖曳 【任务 4-17】jQuery 实现图片纵向切换 【任务 4-18】jQuery 实现自动与手动均可切换的焦点图片轮换 【任务 4-19】jQuery 实现单击左右箭头滚动图片
使用jQuery快速高效制作网页交互特效TP03
jQuery语法结构
语法
$(selector).action() ;
工厂函数$()：将DOM对象转化为jQuery对象 选择器 selector：获取需要操作的DOM 元素 方法action()：jQuery中提供的方法，其中包 括绑定事件处理的方法
示例
$("#current").addClass("current");
弹出消息框，显示“非常满意” 将DOM对象转换为jQuery对象，再调用jQuery对象 的方法
讲解需求说明
31/38
学员操作—使用jQuery方式弹出消息2-2
指导
实现思路
1. 在新建的HTML文档中引入jQuery库 2. 使用$(document).ready()创建文档加载事件 3. 获取DOM对象 4. 将DOM对象转换成jQuery 对象 5. 使用jQuery对象的click()方法，弹出对话框
文本节点：元素节点内的文本内容
<p>你最喜欢的食品是？ </p>
属性节点：元素节点的子节点
<p title="提示">……</p>
19/38
DOM对象和jQuery对象
DOM对象：直接使用JavaScript获取的节点 对象
var objDOM=document.getElementById("title"); var objHTML=objDOM.innerHTML;
jquery-1.版本号 .min.js（发布版）
约91KB
在页面中引入jQuery
<script src="js/jquery-1.8.3.js" type="text/javascript"></script>
jQuery网页特效任务驱动式教程-实现动画效果
使用显隐动画模拟文件夹的树形列表结构
任务实现 初始状态，使用jQuery代码将所有包含ul子元素的列表项li （ $("li").has("ul") ）鼠标指针设置为手状，列表符号图片为表示折叠状 态的向右箭头，子元素ul都是隐藏的。 对所有不包含ul子元素的列表项li，设置鼠标默认，列表符号为none。 单击包含ul子元素的列表项li时，判断当前单击操作的是否是该元素自身 （ if (this == event.target) ），这是因为在单击子元素触发click事件 时，会同时触发父元素的click事件（事件的冒泡），所以此处必须要进行判 断处理。若是，则根据其子元素的显示隐藏状态（is(":hidden")）更改其样 式效果和子元素的隐藏显示效果；若单击的是子元素，则不做任何操作。
slideUp() 以逐渐改变高度的滑动方式隐藏显示的被选中元素。 格式：$(selector).slideUp(speed, callback)
slideToggle() 可以在slideDown()与slideUp ()方法之间进行切换。 格式：$(selector).slideToggle(speed, callback)
使用显隐动画模拟文件夹的树形列表结构
显隐动画
显示隐藏的元素 show(speed,easing,回调函数) speed：可选。设置动画变化过程持续的时间，取值可以是“slow|normal|fast|毫秒”， 其中slow表示600毫秒，normal表示400毫秒，fast表示200毫秒，也可以自行定义动画 持续的毫秒数。如果没有定义该参数，则元素会由隐藏状态直接变为显示状态，也就是 没有完成修改的动画过程；如果定义了该参数，则元素的宽度、高度、透明度、外边距 和内填充等样式属性，会在指定的时间内逐渐变化到完整显示 easing：可选。规定在动画的不同点上元素的速度。默认值为 “swing”，表示在开头 和结尾移动慢，在中间移动快；"linear" 表示匀速移动。 回调函数，表示在动画完成时要执行的函数，函数内部定义动画完成之后要执行的功能， 该参数可以省略。
jQuery网页特效任务驱动式教程-图像处理特效
购物网站中的放大镜
页面元素样式 shopping_left中下面的元素min用于存放缩略图 下面的小图，样式要求：要设计为网格容器，分 为5个列，最左侧和最右侧两个列的宽度都是30像 素，中间3个列的宽度都是60像素，列与列之间的 间距是15像素，共占据300像素。 min中所有图片的样式要求：宽度100%（是指与 min中网格对应的列宽一致），白色1像素实线边 框，鼠标指向时显示为手状。 使用.min>img:nth-child(2)定义图片 lianyiqunMin1.jpg初始时为红色边框，表示初始 时被选中显示的是这幅图。 shopping_right的背景设置为#ddf颜色，只是为 显示商品信息预留空间。
购物网站中的放大镜
页面元素样式 shopping_left中上面的元素zoom的样式要 求：宽度300像素，高度300像素，边框为1 像素实线颜色#aaf，因为zoom内部有多个元 素需要使用绝对定位，所以zoom需要设置为 相对定位。 zoom内部的origin用于设置原始缩略图， scale用于显示放大之后的效果图。 origin的样式要求：宽度300像素，高度300 像素，相对定位。 origin中img元素的样式要求：宽度和高度 与origin相同。
JavaScript高级编程
任务7 图像处理特效
任务7 图像处理特效
任务7.1 购物网站中的放大镜 任务7.2 瀑布流图像布局 任务7.3 添加文件类型图标 任务7.4 超链接背景图的切换 任务7.5 使用图片精灵实现星级评价
购物网站中的放大镜
任务描述 左侧下方有3幅不同角度的商品小图， 小图左侧和右侧的向左向右箭头在 本页面中没有定义功能，如果提供 的图片更多，这两个箭头可以用于 向左或者向右滚动小图；上方是一 幅缩略图，缩略图区域显示的图片 根据用户选择的小图来确定，初始 显示的是第1幅小图对应的缩略图， 此时第1幅小图带着红色边框。 下面是选择第二幅小图并选择放大 区域之后的效果
html的jquery使用方法
HTML的jQuery使用方法一、简介1.1 什么是jQuery？jQuery是一个快速、简洁的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax等常见的操作。
通过jQuery，我们能够以更少的代码完成更多的功能，提高了JavaScript代码的可读性和可维护性。
1.2 为什么要使用jQuery？相比纯粹的JavaScript，jQuery提供了更丰富的API和更简洁的语法，能够大大提高开发效率。
另外，jQuery还兼容了各种浏览器，并且具有良好的扩展性，使得它成为前端开发中不可或缺的工具。
二、引入jQuery2.1 下载jQuery我们需要从官方全球信息湾下载jQuery库文件。
选择合适的版本，然后将文件保存到项目的相应目录下。
2.2 引入jQuery在HTML文件中，通过`<script>`标签将jQuery库文件引入到页面中。
通常情况下，我们会将jQuery的引入放在`<head>`标签的末尾或者`<body>`标签的开始位置。
```html<!DOCTYPE html><html><head><title>使用jQuery的HTML页面</title><script src="jquery.min.js"></script></head><body><!-- 页面内容 --></body></html>```三、基本用法3.1 文档就绪事件在使用jQuery时，为了确保DOM结构已经加载完毕，我们通常会将jQuery代码放在文档就绪事件中。
这可以通过`$(document).ready()`来实现。
```javascript$(document).ready(function(){// 在此处编写jQuery代码```3.2 选择器jQuery的选择器和CSS的选择器非常相似，我们可以使用各种选择器定位页面上的元素，然后对这些元素进行操作。
网页特效设计基础第11章jQuery在HTML5中的应用
第11章 jQuery在HTML5中的应用
本章要点：
HTML5的基础知识 ■ 使用HTML5+jQuery实现文件上传进度条的显示 ■ 使用HTML5+jQuery实现图片旋转效果 ■ 使用jQuery插件在HTML5中实现声音的播放 ■ Web Storage编程应用 ■ 旅游信息网前台页面的实现 ■
随着 Web 应用的发展，客户端存储的使用也越来 越多，而实现客户端存储的方式则是多种多样的。最简 单而且兼容性最佳的方案是 Cookies，但是作为真正的 客户端存储，Cookies 还是有以下这些不足。
大小：Cookies 的大小被限制在 4KB。 带宽：Cookies 是随 HTTP 事物一起发送的，因此
11.1 HTML5 基础
11.1.1 HTML5 的新特性
HTML5 是基于各种各样的理念进行设计的，这些 设计理念体现了对可能性和可行性的新认识。
1．兼容性
HTML5 的一个核心理念就是保持一切新特性平滑 过渡。
2．实用性和用户优先
HTML5 规范是基于用户优先准则编写的，其主要 宗旨是“用户即上帝”，这意味着在遇到无法解决的冲 突时，规范会把用户放到第一位，其次是页面的作者， 再次是实现者（或浏览器），接着是规范制定者，最后 才考虑理论的纯粹实现。
目前绝大多数的主流浏览器都支持 HTML5，只是支持 的程度不同。要测试浏览器对 HTML5 的支持程度，只需 要访问 html5test 网站即可。例如，使用 Google Chrome 68.0.3440.106 版本测试HTML5的支持程度，得 分为 515 分（满分为 550 分），如图 11-1 所示。
Canvas 元素是 HTML5 中新增的一个重要元素， 专门用来绘制图形。在页面上放置一个 Canvas 元素， 就相当于在页面上放置了一块“画布”，可以在其中进 行图形的描绘。
本章要点：
HTML5的基础知识 ■ 使用HTML5+jQuery实现文件上传进度条的显示 ■ 使用HTML5+jQuery实现图片旋转效果 ■ 使用jQuery插件在HTML5中实现声音的播放 ■ Web Storage编程应用 ■ 旅游信息网前台页面的实现 ■
随着 Web 应用的发展，客户端存储的使用也越来 越多，而实现客户端存储的方式则是多种多样的。最简 单而且兼容性最佳的方案是 Cookies，但是作为真正的 客户端存储，Cookies 还是有以下这些不足。
大小：Cookies 的大小被限制在 4KB。 带宽：Cookies 是随 HTTP 事物一起发送的，因此
11.1 HTML5 基础
11.1.1 HTML5 的新特性
HTML5 是基于各种各样的理念进行设计的，这些 设计理念体现了对可能性和可行性的新认识。
1．兼容性
HTML5 的一个核心理念就是保持一切新特性平滑 过渡。
2．实用性和用户优先
HTML5 规范是基于用户优先准则编写的，其主要 宗旨是“用户即上帝”，这意味着在遇到无法解决的冲 突时，规范会把用户放到第一位，其次是页面的作者， 再次是实现者（或浏览器），接着是规范制定者，最后 才考虑理论的纯粹实现。
目前绝大多数的主流浏览器都支持 HTML5，只是支持 的程度不同。要测试浏览器对 HTML5 的支持程度，只需 要访问 html5test 网站即可。例如，使用 Google Chrome 68.0.3440.106 版本测试HTML5的支持程度，得 分为 515 分（满分为 550 分），如图 11-1 所示。
Canvas 元素是 HTML5 中新增的一个重要元素， 专门用来绘制图形。在页面上放置一个 Canvas 元素， 就相当于在页面上放置了一块“画布”，可以在其中进 行图形的描绘。
网页特效设计基础第5章 jQuery中的事件处理和动画效果
人们常说“事件是脚本语言的灵魂”，事件使页面具有 了动态性和响应性，如果没有事件将很难完成页面与用户之 间的交互。在传统的 JavaScript 中内置了一些事件响应的 方式，但是 jQuery 增强、优化并扩展了基本的事件处理机 制。
5.1 jQuery 中的事件处理
5.1.1 页面加载响应事件
events：一个或多个用空格分隔的事件类型和可选的命名 空间，如"click"事件。
selector：一个最初传递到.on()事件处理程序附加的选 择器。
on(events,[selector],[data],fn)
events：一个或多个用空格分隔的事件类型和可选的 命名空间，如"click"事件。
selector：可选参数。
data：当一个事件被触发时要传递 event.data 给事 件处理函数。
fn：该事件被触发时执行的函数。当 fn=false 时可 以做一个函数的简写，返回值为 false。
5.1.2 jQuery 中的事件
只有页面加载显然是不够的，程序在其他的时候也需 要完成某个任务。比）事件以及失去焦点（onblur）事件 等。
在不同的浏览器中事件名称是不同的，例如，在IE浏 览器中的事件名称大部分都含有 on，例如 onkeypress() 事件，但是在火狐浏览器却没有这个事件名称，jQuery统 一了所有事件的名称。jQuery 中的事件如表 5-1 所示。
$(document).ready()方法是事件模块中最重要的 一个函数，它极大地提高了 Web 响应速度。$(document) 是获取整个文档对象，从这个方法名称来理解，就是获取 就绪的文档。
方法的书写格式为：
$(document).ready(function() { //在这里写代码
jQuery网页特效任务驱动式教程-漂浮广告相关知识
jQuery中的做法 $(window).width()和$(window).height()
获取页面卷入部分的宽度和高度
JavaScript中的做法 使用document.documentElement.scrollLeft获取横向滚动条左侧卷入的 宽度 使用document.documentElement.scrollTop获取纵向滚动条顶部卷入的 高度
元素在页面中占据的宽度总和，包括 width、padding、border 以及滚动条 的宽度 元素在页面中占据的高度总和，包括 height、padding、border 以及滚动条 的高度 无论元素设置了overflow:visible或者overflow:hidden 或者overflow:auto样式 属性，获取的宽度都是包括从元素左填充开始到子元素右边框结束之间的 像素数 当元素设置了overflow:hidden 或者overflow:auto样式属性时，获取的高度包 括从元素上填充开始到下填充结束之间的像素数； 当元素设置了overflow:visible时，获取的高度包括从元素的上填充开始到 子元素的下边距结束之间的像素数
jQuery中获取和设置元素的位置
使用offset()方法返回元素的位置 此时offset()方法不带有参数，返回的结果对象中包含两个整型属性 left和top，分别表示指定的jQuery对象到网页左上角的横坐标和纵坐标， 坐标值不带有取值单位px。 无论元素本身是否定位，也无论该元素是否是某个定位的祖先元素的后 代元素，使用offset()返回的都是元素自身相对于网页的偏移量。
应用offsetLeft和offsetTop
具体要求如下： 页面中共有5个div，最外层div类名是div，宽660像素，高400像素，填充50 像素，背景色#eef；里面有向左浮动的两个div，类名分别是divL和divR，宽 度都是300像素，高度200像素，右边距20像素，边框1像素实线蓝色；divR内 部有相对定位的div，类名是divM，宽度200像素，高度150像素，背景色为绿 色，定位横坐标left取值80像素，纵坐标top取值40像素；divM内部有绝对定 位的div，类名是divS，宽度100像素，高度100像素，边框1像素实线红色， 定位横坐标left取值50像素，纵坐标top取值30像素。 使用脚本代码分别获取divR、divM、divS三个div的位置并输出。 获取divS左上角到窗口左上角的距离（页面有无滚动条两种情况）
获取页面卷入部分的宽度和高度
JavaScript中的做法 使用document.documentElement.scrollLeft获取横向滚动条左侧卷入的 宽度 使用document.documentElement.scrollTop获取纵向滚动条顶部卷入的 高度
元素在页面中占据的宽度总和，包括 width、padding、border 以及滚动条 的宽度 元素在页面中占据的高度总和，包括 height、padding、border 以及滚动条 的高度 无论元素设置了overflow:visible或者overflow:hidden 或者overflow:auto样式 属性，获取的宽度都是包括从元素左填充开始到子元素右边框结束之间的 像素数 当元素设置了overflow:hidden 或者overflow:auto样式属性时，获取的高度包 括从元素上填充开始到下填充结束之间的像素数； 当元素设置了overflow:visible时，获取的高度包括从元素的上填充开始到 子元素的下边距结束之间的像素数
jQuery中获取和设置元素的位置
使用offset()方法返回元素的位置 此时offset()方法不带有参数，返回的结果对象中包含两个整型属性 left和top，分别表示指定的jQuery对象到网页左上角的横坐标和纵坐标， 坐标值不带有取值单位px。 无论元素本身是否定位，也无论该元素是否是某个定位的祖先元素的后 代元素，使用offset()返回的都是元素自身相对于网页的偏移量。
应用offsetLeft和offsetTop
具体要求如下： 页面中共有5个div，最外层div类名是div，宽660像素，高400像素，填充50 像素，背景色#eef；里面有向左浮动的两个div，类名分别是divL和divR，宽 度都是300像素，高度200像素，右边距20像素，边框1像素实线蓝色；divR内 部有相对定位的div，类名是divM，宽度200像素，高度150像素，背景色为绿 色，定位横坐标left取值80像素，纵坐标top取值40像素；divM内部有绝对定 位的div，类名是divS，宽度100像素，高度100像素，边框1像素实线红色， 定位横坐标left取值50像素，纵坐标top取值30像素。 使用脚本代码分别获取divR、divM、divS三个div的位置并输出。 获取divS左上角到窗口左上角的距离（页面有无滚动条两种情况）
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
fillStyle:"lightblue",
x:150,y:80,
width:100,
height:100
})
})
课堂
实训
综合实例：旅游信息网前台页面设计
旅游信息网是介绍关于长春旅游信息的网站，该网站主要包括主页、自然风光页、人文气息页、美食页、旅游景点页、名校简介页及留下足迹页等页面。
总结
评价
通过学习，学生能够掌握HTML5基础、jQuery与HTML5编程API接口等功能。
知识目标：
1.了解HTML5的基础、新特性以及浏览器对其的支持
2.掌握使用HTML5+jQuery编程
3.掌握使用Web Storage编程
素质目标：
1.培养学生信息搜集能力
2.培养学生团结合作、互帮互助的能力
教学内容
1.任务描述
2.任务展示与实现
（1）使用HTML5+jQuery实现文件上传进度条的显示
本节课主要运用案例教学法，通过对jQuery与HTML5编程的深入理解，掌握jQuery与HTML5编程的特点及优势，深入探讨jQuery与HTML5的编程方法，通过实例的方法加强对jQuery与HTML5编程的掌握，达到能够独立熟练运用jQuery与HTML5编程来解决实际问题的能力。教学评价方式以小组为单位，以完成案例的质量为评价标准，形成任务驱动，小组协作，质量与速度并存的课堂评价方式，促进学生的自主、创新学习的方式。
课程
说明
【课前说明】
本章主要介绍了HTML5的基础、HTML5的新特性、浏览器对HTML5的支持、在网站开发中综合使用jQuery +HTML5等知识点。其中重点介绍了在网站开发中综合使用jQuery +HTML5，包括文件上传、Canvas绘图、图片选择等。
【目的】
使学生从了解本单元的学习目标、学习重点、考评方式等方面明确学习本单元知识的要求和目标。
第11章jQuery在HTML5中的应用
课程名称
jQuery网页特效设计基础教程
项目名称
jQuery在HTML5中的应用
任务名称
jQuery在HTML5中的应用
课时
5
项目性质
□演示性□验证性□设计性√综合性
授课班级
授课日期
授课地点
教学目标
能力目标：
1.具备使用HTML5+jQuery编程的能力
2.具备使用Web Storage编程的能力
（2）在页面中添加<canvas>元素，具体代码如下：
<canvas width="300" height="200"></canvas>
（3）编写jQuery代码，使用jCanvas插件的drawRect()方法实现绘制一个浅蓝色的正方形。具体代码如下：
$(function(){
$("canvas").drawRect({
课程
内容
描述
一、HTML5基础
HTML5是基于各种各样的理念进行设计的，这些设计理念体现了对可能性和可行性的新认识。
1．兼容性
2．实用性和用户优先
3．化繁为简
二、jQuery与HTML5编程
通过多个案例绍在jQuery程序中调用HTML5的API来完成一些常见功能。
案例：
1.使用jCanvas插件绘制一个浅蓝色的正方形（实例位置：源码\第11章\11-2）。
（1）创建index.html，引入jquery文件和jCanvas插件文件。代码如下：
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="../js/jcanvas.min.js"></script>
（2）使用HTML5+jQuery实现图片旋转效果
（3）使用jQuery插件在HTML5中实现声音播放
（4）学生动手操作
3.教师讲解本任务涉及的知识点源自4.任务小结教学重点
1.HTML5的基础知识
2.如何在网站开发中综合使用jQuery +HTML5
3.编写jQuery代码
教学难点
1.如何在网站开发中综合使用jQuery +HTML5
教学准备
1.装有jQuery的电脑
2.教学课件PPT
3.教材：《jQuery网页特效设计基础教程（慕课版）》刘刚人民邮电出版社
作业设计
1．综合实例：旅游信息网前台页面设计
教学过程
教学
环节
教学内容与过程
（教学内容、教学方法、组织形式、教学手段）
课前组织
做好课前“5分钟”教学管理（多媒体、实训室），做好上课前的各项准备工作（打开电脑、打开课件、打开软件、打开U盘中的素材位置、打开授课计划、教案等），吸引学生注意力。
x:150,y:80,
width:100,
height:100
})
})
课堂
实训
综合实例：旅游信息网前台页面设计
旅游信息网是介绍关于长春旅游信息的网站，该网站主要包括主页、自然风光页、人文气息页、美食页、旅游景点页、名校简介页及留下足迹页等页面。
总结
评价
通过学习，学生能够掌握HTML5基础、jQuery与HTML5编程API接口等功能。
知识目标：
1.了解HTML5的基础、新特性以及浏览器对其的支持
2.掌握使用HTML5+jQuery编程
3.掌握使用Web Storage编程
素质目标：
1.培养学生信息搜集能力
2.培养学生团结合作、互帮互助的能力
教学内容
1.任务描述
2.任务展示与实现
（1）使用HTML5+jQuery实现文件上传进度条的显示
本节课主要运用案例教学法，通过对jQuery与HTML5编程的深入理解，掌握jQuery与HTML5编程的特点及优势，深入探讨jQuery与HTML5的编程方法，通过实例的方法加强对jQuery与HTML5编程的掌握，达到能够独立熟练运用jQuery与HTML5编程来解决实际问题的能力。教学评价方式以小组为单位，以完成案例的质量为评价标准，形成任务驱动，小组协作，质量与速度并存的课堂评价方式，促进学生的自主、创新学习的方式。
课程
说明
【课前说明】
本章主要介绍了HTML5的基础、HTML5的新特性、浏览器对HTML5的支持、在网站开发中综合使用jQuery +HTML5等知识点。其中重点介绍了在网站开发中综合使用jQuery +HTML5，包括文件上传、Canvas绘图、图片选择等。
【目的】
使学生从了解本单元的学习目标、学习重点、考评方式等方面明确学习本单元知识的要求和目标。
第11章jQuery在HTML5中的应用
课程名称
jQuery网页特效设计基础教程
项目名称
jQuery在HTML5中的应用
任务名称
jQuery在HTML5中的应用
课时
5
项目性质
□演示性□验证性□设计性√综合性
授课班级
授课日期
授课地点
教学目标
能力目标：
1.具备使用HTML5+jQuery编程的能力
2.具备使用Web Storage编程的能力
（2）在页面中添加<canvas>元素，具体代码如下：
<canvas width="300" height="200"></canvas>
（3）编写jQuery代码，使用jCanvas插件的drawRect()方法实现绘制一个浅蓝色的正方形。具体代码如下：
$(function(){
$("canvas").drawRect({
课程
内容
描述
一、HTML5基础
HTML5是基于各种各样的理念进行设计的，这些设计理念体现了对可能性和可行性的新认识。
1．兼容性
2．实用性和用户优先
3．化繁为简
二、jQuery与HTML5编程
通过多个案例绍在jQuery程序中调用HTML5的API来完成一些常见功能。
案例：
1.使用jCanvas插件绘制一个浅蓝色的正方形（实例位置：源码\第11章\11-2）。
（1）创建index.html，引入jquery文件和jCanvas插件文件。代码如下：
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="../js/jcanvas.min.js"></script>
（2）使用HTML5+jQuery实现图片旋转效果
（3）使用jQuery插件在HTML5中实现声音播放
（4）学生动手操作
3.教师讲解本任务涉及的知识点源自4.任务小结教学重点
1.HTML5的基础知识
2.如何在网站开发中综合使用jQuery +HTML5
3.编写jQuery代码
教学难点
1.如何在网站开发中综合使用jQuery +HTML5
教学准备
1.装有jQuery的电脑
2.教学课件PPT
3.教材：《jQuery网页特效设计基础教程（慕课版）》刘刚人民邮电出版社
作业设计
1．综合实例：旅游信息网前台页面设计
教学过程
教学
环节
教学内容与过程
（教学内容、教学方法、组织形式、教学手段）
课前组织
做好课前“5分钟”教学管理（多媒体、实训室），做好上课前的各项准备工作（打开电脑、打开课件、打开软件、打开U盘中的素材位置、打开授课计划、教案等），吸引学生注意力。