思洋互动网站建设学前班

综合学到的知识

要综合使用以上知识，让我们再来看看这个示例应用程序。它是一个具有交互性的Web应用程序，试图创建一个RIA并给用户这样的感觉：他们处理电子邮件所用的这个Web应用程序非常类似于桌面应用程序。在本例中，将利用Event、Attribute和CSS模块来定义Web邮件应用程序将如何处理鼠标单击和双击。

以下所示的屏幕截图显示了真实的效果。当用户在表的一个行上单击时，此行将会改变颜色以突出显示用户的当前选择。当用户在消息上双击时，用户就能看到消息，但如果用户读的是条新消息，此行的背景颜色会改变以表明此消息不再是未读消息。
广州网站建设,网站建设,广州网页设计,广州网站设计

1. 清单11.综合学到的知识  
2. //Firstweaddtherowstothetable.Eachrowisamemberofthe"messageRow"class.  
3. //WealsogiveanIDtoeachrow,andthisIDisthemessagenumberitself,whichis  
4. //gottenfromtheJavadataobject.KeepinmindthissitsinaforloopinaJSPfile.  
5.  
6. <%  
7. for(inti=0;i<messages.size();i++)  
8. {  
9. MessageDatamessage=messages.get(i);  
10. %> 
11. <trclasstrclass="messageRow"id="<%=message.id%>"> 
12.  
13. $(".messageRow").click(function(){  
14. $(".messageRow").removeClass("message_selected");  
15. $(this).addClass("message_selected");  
16. });  
17.  
18. $(".messageRow").dblclick(function(){  
19. if($(this).hasClass("mail_unread"))  
20. {  
21. $(this).removeClass("mail_unread");  
22. }  
23. $.post("<%=HtmlServlet.READ_MESSAGE%>.do",  
24. {  
25. messageId:$(this).attr("id"),  
26. view:"<%=view%>"},  
27. function(data){  
28. //DoAJAXstuffhere  
29. });  
30. });  
31. }); 

广州网站建设,网站建设,广州网页设计,广州网站设计
结束语

随着应用程序不断从桌面向浏览器转移，像jQuery这样的JavaScript库的将越来越重要。应用程序会越来越复杂，这就使跨浏览器的jQuery成为所有Web应用项目的必要工具。由于易于使用和功能完备，jQuery逐渐从其他JavaScript库中脱颖而出，成为很多开发人员的最佳选择。

文章随后讨论了属性以及如何恰当地从页面元素获得属性，如何在页面元素上设置属性。您看到了通用的attr()函数可用于每个元素，并且Form元素有获得其值的特殊函数。您还看到了新添加到jQuery的data()函数，此函数可充当每个页面元素的HashMap，让程序员可以创建所需的任何属性。

最后，您了解到如何修改页面元素的CSS，而不需重新加载页面。您还体验了css()函数的简单和直观。但是为了分离页面的样式和jQuery代码，您和您的团队最好选择用addClass()和removeClass()函数替代前面那些函数。

本文的最后的一部分将您所学到的这三个模块综合起来，展示了示例邮件应用程序如何处理鼠标交互。通过突出显示单击的行以及在适当的时候对消息进行“未读”标记，可以区分鼠标单击和双击，然后为特定于消息的数据向服务器发送一个Ajax调用，将消息编号传递给服务器。