浅谈jQuery技术在Web开发中的应用

南京军区南京总医院博士后工作站 田 军

1.引言

近年来，随着互联网的普及和应用，Web应用在我们的生活中随处可见，从我们日常浏览的门户网站、微博，到企事业OA办公系统、客户关系管理系统等信息化办公平台，越来越多的应用依托Web平台，使得过去操作系统的兼容性等问题不再成为信息系统安装和使用的瓶颈，Web应用逐渐渗透到我们生活的每一个角落。

2.用户体验对于Web应用的重要性

对于任何一款Web系统来说，用户体验比其他任何一个方面都显得更加重要。对于大多数用户来说，不管访问的是什么类型的Web系统，它都是一个“自助式”的产品。没有可以事先阅读的说明书，没有任何操作培训或讨论会。用户所能依靠的只有自己的智慧和经验，来独自面对这个系统，如果没有很好的用户体验，也许用户只会成会匆匆的过客。因此，只有提供优质的用户体验才能够真正保持Web系统的持久竞争力。

3.jQuery简介

为了在前端得到更好的用户体验，减轻服务器端的负载压力，越来越多的javascript框架被应用到Web开发中。jQuery是继prototype之后又一个优秀的javascript框架。它是轻量级的js库(压缩后只有21k)，兼容CSS3，还兼容各种浏览器（IE 6.0+，FF 1.5+，Safari 2.0+，Opera 9.0+）。这些特点使得开发者不需要关注浏览器的兼容性，而把更多的精力投入到业务逻辑和用户体验的实现上。jQuery的语法设计可以使开发者更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。早在jQuery诞生之初，其核心理念就是write less，do more，让开发人员通过较少的代码实现更丰富的功能。

4.Web开发中常用的jQuery应用

4.1 jQuery环境的搭建

在Web开发中应用jQuery非常简便。jQuery库是一个单独的javascript文件，可以保存到本地或者服务器直接引用，也可以从多个公共服务器中选择引用。

jQuery目前最新的版本是1.8.2（截止2012年10月），引用的语法则和引用js文件一样，通常如下：

4.2 jQuery让AJAX变得简单

AJAX即“Asynchronous JavaScript and XML”（异步JavaScript和XML)，是指一种创建交互式网页应用的网页开发技术。通过AJAX，可使用XMLHttpRequest对象来直接与服务器进行通信。通过这个对象，可在不重载页面的情况与Web服务器交换数据，从而做到了页面的局部刷新。

正因为AJAX技术的出现和成熟，使得Web应用和桌面应用程序的距离越来越近。页面不再会不停刷屏甚至白屏，带给用户更好的操作体验。在网页中合理地使用AJAX可以使Web应用焕然一新。AJAX技术的应用，促进了页面表现和数据的分离，使Web应用的交互性、反应速度、柔性提高到了一个新的层次。

在jQuery框架中，AJAX是应用最为广泛的技术。使用jQuery使AJAX变得极其简单，通过$get(url，data，callback，type)方法就可以实现异步操作，其中url是异步请求的页面(可以是.ashx文件)，data是参数，callback是回调函数，而type是返回数据的类型.type有xml，html，json，text等。

当然，我们也可以使用$.ajax()函数编写一些复杂的Ajax脚本，使用方法如下所示，当success回调函数返回XML文档后，我们使用jQuery检索这个XML文档，其方式与检索HTML文档是一样的。这样使得处理XML文档变得相当地容易，并且把内容和数据集成到了Web站点里面。

$.ajax({

url：'document.xml',

type：'GET',

dataType：'xml',

timeout：1000,

error：function(){

alert('Error loading XML document');

},

success：function(xml){

// do something with xml

}

});

4.3 使用简单的语法为html提供动态特效

jQuery可以用来处理基本的动画和显示效果。animate() 函数是动画代码的核心，它用于更改任何随时间变化的数值型的CSS样式值。比方说，您可以变化高度、宽度、不透明度和位置。还可以指定动画的速度，定为毫秒或者预定义的速度：慢速，中速或快速。同时，jQuery还提供了一组方法，用以实现网页对象的动态特效，如常用的show()和hide()方法，实现一个jQuery对象的渐入和淡出。函数接受的参数除了快慢等，还可以接收整型，作为渐入或淡出的完成时间，单位为ms。

4.4 丰富的插件机制为Web应用提供了强大的扩展性和高体验性

jQuery的另一大特点是开源，目前jQuery的官方插件是jQuery UI。开发者可以任意扩展jQuery的函数库或者按照自己的需求开发UI组件。目前网上已经有数以千计的jQuery插件，涵盖Web应用中各种各样的需求。例如Ajax辅助、数据表格、动态列表、XML工具、拖曳、cookie处理、弹出层等等。

如果希望直观地呈现统计数据，我们可以使用jQchart、TufteGraph等优秀的图表；如果用到日历功能，我们可以使用Date Picker、wdCalendar等插件；如果希望用上对话框，我们可以使用Modal Dialog等插件。总之，丰富的jQuery带给我们开发者极大的便利，同时丰富的功能扩展也能满足用户更高的体验需求。

5.结束语

JQuery作为一个轻量的js库，使用起来很方便，也总是能给开发者提供不同寻常的效果和特性。它简化了javascript和AJAX编程，带给访问者完全不同的浏览感受。在web开发中，适当、合理地使用jQuery技术，就可以让我们开发的应用具有较好的用户操作体验，较快的网页响应速度以及解决浏览器的兼容问题，在很大程度上起到事半功倍的效果。

[1]尹婷,赵思佳.基于jQuery框架的AJAX网站设计模式的研究[J].湖南环境生物职业技术学院学报,2010(3).

[2]曾顺.精通JavaScript+jQuery[M].北京:人民邮电出版社,2010,217-218.

[3]单东林,张晓菲,魏然.锋利的jQuery[M].北京:人民邮电出版社,2009,197-198.