2024版2024年《jq》教学设计教学教案.docVIP

2024年《jq》教学设计教学教案

一、教学内容

本节课选自2024年《jq》教材第五章“事件处理”部分，具体内容包括：jQuery的选择器、事件绑定与解绑、事件对象、常用事件方法以及事件冒泡与捕获等。

二、教学目标

1.理解并掌握jQuery的选择器，能够灵活运用各种选择器进行元素的选择。

2.学会使用jQuery进行事件绑定与解绑，了解事件冒泡与捕获的原理，并能灵活运用。

3.掌握事件对象的使用，了解常用事件方法，能够编写具有交互性的网页效果。

三、教学难点与重点

1.教学难点：事件冒泡与捕获、事件对象的使用。

2.教学重点：jQuery的选择器、事件绑定与解绑、常用事件方法。

四、教具与学具准备

1.教具：计算机、投影仪、黑板。

2.学具：学生自备计算机，安装好相关开发环境。

五、教学过程

1.实践情景引入（5分钟）

通过展示一个具有交互效果的网页，引导学生思考如何实现这些效果，进而引出本节课的内容。

2.知识讲解（10分钟）

（1）jQuery的选择器：介绍各类选择器，如ID选择器、类选择器、标签选择器等。

（2）事件绑定与解绑：讲解bind、unbind、delegate、undelegate等方法的使用。

（3）事件冒泡与捕获：阐述事件冒泡与捕获的原理，介绍如何使用.stopPropagation()和.preventDefault()方法。

（4）事件对象：介绍事件对象的概念，以及常用属性和方法。

3.例题讲解（15分钟）

结合实际案例，讲解如何使用jQuery进行事件处理，包括事件绑定、解绑、事件对象的使用等。

4.随堂练习（10分钟）

（1）按钮，弹出提示框。

（2）鼠标移入移出，改变元素背景色。

（3）键盘按键，显示按下的键值。

5.答疑解惑（5分钟）

针对学生练习过程中遇到的问题，进行解答和指导。

六、板书设计

1.jQuery的选择器

2.事件绑定与解绑

3.事件冒泡与捕获

4.事件对象

5.常用事件方法

七、作业设计

1.作业题目：

（1）按钮，切换图片。

（2）鼠标移入移出图片，显示/隐藏图片描述。

（3）键盘按下，切换图片。

2.答案：

（1）HTML代码：

imgid=myImagesrc=image1.jpgalt=图片1

pid=descriptionstyle=display:none;这是图片1的描述/p

buttonid=changeButton切换图片/button

（2）jQuery代码：

$(document).ready(function(){

$(changeButton).click(function(){

varsrc=$(myImage).attr(src);

if(src===image1.jpg){

$(myImage).attr(src,image2.jpg);

$(description).text(这是图片2的描述).show();

}else{

$(myImage).attr(src,image1.jpg);

$(description).text(这是图片1的描述).show();

}

});

$(myImage).hover(

function(){

$(description).show();

},

function(){

$(description).hide();

}

);

$(document).keydown(function(event){

if(event.keyCode===37){

$(myImage).attr(src,image1.jpg);

$(description).text(这是图片1的描述).show();

}elseif(event.keyCode===39){

$(myImage).attr(src,image2.jpg);