jQuery网页特效设计基础教程-第9章-常用的第三方jQuery插件-教案

1、第9章常用的第三方jQuery插件课程名称jQuery网页特效设计基础教程项目名称常用的第三方jQuery插件任务名称常用的第三方jQuery插件课时3项目性质演示性 验证性 设计性 4综合性授课班级授课日期授课地点教学目标能力目标：.具备使用常用三方jQuery插件的能力.具备在网页中使用第三方jQuery插件的能力知识目标：. 了解jQuery插件的概念，常用第三方jQuery插件.掌握在网页中使用第三方jQuery插件的方法素质目标：.培养学生信息搜集能力.培养学生团结合作、互帮互助的能力教学内容.任务描述.任务展示与实现(1)使用uploadify、zTree插件进行操作(2)使用 N

2、ivo Slider、Pagination、jQZoom 插件进行操作(2)学生动手操作.教师讲解本任务涉及的知识点.任务小结教学重点.在网页中使用第三方jQuery插件的操作方法.编写jQuery代码教学难点1.在网页中使用第三方jQuery插件教学准备.装有jQuery的电脑.教学课件PPT.教材：jQuery网页特效设计基础教程(慕课版)刘刚 人民邮电出版社作业设计1 .使用ColorPicker插件制作颜色选择器教学过程孵教学内容与过程（教学内容、教学方法、组织形式、教学手段）课前组织做好课前“5分钟”教学管理（多媒体、实训室），做好上课前的各项准备工作（打开电脑、打开 课件、打开软件

3、、打开U盘中的素材位置、打开授课计划、教案等），吸引学生注意力。濡呈蹒【课前说明】本章主要介绍了 jQuery插件的概念、调用第三方插件的方法、常用的第三方插件等知识点。其 中重点介绍了常用的第一方插件,包括uploadify、zTree Nivo Slider Pagination jQZoom插件等。 【目的】使学生从了解本单元的学习目标、学习重点、考评方式等方面明确学习本单元知识的要求和目 标。潮呈内容一、jQuery插件概述jQuery插件是一种用来提高网站开发效率的、已经封装好的JavaScript脚本库，由于jQuery的 开源特性，现在有很多第三方的jQuery插件可供开发人员直

4、接使用。jQuery插件的主要特点如下。提高Web网站的开发效率。高度集成，使用方便。根据自身需求进行修改，增强扩展性。界面美观。二、常用的jQuery第三方插件通过多个案例讲解jQuery第三方插件的操作方法。案例：1.本实例使用jQZoom插件制作一个图片放大镜，运行程序，当鼠标指针在图片上移动时，图 片的局部会以放大形式显示在网页的右侧空白区域。程序开发步骤如下。（1）新建一个index.html文件,将其放到9-5文件夹中。（2）将jQZoom插件的css文件夹、js文件夹复制到9-5文件夹中。(3)使用Dreamweaver打开index.html文件，该文件中首先引入jQuery文

5、件、jQZoom插件及 其CSS样式文件;然后，定义一个JavaScript函数，使用jQZoom显示放大效果;最后，在vbody 区域中加入一个DIV,在该DIV中，分别使用标记和标记设置要显示的原图和局部放大效 果图。代码如下：jQZoom 插件的使用。title$(function() $(n.jqzoomn).jqzoom(zoomWidth:200,zoomHeight:200)；)；a href=test.JPG” class=njqzoomn title=放大效果”愉综合实例：使用ColorPicker插件制作颜色选择器实VII在使用QQ聊天时，如果想设置字体颜色，可以打开QQ聊天对话框中的设置字体颜色对话框， 在这个对话框中设置颜色的界面就是颜色拾取器。本实例使用第三方的ColorPicker插件制作了 一个简单的颜色拾取器。总结通过学习，学生能够掌握jQuery插件的基本概念、调用方式、jQuery的常用第三方插件的应用方法。本节课主要运用案例教学法，通过对jQuery插件的深入理解，掌握jQuery插件的特点及优势， 深入探讨jQuery插件的编程方法，通过实例的方法加强对jQuery插件的掌握，达到能够独立熟练运 用