第08章教案_jQuery事件.doc

《JavaScript与jQuery网页前端开发与设计-第2版》教案

第8章jQuery事件

一、教学目标：

了解jQuery事件的基础语法格式；

掌握常见jQuery文档/窗口事件的用法；

掌握常见jQuery键盘事件的用法；

掌握常见jQuery鼠标事件的用法；

掌握常见jQuery表单事件的用法；

掌握jQuery事件绑定与解除的用法；

掌握jQuery临时事件的用法。

二、教学重点和难点：

重点：jQuery的各类事件（文档/窗口、键盘、鼠标、表单）；

难点：jQuery事件绑定与解除。

三、教学方法与手段：

采取互动式教学方法，理论教学使用多媒体投影教室。

四、课程简介：

本章主要介绍jQuery事件的相关知识，包括jQuery事件的含义及语法格式、常用jQuery事件以及jQuery事件的绑定与解除。

五、教学基本内容：

8.1jQuery事件概述

8.1.1事件的含义

事件指的是HTML页面对不同用户操作动作的响应。当用户做某个特定操作时将触发页面对应的事件，例如点击按钮、移动鼠标、提交表单等。可以事先为指定的事件自定义需要运行的脚本程序，事件被触发时将自动执行这段代码。

8.1.2jQuery事件语法格式

在jQuery中，事件的语法格式如下：

$(selector).action(function(){

//事件触发后需要执行的自定义脚本代码

});

其中$(selector)可以是事件允许的jQuery选择器，action需要替换为被监听的事件名称。

例如，为段落元素p添加鼠标点击事件click，其jQuery代码如下:

$(p).click(function(){

alert(段落元素被鼠标点击了！);

});

上述代码中的关键词click表示鼠标左键单击事件，当用户使用鼠标点击了段落元素时将执行其中的alert()语句。

jQuery支持HTMLDOM中的绝大部分事件，下一节将介绍常用的四类jQuery事件。

8.2常用jQuery事件

常用jQuery事件根据其性质可以归纳为以下四类：

文档/窗口事件：页面文档或浏览器窗口发生变化时所触发的事件；

键盘事件：用户操作键盘所触发的事件；

鼠标事件：用户操作鼠标所触发的事件；

表单事件：用户操作表单所触发的事件。

8.2.1文档/窗口事件

jQuery常见文档/窗口事件如表8-1所示。

表8-1jQuery常见窗口事件

事件名称

解释

语法格式

ready()

当文档准备就绪时触发事件

$(document).ready(function)

load()

当指定元素加载时触发事件

$(selector).load(function)

unload()

当用户浏览器窗口从当前页面跳转其他页面时触发此事件

$(window).unload(function)

1. ready()事件

ready()事件又称为准备就绪事件，该事件只在文档准备就绪时触发，因此其选择器只能是$(document)。一般来说，为了避免文档在准备就绪前就执行了其他jQuery代码而导致错误，所有的jQuery函数都需要写在文档准备就绪（documentready）函数中。

其语法格式如下：

$(document).ready(function)

其中function为必填参数，表示文档加载完毕后需要运行的函数。

例如：

$(document).ready(function(){

alert(页面已经准备就绪！);

});

上述代码表示在页面加载完毕时执行alert()语句跳出提示框。在实际使用时，文档准备就绪函数function的内部代码可以更为丰富，例如可以是多个独立的jQuery语句或者jQuery函数的调用组合而成。浏览器会按照先后顺序执行其内部的全部代码。

由于ready()事件只用于当前文档，因此也可以省略选择器将其精简为以下两种格式：

$().ready(function)

或者

$(function)

需要注意是，ready()事件不要与body元素的onload属性一起使用，以免产生冲突。

【例8-1】jQueryready()事件的简单应用

测试ready()事件被触发的效果。

【代码说明】

由于ready()事件在页面准备就绪时就会被触发，而且当前示例页面中的内容很少几乎可以瞬间加载完毕，因此会首先看到弹出的提示框。

如果当前示例的页面内容很多，需要耗费一定的时间进行加载，那么用户会先看到正在逐步加载并显示出来的页面内容，等待元素全部加载完毕才会看到弹出的提示框。

2. load()事件

当页面中指定的元素被加载完毕时会触发load()事件。该事件通常用于监听具有可加载内容的元素，例如图像元素img、内联框架