使用jQuery,第 2 部分 构建未来的 Web 应用程序.doc

使用jQuery，第2部分:构建未来的Web应用程序
事件、属性和CSS

2008年10月10日
这个关于HYPERLINK"http://www.ibm.com/developerworks/cn/views/java/libraryview.jsp?search_by=%E4%BD%BF%E7%94%A8+jQuery"jQuery系列文章的第二篇介绍了如何将更多的交互添加到Web站点，以创建动态的富Internet应用程序（RIA）。通过本文，了解jQuery如何综合利用用户交互生成的事件、来自Web站点的信息，以及更改应用程序外观的功能（无需重新加载），来轻松迅速地创建RIA。
简介
这6个月以来，JQuery受欢迎的指数迅速攀升，现已成为Web开发人员首选的JavaScript库。与此同时，人们对富Internet应用程序（RichInternetApplication，RIA）的应用和需求也在迅速增长，并期待用基于浏览器的应用程序代替桌面应用程序。无论是电子表格，还是薪水册和电子邮件应用程序，现在都在浏览器中再现了类似于桌面的体验。随着这些应用程序数量的增多和功能的日益复杂，JavaScript库将会变得越来越重要，因为它是构建这些应用程序的坚实基础。JQuery将成为开发人员最佳选择。本系列文章深入探索了jQuery，并提供了坚实的基础。开发人员借助这个基础就可以快速轻松地构建自己的RIA。
在HYPERLINK"http://www.ibm.com/developerworks/cn/web/wa-jquery1/"上一篇文章中，您了解了jQuery的基础知识，包括如何在开发环境中设置jQuery，以及它的核心函数是如何工作的。您看到了jQuery如何通过选择和过滤方法来简化搜索和查找页面元素，以及如何才能找到所需的元素。接下来，您还体验了jQuery提供的遍历搜索结果的各种方法，而且其中的很多函数与您在其他编程语言中接触到的函数十分相似。最后，还介绍了一个示例小部件，即SelectAll/DeselectAll复选框，并看到了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方法

//makethe"myButton"click.Thiswillcausethebuttontoclickandanyactions
//tiedtoitwilloccur-forexample,itcouldsubmitaform,orother
//jQueryactionscouldbetiedtoit.
$("#myButton").click();

//usejQuerytosetu