jQuery正在成为Web开发人员首选的JavaScript库，与此同时，人们对富Internet应用程序（Rich Internet Application，RIA）的需求也在不断的增长，随着RIA的增多和功能的日益复杂，JavaScript库将会变得越来越重要，那么jQuery无疑是将您的最佳选择。

51CTO推荐专题： jQuery从入门到精通

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

事件

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

众所周知，大多数事件都基于Form元素。演示这些方法最好的方式就是使用它们。在开始深入研究可用的函数之前，一定要注意：Events模块针对每个函数都遵循一种模式。每个事件函数都包含两种形式：一个没有任何参数，一个包含一个函数作为参数。

二者间的差异十分重要，而且这对各个函数都是一致的。没有参数的函数将实际激发该事件。换而言之，调用click()将实际导致该按钮被单击。在实际单击该按钮，或其click()函数被调用时，将会调用click(function)。是不是很困惑？这只是文字上的描述，举例说明之后，您就会清楚了。

清单1.jQueryEvent方法  
//makethe"myButton"click.Thiswillcausethebuttontoclickandanyactions  
//tiedtoitwilloccur-forexample,itcouldsubmitaform,orother  
//jQueryactionscouldbetiedtoit.  
$("#myButton").click();  
 
$("#myButton").click(function(){  
$("#myDiv").toggle();  
});  
 
$("#myButton").click(function(){  
$("#myDiv").toggle();  
}).click(); 

此外，您可以想像得到，一些事件是与鼠标紧密相连的。由于这些事件常被误用，所以我将它们包括在第三节。认识到这一点后，jQuery已经用特定的函数替代了其中的一些事件。我将它们列于此，只是为了直接与底层的DOM事件相匹配，但对于所有的实际使用，最好使用其他的方法。

比如，当鼠标在某个元素上按下或释放时，就会调用mousedown(fn)和mouseup(fn)方法。然而，更多时候，却应该调用click()方法，因为此方法也会作为事件抛出，而且它更符合预期的行为，更不容易出错。试想一下这样的情况：用户在某个按钮上按下鼠标，发现错了，立即松开鼠标而不是释放鼠标。

如果用户用所定义的mouseup(fn)在另一个页面元素之上释放鼠标，那么应该发生什么行为呢？理想情况下，这两个函数的使用应该限于对界面的拖放，因为这种情况下单击不会有合适的替代。

Event模块的最后两个方法mouseover(fn)和mouseout(fn)目前在很多Web站点上都很常见。它们常被用来显示悬浮帮助、图片显示所需的相框和基于鼠标指针所在位置而发生的颜色改变。JQuery认识到这两个函数还将很常用，但很多人都不能正确使用它们，这就导致很多错误。

人们并不是有意要将bug引入其代码，而是自己不会编写嵌套组件或应对其他复杂情况的代码。因此，jQuery向Event模块添加了一个新方法来替代这两个函数，这个方法就是hover(fn1,fn2)函数。

清单2.jQuery的Hover方法  
$("tr").hover(function(){  
$(this).css("background","#0000ff");  
},  
function(){  
$(this).css("background","#ffffff");  
});