《JavaScript与jQuery网页前端开发与设计-第2版》课件汇总 周文洁 第8--14章 jQuery事件 --- CH14 思政学习答题的设计与实现.ppt

JavaScript与jQuery

网页前端开发与设计-第2版

学校名称：XXXX

主讲教师：XXXX

第8章jQuery事件

本章学习目标

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

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

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

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

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

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

掌握jQuery临时事件的用法。

目录

8.1jQuery事件概述

8.2常用jQuery事件

8.3jQuery事件绑定与解除

8.4阶段案例：鼠标悬停切换图片

8.1jQuery事件概述

8.1.1事件的含义

8.1.2jQuery事件语法格式

8.1.1事件的含义

事件指的是HTML页面对不同用户操作动作的响应。

当用户做某个特定操作时将触发页面对应的事件，

例如点击按钮、移动鼠标、提交表单等。

可以事先为指定的事件自定义需要运行的脚本程序，

事件被触发时将自动执行这段代码。

8.1.2jQuery事件语法格式

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

$(selector).action(function(){

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

});

其中$(selector)可以是事件允许的jQuery选择器，

action需要替换为被监听的事件名称。

8.1.2jQuery事件语法格式

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

码如下:

$(p).click(function(){

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

});

上述代码中的关键词click表示鼠标左键单击事件，当用户使

用鼠标点击了段落元素时将执行其中的alert()语句。

8.2常用jQuery事件

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

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

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

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

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

8.2常用jQuery事件

8.2.1文档/窗口事件

8.2.2键盘事件

8.2.3鼠标事件

8.2.4表单事件

8.2.1文档/窗口事件

jQuery常见文档/窗口事件如表所示。

8.2.1文档/窗口事件

1.ready()事件

ready()事件又称为准备就绪事件，该事件只在文档准备就绪

时触发，因此其选择器只能是$(document)。

一般来说，为了避免文档在准备就绪前就执行了其他jQuery

代码而导致错误，所有的jQuery函数都需要写在文档准备就

绪（documentready）函数中。

8.2.1文档/窗口事件

1.ready()事件

其语法格式如下：

$(document).ready(function)

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

函数。

8.2.1文档/窗口事件

1.ready()事件

例如：

$(document).ready(function(){

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

});

上述代码表示在页面加载完毕时执行alert()语句跳出提示框。

8.2.1文档/窗口事件

1.ready()事件

在实际使用时，文档准备就绪函数function的内部代码可以

更为丰富，例如可以是多个独立的jQuery语句或者jQuery函

数的调用组合而成。浏览器会按照先后顺序执行其内部的全

部代码。

8.2.1文档/窗口事件

1.ready()事件

由于ready()事件只用于当前文档，因此也可以省略选择器将其

精简为以下两种格式：

$().ready(function)

或者

$(function)

需要注意是，ready()事件不要与body元素的onload属性

一起使用，以免产生冲突。

8.2.1文档/窗口事件

1.ready()事件

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

8.2.1文档/窗口事件

2.load()事件

当页面中指定的元素被加载完毕时会触发loa