jQuery网页特效设计基础教程（慕课版）（第2版）-教案 第9、10章 常用的第三方jQuery插件、 jQuery性能优化与技巧.docx
PAGE1
PAGE
第9章常用的第三方jQuery插件
课程名称
jQuery网页特效设计基础教程
项目名称
常用的第三方jQuery插件
任务名称
常用的第三方jQuery插件
课时
3
项目性质
□演示性□验证性□设计性√综合性
授课班级
授课日期
授课地点
教学目标
知识目标
1.了解什么是jQuery插件。
2.了解常用的jQuery插件。
3.了解如何调用第三方jQuery插件。
4.掌握常用jQuery插件的使用。
能力目标
1.能够应用第三方jQuery插件。
2.能够了解第三方jQuery插件如何被调用。
素质目标
1.培养学生自主学习、举一反三的能力。
2.培养学生快速应用第三方库的能力。
教学内容
1.任务描述
2.任务展示与实现
（1）使用uploadify、zTree插件进行操作
（2）使用NivoSlider、Pagination、jQZoom插件进行操作
（2）学生动手操作
3.教师讲解本任务涉及的知识点
4.任务小结
教学重点
1.在网页中使用第三方jQuery插件的操作方法
2.编写jQuery代码
教学难点
1.在网页中使用第三方jQuery插件
教学准备
1.装有jQuery的电脑
2.教学课件PPT
3.教材：《jQuery网页特效设计基础教程（慕课版）》刘刚人民邮电出版社
作业设计
1．使用ColorPicker插件制作颜色选择器
教学过程
教学
环节
教学内容与过程
（教学内容、教学方法、组织形式、教学手段）
课前组织
做好课前“5分钟”教学管理（多媒体、实训室），做好上课前的各项准备工作（打开电脑、打开课件、打开软件、打开U盘中的素材位置、打开授课计划、教案等），吸引学生注意力。
课程
说明
【课前说明】
本章主要介绍了jQuery插件的概念、调用第三方插件的方法、常用的第三方插件等知识点。其中重点介绍了常用的第三方插件，包括uploadify、zTree、NivoSlider、Pagination、jQZoom插件等。
【目的】
使学生从了解本单元的学习目标、学习重点、考评方式等方面明确学习本单元知识的要求和目标。
课程
内容
描述
一、jQuery插件概述
jQuery插件是一种用来提高网站开发效率的、已经封装好的JavaScript脚本库，由于jQuery的开源特性，现在有很多第三方的jQuery插件可供开发人员直接使用。jQuery插件的主要特点如下。
?提高Web网站的开发效率。
?高度集成，使用方便。
?根据自身需求进行修改，增强扩展性。
?界面美观。
二、常用的jQuery第三方插件
通过多个案例讲解jQuery第三方插件的操作方法。
案例：
1.本实例使用jQZoom插件制作一个图片放大镜，运行程序，当鼠标指针在图片上移动时，图片的局部会以放大形式显示在网页的右侧空白区域。程序开发步骤如下。
（1）新建一个index.html文件，将其放到9-5文件夹中。
（2）将jQZoom插件的css文件夹、js文件夹复制到9-5文件夹中。
（3）使用Dreamweaver打开index.html文件，该文件中首先引入jQuery文件、jQZoom插件及其CSS样式文件；然后，定义一个JavaScript函数，使用jQZoom显示放大效果；最后，在body/body区域中加入一个DIV，在该DIV中，分别使用img标记和a标记设置要显示的原图和局部放大效果图。代码如下：
!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN/TR/xhtml1/DTD/xhtml1-transitional.dtd
htmlxmlns=/1999/xhtml
head
metahttp-equiv=Content-Typecontent=text/html;charset=utf-8/
titlejQZoom插件的使用/title
scriptsrc=js/jquery-1.6.jstype=text/javascript/script
scriptsrc=js/jquery.jqzoom-core.jstype=text/javascript/script
linkrel=stylesheethref=css/jquery.jqzoom.csstype=text/css/
scripttype=text/javascript
$(function(){
$(.jqzoom).jqzoom(
{
zoomWidth:200,
zoomHeight:200
});
});