jQuery网页特效设计基础教程电子教案 第12章 综合实战——使用jQuery实现携程网站特效.docxVIP

PAGE1

PAGE

第12章综合实战——使用jQuery实现携程网站特效

课程名称

jQuery网页特效设计基础教程

项目名称

综合实战——使用jQuery实现携程网站特效

任务名称

综合实战——使用jQuery实现携程网站特效

课时

4

项目性质

□演示性□验证性□设计性√综合性

授课班级

授课日期

授课地点

教学目标

知识目标

1.了解网站特效和需求。

2.了解网站制作的常用知识点。

3.掌握网站特效的实现方式。

能力目标

1.能够熟练使用jQuery制作网站特效。

2.能够熟练使用jQuery的API方法。

素质目标

1.培养学生综合应用的能力。

2.培养学生举一反三的能力。

教学内容

1.任务描述

2.任务展示与实现

（1）使用jQuery制作网站特效

（2）使用jQuery的API方法来进行操作

（2）学生动手操作

3.教师讲解本任务涉及的知识点

4.任务小结

教学重点

1.网站特效和需求

2.JQuery的API操作方法

3.编写jQuery代码

教学难点

1.使用jQuery制作网站特效

教学准备

1.装有jQuery的电脑

2.教学课件PPT

3.教材：《jQuery网页特效设计基础教程》

作业设计

1．使用jQuery实现携程网站特效

教学过程

教学

环节

教学内容与过程

（教学内容、教学方法、组织形式、教学手段）

课前组织

做好课前“5分钟”教学管理（多媒体、实训室），做好上课前的各项准备工作（打开电脑、打开课件、打开软件、打开U盘中的素材位置、打开授课计划、教案等），吸引学生注意力。

课程

说明

【课前说明】

本章主要介绍了网站特效和需求，网站制作的常用知识点，网站特效的实现方式等知识点。其中重点介绍了jQuery的API在实际项目中的使用。

【目的】

使学生从了解本单元的学习目标、学习重点、考评方式等方面明确学习本单元知识的要求和目标。

课程

内容

描述

一、网站特效

选取一些常用的、有代表性的特效，比如注册表单校验、60s倒计时、登录两种方式切换选择、导航菜单、海报轮播、菜单悬浮、图片放大等，介绍使用jQuery来实现这些通用功能的方法，以加深读者对使用jQuery的理解。

特效需求

网站注册表单布局设计、倒计时交互设计、网站登录布局与交互设计、导航菜单设计、海报轮播效果设计、页签切换效果设计、左右滑动效果设计、手风琴效果设计、图片放大缩小效果制作。

关键知识点

（1）控制页面元素显示与隐藏

$(#div1).show();

$(#div1).hide();

（2）页面元素添加样式

phone.css(borderColor,#67a1e2);

（3）页面显示文本内容

prompt1.text(手机号格式不正确);

（4）输入框光标聚焦事件

phone.focus(function(){})

（5）输入框光标离开事件

pwd.blur(function(){})

（6）设置定时任务

setTimeout(function(){settime(obj)},1000)

（7）元素查找eq相等事件

$(.tab-boxdiv).eq(_index).show().siblings().hide();

$(#login1-2label).eq(_index).addClass(ons).siblings().removeClass(ons);

（8）mouseover鼠标指针悬浮事件

$(.xc_d1_1_1li).mouseover(function(){

var_index=$(this).index();

$(.tab-boxdiv).eq(_index).show().siblings().hide();

});

（9）元素添加样式和移出样式

$(this).addClass(l_hover); //指向li添加样式

$(this).removeClass(l_hover); //指向li删除样式

（10）元素点击事件

$li.click(function(){});

课堂

实训

综合实例：使用jQuery实现携程网站特效

在实际应用中，我们经常会制作网站各种特效，来实现动态效果，提高用户体验，本实例实现携程网站特效功能，具体要求如下。

理解网站特效需求。

掌握网站特效实现的关键知识点。

实现网站特效。

总结

评价

通过学习，学生能够掌握Ajax技术的基本概念、安装方式、jQuery中的Ajax应用、Ajax的全集数据方法。

本节课主要运用案例教学法，通过对jQuery中的Ajax应用的深入理解，掌握jQuery中的Ajax应用的特点及优势，深入探讨jQue