《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、内联框架