文档介绍：使用 jQuery,第 2 部分: 构建未来的 Web 应用程序
事件､属性和 CSS
2008 年 10 月 10 日
这个第二篇介绍了如何将更多的交互添加到 Web 站点,以创建动态的富 应用程序(RIA)｡通过本文,了解 jQuery 如何综合利用用户交互生成的事件､来自 Web 站点的信息,以及更改应用程序外观的功能(无需重新加载),来轻松迅速地创建 RIA｡
简介
这 6 个月以来,JQuery 受欢迎的指数迅速攀升,现已成为 Web 开发人员首选的 JavaScript 库｡与此同时,人们对富 应用程序(Rich Application,RIA)的应用和需求也在迅速增长,并期待用基于浏览器的应用程序代替桌面应用程序｡无论是电子表格,还是薪水册和电子邮件应用程序,现在都在浏览器中再现了类似于桌面的体验｡随着这些应用程序数量的增多和功能的日益复杂,JavaScript 库将会变得越来越重要,因为它是构建这些应用程序的坚实基础｡JQuery 将成为开发人员最佳选择｡本系列文章深入探索了 jQuery,并提供了坚实的基础｡开发人员借助这个基础就可以快速轻松地构建自己的 RIA｡
在 上一篇文章 中,您了解了 jQuery 的基础知识,包括如何在开发环境中设置 jQuery,以及它的核心函数是如何工作的｡您看到了 jQuery 如何通过选择和过滤方法来简化搜索和查找页面元素,以及如何才能找到所需的元素｡接下来,您还体验了 jQuery 提供的遍历搜索结果的各种方法,而且其中的很多函数与您在其他编程语言中接触到的函数十分相似｡最后,还介绍了一个示例小部件,即 Select All/Deselect All 复选框,并看到了 jQuery 如何通过几行代码来构建这个小部件｡
在本篇本章,通过更精彩的功能来进一步扩展您的 jQuery 知识,并向老的 应用程序添加一些真正的“富”特性,使这个演示应用程序成为富 应用程序｡我先向您展示 jQuery 如何处理事件｡所谓事件就是指鼠标单击､突出显示和拖动等｡请注意,事件处理并不局限于按钮,还包括处理在任何 div､span 等上进行的鼠标单击｡接下来,我将讨论如何获取和设置 Web 页面内的对象的属性｡这包括如何从表单元素获得文本､如何从 div 获得 innerHTML,以及如何确定哪个类附加到哪个元素上｡最后,我将讨论如何在无需重新加载页面或调整外部样式表的情况下修改页面元素的 CSS 属性｡
示例应用程序在这个 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(