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

核心提示： 示例应用程序在这个 Web 邮件应用程序的额外小部件中包含了各种东西，展示了如何创建一个客户端的富应用程序，使用 jQuery，第 2 部分: 构建未来的 Web 应用程序(2)，并且根据与页面的交互来更改对象的颜色、大小和位置，（这些交互只限于客户端 — 下一篇文章将会添加服务器端

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

事件

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

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

清单 1. jQuery Event 方法

　　　
//　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();

编缉推荐阅读以下文章

• 使用 jQuery，第 3 部分: 用 jQuery 和 Ajax 构建富 Internet 应用程序
• 使用 jQuery，第 1 部分: 将桌面应用程序引入浏览器