jQuery网页特效设计基础教程电子教案 第5单元 jQuery 中的事件处理和动画效果.docxVIP

PAGE1

PAGE

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

课程名称

jQuery网页特效设计基础教程

项目名称

jQuery中的事件处理

和动画效果

任务名称

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

课时

4

项目性质

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

授课班级

授课日期

授课地点

教学目标

知识目标

1.了解jQuery的事件处理操作。

2.掌握jQuery显示隐藏匹配元素动画效果的使用。

3.掌握切换元素的可见状态动画效果的使用。

4.掌握淡入淡出的动画效果的使用。

5.了解滑动效果和自定义动画效果的使用。

能力目标

1.能够熟练使用jQuery的事件处理操作。

2.能够熟练使用jQuery中的动画效果。

素质目标

1.培养学生实践中的应用能力。

2.培养学生各种事件的组织能力。

教学内容

1.任务描述

2.任务展示与实现

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

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

（2）学生动手操作

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

4.任务小结

教学重点

1.jQuery的事件处理

2.jQuery的动画效果

3.编写jQuery脚本

教学难点

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

教学准备

1.装有jQuery的电脑

2.教学课件PPT

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

作业设计

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

教学过程

教学

环节

教学内容与过程

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

课前组织

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

课程

说明

【课前说明】

本章主要介绍了事件与动画效果的处理。“事件是脚本语言的灵魂”，事件使页面具有了动态性和响应性。在传统的JavaScript中内置了一些事件响应的方式，jQuery增强、优化并扩展了基本的事件处理机制。基本的动画效果指的是元素的隐藏和显示。在jQuery中提供了两种控制元素隐藏和显示的方法。

【目的】

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

课程

内容

描述

一、重点知识点

（1）$(document).ready()方法是事件模块中最重要的一个函数，它极大地提高了Web响应速度。

（2）在jQuery中，事件绑定通常可以分为为元素绑定事件、移除绑定事件和绑定一次性事件处理3种情况。

（3）在jQuery中，为元素绑定事件可以使用bind()方法，为元素移除绑定事件可以使用unbind()方法，为元素绑定一次性事件处理可以使用one()方法。

（4）在jQuery中一般常用triggerHandler()方法和trigger()方法来模拟用户的操作触发事件。

（5）模仿悬停事件是指模仿鼠标指针移动到一个对象上面又从该对象上面移出的事件，可以通过jQuery提供的hover(over,out)方法实现。

（6）事件对象提供了一个stopPropagation()方法，使用该方法可以阻止事件冒泡。

（7）在jQuery中，应用preventDefault()方法可以阻止浏览器的默认行为。

（8）使用hide()方法可以隐藏匹配的元素。hide()方法相当于将元素CSS样式属性display的值设置为none。

（9）使用show()方法可以显示匹配的元素。show()方法相当于将元素CSS样式属性display的值设置为block或inline或除了none以外的值。

（10）使用toggle()方法可以切换元素的可见状态。

（11）在jQuery中，提供了slideDown()方法（用于滑动显示匹配的元素）、slideUp()方法（用于滑动隐藏匹配的元素）和slideToggle()方法（用于通过高度的变化动态切换元素的可见性）来实现滑动效果。

（12）在jQuery中，要实现自定义动画效果，主要应用animate()方法创建自定义动画，应用stop()方法停止动画。

案例：

1.在页面载入完成就执行按钮的click事件，但是并不需要用户自己操作

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

scripttype=text/javascriptsrc=../js/jquery-3.6.4.min.js/script

（2）在页面的body标记中添加一个button按钮，具体代码如下：

inputtype=buttonname=buttonid=buttonvalue=普通按钮/

（3）在引入j