使用jQuery，第2部分：构建未来的Web应用程序

使用jQuery，第2部分：构建未来的Web应用程序2009-11-06 ibm Michael Abernethy

简介

这6个月以来，JQuery受欢迎的指数迅速攀升，现已成为Web开发人员首选的JavaScript库。与此同时，人们对富Internet应用程序（RichInternetApplication，RIA）的应用和需求也在迅速增长，并期待用基于浏览器的应用程序代替桌面应用程序。无论是电子表格，还是薪水册和电子邮件应用程序，现在都在浏览器中再现了类似于桌面的体验。随着这些应用程序数量的增多和功能的日益复杂，JavaScript库将会变得越来越重要，因为它是构建这些应用程序的坚实基础。JQuery 将成为开发人员最佳选择。本系列文章深入探索了jQuery，并提供了坚实的基础。开发人员借助这个基础就可以快速轻松地构建自己的 RIA。

在上一篇文章中，您了解了jQuery的基础知识，包括如何在开发环境中设置jQuery，以及它的核心函数是如何工作的。您看到了jQuery如何通过选择和过滤方法来简化搜索和查找页面元素，以及如何才能找到所需的元素。接下来，您还体验了jQuery提供的遍历搜索结果的各种方法，而且其中的很多函数与您在其他编程语言中接触到的函数十分相似。最后，还介绍了一个示例小部件，即 Select All/Deselect All 复选框，并看到了jQuery如何通过几行代码来构建这个小部件。

在本篇本章，通过更精彩的功能来进一步扩展您的jQuery知识，并向老的Internet应用程序添加一些真正的 “富” 特性，使这个演示应用程序成为富Internet应用程序。我先向您展示jQuery如何处理事件。所谓事件就是指鼠标单击、突出显示和拖动等。请注意，事件处理并不局限于按钮，还包括处理在任何 div、span 等上进行的鼠标单击。接下来，我将讨论如何获取和设置 Web 页面内的对象的属性。这包括如何从表单元素获得文本、如何从 div 获得 innerHTML，以及如何确定哪个类附加到哪个元素上。最后，我将讨论如何在无需重新加载页面或调整外部样式表的情况下修改页面元素的 CSS 属性。

示例应用程序在这个 Web 邮件应用程序的额外小部件中包含了各种东西，展示了如何创建一个客户端的富应用程序，并且根据与页面的交互来更改对象的颜色、大小和位置。（这些交互只限于客户端 — 下一篇文章将会添加服务器端的交互）。通过本文，您将能够掌握创建 RIA 所需的jQuery工具，并借此打动您的客户。

事件

jQuery 内的 Events 模块是向 Web 应用程序添加交互性的第一步，因为事件通常是页面上发生的事情的触发器。正如我在简介中提到的，您不应该认为事件只发生在 Form 元素 — 实际上，任何元素都能触发事件，因此应该充分利用这一点来更轻松地构建定制的小部件，以及添加一些独特却又不局限于特定 Form 元素的交互。

众所周知，大多数事件都基于 Form 元素。演示这些方法最好的方式就是使用它们。在开始深入研究可用的函数之前，一定要注意：Events 模块针对每个函数都遵循一种模式。每个事件函数都包含两种形式：一个没有任何参数，一个包含一个函数作为参数。二者间的差异十分重要，而且这对各个函数都是一致的。没有参数的函数将实际激发该事件。换而言之，调用 click（）将实际导致该按钮被单击。在实际单击该按钮，或其 click（）函数被调用时，将会调用 click（function）。是不是很困惑？这只是文字上的描述，举例说明之后，您就会清楚了。

清单1.jQueryEvent 方法

// make the "myButton" click. This will cause the button to click and any actions
// tied to it will occur - for example, it could submit a form, or other
// jQuery actions could be tied to it.
$（"#myButton"）.click（）;

// use jQuery to setup what will actually happen when the "myButton" is
// actually clicked.
$（"#myButton"）.click（function（）{
  $（"#myDiv"）.toggle（）;
}）;

// A common pattern in jQuery when setting up actions on a page is to trigger the
// action to occur initially when the page is loaded. This occurs frequently
// with AJAX setups, where the values come from the server.
// In this example, the myDiv has its visibility toggled every button click. When 
// the page is loaded, we call click（） immediately, which toggles the view 
// as soon as the page views （not a practical example, but you should see the design）
$（"#myButton"）.click（function（）{
  $（"#myDiv"）.toggle（）;
}）.click（）;

如下所列的事件都符合我在之前所介绍的设计模式，而且也都具有与其相关联的两个函数。为了简单起见，我只列举了第一个：

blur（） - 在 Form 元素失去焦点时调用，例如，用 tab 键移出具有焦点的文本字段

change（） - 在 Form 元素失去焦点，并且其值因获得焦点而更改时调用。Internet Explorer 和 Firefox 对此的处理稍微不同。

click（） - 当在页面元素（不一定是 Form 元素）上单击时调用

dblclick（） - 当在页面元素（不一定是 Form 元素）上双击时调用

error（） - 当元素出现内部错误时调用，不同的浏览器对此的处理不同，可能很多人都亲自体验过

focus（） - 当某个 Form 元素获得焦点时调用

keydown（） - 当页面元素在其上/内发生一个 keypress 时调用

keyup（） - 当页面元素在其上/内释放一个 keypress 时调用

keypress（） - 当相同的页面元素相继发生 keydown 和 keypress 时调用

select（） - 文本在文本字段内被选中时调用，而不是内容在组合框内被选中时（这时发生的是更改事件）调用。

submit（） - 提交 Form 时调用

还有一些函数不遵守上文概括的模式，而且也只包含一个可调用的函数。我将这些例外也列于此，但它们不常用：

resize（fn） - 对象调整大小时调用

scroll（fn） - iframe 卷起时调用

load（fn）/unload（fn） - 对象在页面上加载/重载时发生