我的书签
添加书签
移除书签5.3 教程：事件简介
本教程对于事件的使用给出了一个简单介绍。我们将会让页面对几种不同类型的事件做出反应，以便你了解jQuery事件是如何工作的，以及如何使用它们。
注意：参见1.3节中的“注意”部分以了解如何下载教程文件的信息。
1.在文本编辑器中，打开chapter05目录下的events_intro.html文件。
首先添加到jQuery文件的一个链接。
2.在结束的＜/head＞标签之上的空行上单击，并且输入：
＜script src="../_js/jquery-1.6.3.min.js"＞＜/script＞
这行代码从该站点加载jQuery文件。注意，包含jQuery文件的文件夹的名称是_js（别漏掉了开头的下划线字符）。接下来，要为程序添加一组＜script＞标签。
3.按下回车键，在jQuery代码下创建新的一行，并且添加如下粗体所示的代码：
＜script src="../_js/jquery-1.6.3.min.js"＞＜/script＞
＜script＞
＜/script＞
现在，添加document.ready（）函数。
4.单击＜script＞标签之间的空行，并且添加粗体所示代码：
＜script src="../_js/jquery-1.6.3.min.js"＞＜/script＞
＜script＞
$（document）.ready（function（）{
}）；//end ready
＜/script＞
不要漏掉}）；后面的JavaScript注释。尽管添加注释需要一些额外的录入，但它们能够帮助你识别程序的不同部分。现在，我们已经完成了任何时候在页面上使用jQuery时所要遵从的一些步骤。
接下来要添加事件了。第一个目标很简单：当访问者在页面上的任何地方双击时，出现一个警告框。首先，需要选择想要为其添加事件的元素（在这个例子中，就是该页面）。
5.单击.ready（）函数中的空行，并且添加如下的粗体代码：
＜script src="../_js/jquery-1.6.3.min.js"＞＜/script＞
＜script＞
$（document）.ready（function（）{
$（'html'）
}）；//end ready
＜/script＞
$（'html'）选择了该HTML元素，基本上是整个浏览器窗口。接下来添加事件。
6.在该jQuery选择器的后面输入.dblclick（）；，代码如下所示：
＜script src="../_js/jquery-1.6.3.min.js"＞＜/script＞
＜script＞
$（document）.ready（function（）{
$（'html'）.dblclick（）；//end double click
}）；//end ready
＜/script＞
.db lclick（）是一个jQuery函数，它让浏览器做好准备，当访问者在页面上双击的时候做一些事情。这里唯一缺失的是“做一些事情”部分，这需要将一个匿名函数作为参数传递给dblclick（）函数（如果需要回顾函数是如何工作的，以及传递一个参数的含义，参阅3.4.2节）。
7.输入如下粗体所示的代码，添加匿名函数：
＜script src="../_js/jquery-1.6.3.min.js"＞＜/script＞
＜script＞
$（document）.ready（function（）{
$（'html'）.dblclick（function（）{
}）；//end double click
}）；//end ready
＜/script＞
不必担心，本书后面不会以这种缓慢的速度介绍每个教程；但是，这对于你理解每一部分代码做些什么来说很重要。function（）{}只是一个外壳，在向{和}中添加程序之前，它什么也不做。而添加程序是下一步的工作。
8.最后，添加一条alert语句：
＜script src="../_js/jquery-1.6.3.min.js"＞＜/script＞
＜script＞
$（document）.ready（function（）{
$（'html'）.dblclick（function（）{
alert（'ouch'）；
}）；//end double click
}）；//end ready
＜/script＞
如果在Web浏览器中预览该页面，并且在页面上的任何位置双击，将会出现一个JavaScript警告框，其中带有单词“ouch”。如果不是这样，仔细检查一下你的录入，以确保没有漏掉什么。
注意：在经过长时间的工作后，“ouch”已经出现在屏幕上了，这可能让你觉得有些轻松了。但是，别忘了，这段脚本的“ouch”部分是不重要的，正是你所录入的所有其他代码展示了如何通过jQuery来使用事件的基本知识。随着学习关于编程和jQuery的更多内容，（当访问者双击页面的时候）我们可以很容易地用一系列的动作来替代警告框，例如，让一个元素在屏幕上来回移动，显示一个交互式的照片幻灯片放映，或者打开一款赛车游戏。
现在已经了解了基础的知识，我们来尝试一些其他的事件。
9.添加如下粗体所示的代码：
＜script src="../_js/jquery-1.6.3.min.js"＞＜/script＞
＜script＞
$（document）.ready（function（）{
$（'html'）.dblclick（function（）{
alert（'ouch'）；
}）；//end double click
$（'a'）.mouseover（function（）{
}）；//end mouseover
}）；//end ready
＜/script＞
这段代码选择了页面上的所有链接（即$（'a'）部分），然后给mouseover事件添加了一个匿名函数。换句话说，当某人将鼠标光标悬停在页面上的任何链接的时候，将会发生一些事情。
10.给上一步中添加的匿名函数添加两条JavaScript语句：
＜script src="../_js/jquery-1.6.3.min.js"＞＜/script＞＜script＞
$（document）.ready（function（）{
$（'html'）.dblclick（function（）{
alert（'ouch'）；
}）；//end double click
$（'a'）.mouseover（function（）{
var message="＜p＞You moused over a link＜/p＞"；
$（'.main'）.append（message）；
}）；//end mouseover
}）；//end ready
＜/script＞
这里的第一行var message="＜p＞You moused over a link＜/p＞"；，创建了一个名为message的新变量，并且在其中存储了一个字符串。这个字符串是一个HTML段落标签和一些文本。下一行代码，使用一个类名main选取了页面上的一个元素（$（'.main'）），然后附加了message变量的内容（或者说，添加到了该元素的末尾）。这个页面包含一个带有类main的＜div＞标签，因此，每当访问者将鼠标光标悬停在页面的一个链接上的时候，这段代码直接将“You moused over a link”添加到该div的末尾（参见4.7节，以回顾jQuery的append（）函数）。
11.保存该页面，在浏览器中预览，并且将鼠标光标悬停在页面的任何链接之上。
每次将鼠标光标悬停到一个链接上时，将会有一段话添加到页面（如图5-3所示）。现在，将添加最后一段程序：当访问者在页面的表单按钮上单击的时候，浏览器将会修改出现在按钮上的文本。
12.最后，添加如下粗体所示的代码，使得完成后的脚本如下所示：
＜script src="../_js/jquery-1.6.3.min.js"＞＜/script＞
＜script＞
$（document）.ready（function（）{
$（'html'）.dblclick（function（）{
alert（'ouch'）；
}）；//end double click
$（'a'）.mouseover（function（）{
var message="＜p＞You moused over a link＜/p＞"；
$（'.main'）.append（message）；
}）；//end mouseover
$（'#button'）.click（function（）{
$（this）.val（"Stop that！"）；
}）；//end click
}）；//end ready
＜/script＞
你应该理解代码的大概作用了：$（'#button'）选择了带有ID button的一个元素（在这个例子中，就是表单按钮），并且为其添加了一个click事件，以便当某人单击该按钮的时候，会发生一些事情。在这个例子中，单词“Stop that！”会出现在按钮上。下面介绍匿名函数中的代码是如何实现这些的：
在4.10.2节，我们看到了如何在jQuery中将$（this）用于一个循环。在一个事件中也采用同样的思路：$（this）引用要对事件做出响应的元素，也就是要选择并对其添加事件的元素。在这个例子中，这就是表单按钮。（我们将在9.1.2节学习关于jQuery val（）函数的更多内容，但是基本上，使用它来从一个表单元素读取值或者修改表单元素的值。在这个例子中，将字符串“Stop that！”传递给val（）函数，这会将该按钮的值设置为“Stop that！”）。
13.保存该页面，在浏览器中预览，并且单击该表单按钮。
按钮的文本应该立即改变（如图5-3所示）。作为额外的联系，请添加程序，以便当访问者单击或跳转到文本字段的时候，使得文本字段的背景颜色变为红色。这里给出一些提示你需要：a）选择文本字段；b）使用focus（）事件（参见9.1.4节）；c）使用$（this）（和第12步中相同）在匿名函数中引用文本字段；d）使用.css（）函数（参见4.8.2节）来更改文本字段的背景颜色。可以在chapter05目录下的complete_events_intro.html文件中找到答案（以及该页面的一个完整版本）。
图 5-3 jQuery使得页面很容易对用户交互做出响应，例如，当双击页面的时候打开一个警告框，向页面添加文本以对鼠标光标悬停到链接上做出响应，或者对单击表单按钮做出响应
