jQuery网页特效设计基础教程教学教案Word文件下载.docx
《jQuery网页特效设计基础教程教学教案Word文件下载.docx》由会员分享，可在线阅读，更多相关《jQuery网页特效设计基础教程教学教案Word文件下载.docx（49页珍藏版）》请在冰豆网上搜索。
（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脚本
<
html>
head>
title>
一段简单的JavaScript代码<
/title>
scriptlanguage="
javascript"
>
window.alert（"
欢迎光临本网站"
）;
/script>
/head>
body>
h3>
这是一段简单的JavaScript代码。
/h3>
/body>
/html>
课堂
实训
1.应用Dreamweaver编程JavaScript脚本
2.应用Dreamweaver编辑器编写第一个JavaScript程序
总结
评价
通过学习，学生能够掌握JavaScript的基本特点和应用领域，JavaScript的编写方法。
本节课主要运用案例教学法，通过对JavaScript概念的深入理解，掌握JavaScript的特点及应用领域，深入探讨JavaScript脚本编程的方法，通过实例的方法加强对JavaScript编程方法的掌握，达到能够独立熟练运用JavaScript来解决实际问题的能力。
教学评价方式以小组为单位，以完成案例的质量为评价标准，形成任务驱动，小组协作，质量与速度并存的课堂评价方式，促进学生的自主、创新学习的方式。
第2章初识jQuery
初识jQuery
1.具备使用安装jQuery并解决冲突的能力
2.具备使用jQuery编写脚本的能力
1.了解什么是jQuery
2.了解jQuery的应用和特点
3.掌握编写jQuery脚本的方法
（1）应用jQuery编写弹出一个提示对话框并验证其效果
（2）DOM对象与jQuery对象的项目转换
1.jQuery的特点
2.jQuery与DOM的区别
3.编写jQuery脚本
1.应用jQuery编写脚本
1.装有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对象
script>
$（document）.ready（function（）{
vardomObj=document.getElementById（"
testp"
alert（"
使用DOM方法获取p节点的内容：
"
+domObj.innerHTML）;
var$jqueryObj=$（domObj）;
使用jQuery方法获取p节点的内容：
+$jqueryObj.html（））;
}）
1.应用jQuery弹出一个提示对话框
2.jQuery对象转换为DOM对象
通过学习，学生能够掌握jQuery的基本特点、应用、jQuery的编写方法。
本节课主要运用案例教学法，通过对jQuery概念的深入理解，掌握jQuery的特点及应用领域，深入探讨jQuery脚本编程的方法，通过实例的方法加强对jQuery编程方法的掌握，达到能够独立熟练运用jQuery来解决实际问题的能力。
第3章使用jQuery选择器
使用jQuery选择器
5
1.具备通过选择器快速定位元素的能力
2.具备使用选择器编写程序的能力
1.了解什么是jQuery选择器
2.了解jQuery选择器的优势
3.掌握基本选择器的用法
（1）在页面中通过选择器添加按钮、表单等
（2）编程jQuery实现综合实例
1.jQuery的基本选择器
2.jQuery选择器的基本语法
1.在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个超级链接，关键代码如下：
divstyle="
float:
right;
text-align:
right;
<
ahref="
index.html"
首页<
/a>
&
nbsp;
|&
index1.html"
class="
main"
登录<
index2.html"
注册<
index3.html"
找回密码<
/div>
（2）在index.html文件的<
标记中应用下面的语句引入jQuery库。
scripttype="
text/javascript"
src="
../js/jquery-3.3.1.min.js"
（3）在引入jQuery库的代码下方编写jQuery代码，实现绑定鼠标指针移到超级链接事件，通过元素选择器和类名选择器获取超链接地址。
具体代码如下：
$（"
a.main"
）.mouseover（function（）{//绑定鼠标指针移到超级链接事件
varurl=$（this）.attr（"
href"
//超链接地址
超链接地址是：
+url）;
}）;
}）;
综合实例：
表格隔行换色及鼠标指针指向行变色
对于一些清单型数据，通常是利用表格展示到页面中。
如果数据比较多，很容易看串行。
这时，可以为表格添加隔行换色及鼠标指针指向行变色功能。
本实例的需求主要有以下两点。
（1）在页面中创建一个表格，令表格奇数行显示黄色，偶数行显示浅蓝色；
（2）当鼠标指针指向某一行时，该行颜色随之改变。
通过学习，学生能够掌握jQuery选择器的基本特点、优势以及jQuery基本选择器的编写方法。
本节课主要运用案例教学法，通过对jQuery选择器概念的深入理解，掌握jQuery选择器的特点及优势，深入探讨jQuery选择器编程的方法，通过实例的方法加强对jQuery选择器编程方法的掌握，达到能够独立熟练运用jQuery选择器来解决实际问题的能力。
第3章使用jQuery操作DOM
使用jQuery操作DOM
1.具备使用jQuery操作DOM中的元素的能力
2.具备使用jQuery操作DOM中的对象的能力
1.了解DOM操作的分类
2.掌握对元素内容、值、属性、CSS样式操作的方法
3.掌握对DOM文档节点操作的用法
（1）对元素内容和元素值进行操作
（2）在页面中对DOM文档节点进行操作
1.元素内容的操作方法
2.DOM文档节点的操作方法
3.编写jQuery代码
1.使用jQuery操作DOM中的元素及对象
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的文件，在该文件的<
（2）在页面的<
标记中添加一个<
div>
元素，令它的文本内容为空。
代码如下：
（3）在引入jQuery库的代码下方编写jQuery代码，实现为<
标记设置文本内容。
$（document）.ready（function（）{
div"
）.text（"
我是通过text（）方法设置的文本内容"
2.使用each（）方法img遍历元素
标记中，使用<
img>
标签添加5张图片，代码如下：
imgheight=60src="
images/01.jpg"
width=80/>
images/02.jpg"
images/03.jpg"
images/04.jpg"
images/05.jpg"
（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中的事件处理和动画效果
4
1.具备使用jQuery处理事件的能力
2.具备使用jQuery实现动画效果的能力
1.掌握基本事件的处理方法
2.掌握基本动画效果的实现方法
（1）在页面中通过绑定、捕获、模拟用户事件
（2）在页面中实现淡入淡出、滑动、伸缩式导航等动画效果
1.jQuery的事件处理
2.jQuery的动画效果
1.掌握自定义动画效果的实现
1．应用jQuery实现图片传送带
本章主要介绍了事件与动画效果的处理。
“事件是脚本语言的灵魂”，事件使页面具有了动态性和响应性。
在传统的JavaScript中内置了一些事件响应的方式，jQuery增强、优化并扩展了基本的事件处理机制。
基本的动画效果指的是元素的隐藏和显示。
在jQuery中提供了两种控制元素隐藏和显示的方法。
一、重点知识点
（1）$（document）.read
升级会员 