使用 jQuery，第 3 部分: 用 jQuery 和 Ajax 构建富 Internet 应用程序

核心提示： 本文中的示例应用程序是个总结，展示了 Effects 和 Ajax 模块如何融入到这个示例 Web 邮件应用程序中，使用 jQuery，第 3 部分: 用 jQuery 和 Ajax 构建富 Internet 应用程序(2)，我将向这个示例程序添加一些效果使其更加漂亮，而且更重要的一点是，就是综

本文中的示例应用程序是个总结，展示了 Effects 和 Ajax 模块如何融入到这个示例 Web 邮件应用程序中。我将向这个示例程序添加一些效果使其更加漂亮，而且更重要的一点是，我将添加一些 Ajax 代码，以便无需重载页面邮件应用程序就能显示信息。

Effects 模块

从其名字往往容易得出这样的结论，Effects 模块只包含一些动画和效果，而这些动画和效果往往是一些 “正规” 的 Web 页面所竭力避免的。但实际情况并非如此。几乎所有的应用程序都会遇到这样的情况，即某个页面元素需要隐藏或其视图应该根据另一个页面元素的状态进行切换。这类更改对于一个 RIA 而言非常重要，因为它们让您能够加载某个页面的所有页面元素，然后通过隐藏/显示特定的元素只显示所需的信息。重载页面的方式并不可取。比如一个具有两个选项的组合框，一个选项是隐藏 div，一个选项是显示此 div。很显然，与更改组合框并重载页面隐藏/显示 div 相比，用客户端代码隐藏/显示此 div 更简单和高效。而仅隐藏/显示还是要让它淡入/淡出，则完全取决于您。

如上所述，最基本的效果函数是 show()和 hide()函数。这非常直观；它们可分别用来显示和隐藏页面上的某个元素。

清单 1. 隐藏和显示函数

　　　
//　shows　every　<p>　on　the　page　
$("p").show();　
　
//　hides　every　<p>　on　the　page　
$("p").hide();　
　
//　hides　every　other　<p>　on　the　page　
$("p:odd").hide();

除了这些基本操作，利用 show()和 hide()这两个函数，还能更多地控制页面元素如何显示和隐藏。相关文档将 hide()描述为 “优美” 的显示/隐藏，对于 show()，就是综合淡入和滑出的效果。

编缉推荐阅读以下文章

• 使用 jQuery，第 2 部分: 构建未来的 Web 应用程序
• 使用 jQuery，第 1 部分: 将桌面应用程序引入浏览器