jQuery网页特效设计基础教程教学教案.docx

资源描述

jQuery网页特效设计基础教程教学教案.docx

《jQuery网页特效设计基础教程教学教案.docx》由会员分享，可在线阅读，更多相关《jQuery网页特效设计基础教程教学教案.docx（49页珍藏版）》请在冰点文库上搜索。

jQuery网页特效设计基础教程教学教案.docx

jQuery网页特效设计基础教程教学教案

第1章JavaScript基础

课程名称

jQuery网页特效设计基础教程

项目名称

JavaScript基础

任务名称

JavaScript基础

课时

项目性质

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

授课班级

授课日期

授课地点

教学目标

能力目标：

1.具备使用编辑工具编写JavaScript程序的能力

2.具备在HTML文档中使用JavaScript的能力

知识目标：

1.了解什么是JavaScript

2.了解JavaScript的应用和特点

3.掌握编写JavaScript脚本的方法

素质目标：

1.培养学生信息搜集能力

2.培养学生团结合作、互帮互助的能力

教学内容

1.任务描述

2.任务展示与实现

（1）利用记事本编写JavaScript代码并验证其效果

（2）应用Dreamweaver编程JavaScript脚本

（2）学生动手操作

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

4.任务小结

教学重点

1.JavaScript的应用领域

2.JavaScript的特点

3.编写JavaScript脚本

教学难点

1.应用Dreamweaver编辑器编写JavaScript程序

教学准备

1.装有Dreamweaver的电脑

2.教学课件PPT

3.教材：

《jQuery网页特效设计基础教程（慕课版）》刘刚人民邮电出版社

作业设计

1．应用Dreamweaver编辑器编写第一个JavaScript程序

教学过程

教学

环节

教学内容与过程

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

课前组织

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

课程

说明

【课前说明】

分别从JavaScript概述，JavaScript的应用领域、JavaScript的特点、JavaScript的开发工具以及JavaScript的出错类型、JavaScript的调试方式、JavaScript库等JavaScript基础等知识点进行初步的了解。

【目的】

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

课程

内容

描述

一、什么是JavaScript？

从JavaScript的概念展开，介绍JavaScript的应用领域，了解JavaScript的特点。

掌握JavaScript是基于对象和事件驱动的解释型脚本语言这一核心概念。

二、JavaScript的库？

JavaScript库，是指可以方便地应用到现有Web开发体系中的、现成的JavaScript代码资源，包含工具、函数库、约定以及从常用任务中抽象出的可以复用的通用模块，能帮助使用者轻松地建立具有高难度交互特性的富客户端页面，并且兼容各大浏览器。

它们通常由开源社区开发和维护，并被各大公司支持和使用。

目前流行的JavaScript库有jQuery、Vue、AngularJS、ReactJS、Prototype、ExtJS、Dojo、YUI、MooTools等。

三、编写第一个JavaScript程序

在HTML中嵌入JavaScript脚本代码可以通过直接嵌入HTML文档、链接外部文件以及通过事件的方式来实现，可以通过案例来说明。

案例：

1.通过使用记事本工具来作为JavaScript的编辑器编写第一个JavaScript脚本

一段简单的JavaScript代码

window.alert（"欢迎光临本网站"）;

这是一段简单的JavaScript代码。

课堂

实训

1.应用Dreamweaver编程JavaScript脚本

2.应用Dreamweaver编辑器编写第一个JavaScript程序

总结

评价

通过学习，学生能够掌握JavaScript的基本特点和应用领域，JavaScript的编写方法。

本节课主要运用案例教学法，通过对JavaScript概念的深入理解，掌握JavaScript的特点及应用领域，深入探讨JavaScript脚本编程的方法，通过实例的方法加强对JavaScript编程方法的掌握，达到能够独立熟练运用JavaScript来解决实际问题的能力。

教学评价方式以小组为单位，以完成案例的质量为评价标准，形成任务驱动，小组协作，质量与速度并存的课堂评价方式，促进学生的自主、创新学习的方式。

第2章初识jQuery

课程名称

jQuery网页特效设计基础教程

项目名称

初识jQuery

任务名称

初识jQuery

课时

项目性质

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

授课班级

授课日期

授课地点

教学目标

能力目标：

1.具备使用安装jQuery并解决冲突的能力

2.具备使用jQuery编写脚本的能力

知识目标：

1.了解什么是jQuery

2.了解jQuery的应用和特点

3.掌握编写jQuery脚本的方法

素质目标：

1.培养学生信息搜集能力

2.培养学生团结合作、互帮互助的能力

教学内容

1.任务描述

2.任务展示与实现

（1）应用jQuery编写弹出一个提示对话框并验证其效果

（2）DOM对象与jQuery对象的项目转换

（2）学生动手操作

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

4.任务小结

教学重点

1.jQuery的特点

2.jQuery与DOM的区别

3.编写jQuery脚本

教学难点

1.应用jQuery编写脚本

教学准备

1.装有jQuery的电脑

2.教学课件PPT

3.教材：

《jQuery网页特效设计基础教程（慕课版）》刘刚人民邮电出版社

作业设计

1．应用jQuery弹出一个提示对话框

教学过程

教学

环节

教学内容与过程

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

课前组织

课程

说明

【课前说明】

分别从jQuery概述，jQuery的应用、jQuery的特点、jQuery的版本以及jQuery与DOM对象的区别、jQuery的插件等知识点进行初步的了解。

【目的】

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

课程

内容

描述

一、什么是jQuery？

从jQuery的概念展开，介绍jQuery的应用，了解jQuery的特点。

jQuery是一套简洁、快速、灵活的JavaScript脚本库。

二、jQuery对象和DOM对象的区别？

DOM是DocumentObjectModel，即文档对象模型的缩写。

DOM是以层次结构组织的节点或信息片段的集合，每一份DOM都可以表示成一棵树。

jQuery对象就是通过jQuery包装DOM对象后产生的对象。

jQuery对象是独有的，可以使用jQuery里的方法。

三、jQuery的插件？

分别介绍插件的使用方法及目前流行的插件。

案例：

1.DOM对象转换为jQuery对象

课堂

实训

1.应用jQuery弹出一个提示对话框

2.jQuery对象转换为DOM对象

总结

评价

通过学习，学生能够掌握jQuery的基本特点、应用、jQuery的编写方法。

本节课主要运用案例教学法，通过对jQuery概念的深入理解，掌握jQuery的特点及应用领域，深入探讨jQuery脚本编程的方法，通过实例的方法加强对jQuery编程方法的掌握，达到能够独立熟练运用jQuery来解决实际问题的能力。

第3章使用jQuery选择器

课程名称

jQuery网页特效设计基础教程

项目名称

使用jQuery选择器

任务名称

使用jQuery选择器

课时

项目性质

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

授课班级

授课日期

授课地点

教学目标

能力目标：

1.具备通过选择器快速定位元素的能力

2.具备使用选择器编写程序的能力

知识目标：

1.了解什么是jQuery选择器

2.了解jQuery选择器的优势

3.掌握基本选择器的用法

素质目标：

1.培养学生信息搜集能力

2.培养学生团结合作、互帮互助的能力

教学内容

1.任务描述

2.任务展示与实现

（1）在页面中通过选择器添加按钮、表单等

（2）编程jQuery实现综合实例

（2）学生动手操作

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

4.任务小结

教学重点

1.jQuery的基本选择器

2.jQuery选择器的基本语法

3.编写jQuery脚本

教学难点

1.在jQuery中通过选择器快速定位元素

教学准备

1.装有jQuery的电脑

2.教学课件PPT

3.教材：

《jQuery网页特效设计基础教程（慕课版）》刘刚人民邮电出版社

作业设计

1．应用jQuery实现表格隔行换色及鼠标指针指向行变色

教学过程

教学

环节

教学内容与过程

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

课前组织

课程

说明

【课前说明】

分别从jQuery概述，jQuery的应用领域、jQuery的特点、jQuery的开发工具以及jQuery的出错类型、jQuery的调试方式、jQuery库等jQuery基础等知识点进行初步的了解。

【目的】

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

课程

内容

描述

一、什么是jQuery选择器？

jQuery选择器是jQuery库中非常重要的部分之一。

它支持网页开发者所熟知的CSS语法，能够轻松快速地对页面进行设置。

jQuery选择器是打开高效开发jQuery之门的钥匙。

一个典型的jQuery选择器的语法格式为：

$（selector）.methodName（）;

二、jQuery选择器的优势

与传统的JavaScript获取页面元素和编写事务相比，jQuery选择器具有明显的优势，具体表现在以下3个方面。

代码更简单。

支持CSS1到CSS3选择器。

完善的处理机制。

三、jQuery基本选择器

jQuery基本选择器包括ID选择器、元素选择器、类名选择器、多种匹配条件选择器和通配符选择器。

案例：

1.应用jQuery实现获取超级链接地址

（1）创建一个名称为index.html的文件，在该文件中应用DIV+CSS样式进行页面布局，并添加4个超级链接，关键代码如下：

right;text-align:

right;">

首页

| 登录

| 注册

| 找回密码

（2）在index.html文件的标记中应用下面的语句引入jQuery库。

（3）在引入jQuery库的代码下方编写jQuery代码，实现绑定鼠标指针移到超级链接事件，通过元素选择器和类名选择器获取超链接地址。

具体代码如下：

$（document）.ready（function（）{

$（"a.main"）.mouseover（function（）{//绑定鼠标指针移到超级链接事件

varurl=$（this）.attr（"href"）;//超链接地址

alert（"超链接地址是：

"+url）;

}）;

课堂

实训

综合实例：

表格隔行换色及鼠标指针指向行变色

对于一些清单型数据，通常是利用表格展示到页面中。

如果数据比较多，很容易看串行。

这时，可以为表格添加隔行换色及鼠标指针指向行变色功能。

本实例的需求主要有以下两点。

（1）在页面中创建一个表格，令表格奇数行显示黄色，偶数行显示浅蓝色；

（2）当鼠标指针指向某一行时，该行颜色随之改变。

总结

评价

通过学习，学生能够掌握jQuery选择器的基本特点、优势以及jQuery基本选择器的编写方法。

本节课主要运用案例教学法，通过对jQuery选择器概念的深入理解，掌握jQuery选择器的特点及优势，深入探讨jQuery选择器编程的方法，通过实例的方法加强对jQuery选择器编程方法的掌握，达到能够独立熟练运用jQuery选择器来解决实际问题的能力。

第3章使用jQuery操作DOM

课程名称

jQuery网页特效设计基础教程

项目名称

使用jQuery操作DOM

任务名称

使用jQuery操作DOM

课时

项目性质

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

授课班级

授课日期

授课地点

教学目标

能力目标：

1.具备使用jQuery操作DOM中的元素的能力

2.具备使用jQuery操作DOM中的对象的能力

知识目标：

1.了解DOM操作的分类

2.掌握对元素内容、值、属性、CSS样式操作的方法

3.掌握对DOM文档节点操作的用法

素质目标：

1.培养学生信息搜集能力

2.培养学生团结合作、互帮互助的能力

教学内容

1.任务描述

2.任务展示与实现

（1）对元素内容和元素值进行操作

（2）在页面中对DOM文档节点进行操作

（2）学生动手操作

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

4.任务小结

教学重点

1.元素内容的操作方法

2.DOM文档节点的操作方法

3.编写jQuery代码

教学难点

1.使用jQuery操作DOM中的元素及对象

教学准备

1.装有jQuery的电脑

2.教学课件PPT

3.教材：

《jQuery网页特效设计基础教程（慕课版）》刘刚人民邮电出版社

作业设计

1．应用jQuery实现开心小农场游戏

教学过程

教学

环节

教学内容与过程

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

课前组织

课程

说明

【课前说明】

本章主要介绍了DOM操作的分类、jQuery对元素的内容和值的操作方法、jQuery对DOM文档节点的操作方法、jQuery对元素属性的操作方法、jQuery对元素的CSS样式的操作方法等知识点。

其中重点介绍了对DOM文档节点的创建、查找、插入、删除、复制、替换、包裹、遍历等。

【目的】

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

课程

内容

描述

一、DOM操作的分类

通常来说，DOM操作分为3方面：

DOMCore、HTML-DOM和CSS-DOM。

二、使用jQuery操作DOM中的元素及对象

通过多个案例讲解jQuery的操作方法，包括jQuery对元素的内容和值的操作方法、jQuery对DOM文档节点的操作方法、jQuery对元素属性的操作方法、jQuery对元素的CSS样式的操作方法等。

案例：

1.设置div元素的文本内容

（1）创建一个名称为index.html的文件，在该文件的标记中应用下面的语句引入jQuery库。

（2）在页面的标记中添加一个

元素，令它的文本内容为空。

代码如下：

（3）在引入jQuery库的代码下方编写jQuery代码，实现为

标记设置文本内容。

具体代码如下：

$（document）.ready（function（）{

$（"div"）.text（"我是通过text（）方法设置的文本内容"）;

}）;

2.使用each（）方法img遍历元素

（1）创建一个名称为index.html的文件，在该文件的标记中应用下面的语句引入jQuery库。

（2）在页面的标记中，使用标签添加5张图片，代码如下：

（3）在引入jQuery库的代码下方编写jQuery代码，使用each（）方法遍历img全部图片，给每一张图片添加一个title属性，即鼠标指针移动到图片上面时的提示信息。

具体代码如下：

$（"img"）.each（function（index）{

$（this）.attr（"title","第"+（index+1）+"张图片"）;

}）

课堂

实训

综合实例：

实现我的开心小农场

通过jQuery可以很方便地对DOM节点进行操作，通过“我的开心小农场”实例来说明通过jQuery操作DOM节点的具体应用。

本实例的需求主要有以下两点。

（1）在页面中引入农场图片，单击“播种”“生长”“开花”“结果”按钮时，在农场中显示相应效果。

（2）在IE6之前版本的浏览器下，png格式图片有背景，将其处理为透明效果。

总结

评价

通过学习，学生能够掌握DOM操作的分类、使用jQuery操作DOM中的元素及对象的方法。

本节课主要运用案例教学法，通过对jQuery操作DOM中元素及对象方法的深入理解，掌握jQuery操作DOM中元素及对象方法的特点及优势，深入探讨jQuery操作DOM中元素及对象的编程方法，通过实例的方法加强对jQuery操作DOM中元素及对象方法的掌握，达到能够独立熟练运用jQuery操作DOM来解决实际问题的能力。

第5章jQuery中的事件处理和动画效果

课程名称

jQuery网页特效设计基础教程

项目名称

jQuery中的事件处理

和动画效果

任务名称

jQuery中的事件处理和动画效果

课时

项目性质

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

授课班级

授课日期

授课地点

教学目标

能力目标：

1.具备使用jQuery处理事件的能力

2.具备使用jQuery实现动画效果的能力

知识目标：

1.掌握基本事件的处理方法

2.掌握基本动画效果的实现方法

素质目标：

1.培养学生信息搜集能力

2.培养学生团结合作、互帮互助的能力

教学内容

1.任务描述

2.任务展示与实现

（1）在页面中通过绑定、捕获、模拟用户事件

（2）在页面中实现淡入淡出、滑动、伸缩式导航等动画效果

（2）学生动手操作

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

4.任务小结

教学重点

1.jQuery的事件处理

2.jQuery的动画效果

3.编写jQuery脚本

教学难点

1.掌握自定义动画效果的实现

教学准备

1.装有jQuery的电脑

2.教学课件PPT

3.教材：

《jQuery网页特效设计基础教程（慕课版）》刘刚人民邮电出版社

作业设计

1．应用jQuery实现图片传送带

教学过程

教学

环节

教学内容与过程

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

课前组织

课程

说明

【课前说明】

本章主要介绍了事件与动画效果的处理。

“事件是脚本语言的灵魂”，事件使页面具有了动态性和响应性。

在传统的JavaScript中内置了一些事件响应的方式，jQuery增强、优化并扩展了基本的事件处理机制。

基本的动画效果指的是元素的隐藏和显示。

在jQuery中提供了两种控制元素隐藏和显示的方法。

【目的】

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

课程

内容

描述

一、重点知识点

（1）$（document）.read

展开阅读全文