通过介绍jQuery的一些常用方法，同时与使用Javascript基本语法来实现这些方法的过程进行对比，展示jQuery强大的功能，和使用的方便性。通过研究利用jQuery技术实现的大汉版通JCMS中的一个分页插件，为今后使用jQuery来提升我们的Web开发效率提供一个很好的研究和参考实例。通过以上对比加实践的研究过程，说明jQuery带给我们日常Web开发方式的巨大改变和开发效率的飞速提升。
1. 引言
Javascript是一种基于对象（Object）和事件驱动（Event Driven）并具有安全性能的脚本语言。在我们日常的Web开发中必不可少的要使用它与HTML超文本标记语言、Java脚本语言（Java小程序）一起实现在一个Web页面中链接多个对象，与Web客户交互作用，从而可以开发客户端的应该程序等。而随着网站交互性的提升，Javascript正越来越多的被使用。于是产生了一些Javascript库，来简化和优化我们的Web开发。jQuery就是其中一种非常优秀，而且应用广泛的Javascript库。
本文将利用jQuery来进行一些Web开发实践，期望通过与传统Javascript开发的对比，展示jQuery带给我们的另一种开发方式，以及开发效率的快速提升。并分析大汉网络内容管理系统JCMS中的jPage插件，以实例进一步证明jQuery对Web开发的方式的改进。
jQuery于2006年1月14日在BarCamp NYC (New York City)面世。3个主要开发人员分别是：两个美国人John Resig、Brandon Aaron，一个德国人Jorn Zaefferer。
jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是WRITE LESS,DO MORE,写更少的代码,做更多的事情。它是轻量级的js库(压缩后只有21k)，兼容CSS3，还兼容各种浏览器 （IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。它是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。它能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。
我们用一个实例来说明库的操作之前，我们应该在开始的位置讨论一下我们为什么需要它。
jQuery 库为普通的web脚本提供了一种通用的抽象层，并且它几乎在每种脚本环境都是有用的。它以插件的形式持续地通过开发加入新的功能。这种核心的特性，可以满足以下的需求：
获取页面的部分内容，不使用JavaScript库，必须写很多行代码来遍历DOM树，才能找现职HTML文档的指定部分。jQuery 提供了一个强大而有效的选择机制来返回被检查或者被操作的文档。
修改页面的外观，CSS提供了一个影响文档渲染的强大方法，当web浏览器不支持同样的标准时，它却是不尽人意的。jQuery 能弥补这个差距，提供了跨所有浏览器的同样的标准的支持。另外，即使页面被渲染后，jQuery 仍可改变文档一部分中的类或者独立的样式属性。
修改页面的内容，不仅限于外观的改变，jQuery 还可以用很少的代码就可修改文档的内容本身。文本可改变，图像可插入或替换，列表可重新排序或者整个HTML结构可被重写和扩展，完成这些只需一套非常易用的API。
在页面中响应用户的交互，当它们发生时，如果我们不能控制，即使是最周密最强大的行为也是没有用的。jQuery 库提供了一个简洁的方法来截取多种事件，例如用户单击链接，我们不需要将事件句柄混杂到 HTML 代码中。同时，事件句柄 API 删除浏览器不一致性，往往会让web开发者感到很烦恼。
给页面加上动画，为了有效地执行交互行为，设计师必须提供可视的反馈给用户，为了更方便，jQuery库提供了一组效果来推进它，效果淡入淡出，还可以自由定制。
无刷新返回服务器端的信息，这个代码模式已经Asynchronous JavaScript and XML (AJAX) 著称了，并协助web开发者制作可响应的功能丰富的网站。
简化共同的JavaScript任务，除了jQuery 指定的文档的所有特性外，这个库还提供了改进基本的 JavaScript 结构，如秩代和数组操作。
Javascript获得元素的主要通过id、name、元素名三种方式：
|
document.getElementById("username") //获得id为username的元素
document.getElementsByName("username")[0] //获得name为username的第一个元素
document.getElementsByTagName("input")[0].value //获得标签为input的第一个元素 |
代码 1
如果想通过更为复杂的条件来选取元素，就很难办到了。而jQuery 最强有力的方面是它能很容易进行DOM遍历，它可以通过id、class、元素名以及元素的层级关系及dom或者xpath条件等，使用$()引用元素：
|
$("#username") //获得id为username的元素
$("[name='username']") //获得name为username的元素
$("input") //获得所有input元素
$(".infoinput") //获得所有class为infoinput的元素
$("#username input") //获得id为usernmae的元素内的所有input元素 |
代码 2
可以看到，jQuery使用非常简单的选择器就可以获得复杂条件下的元素。此外，还可以结合css、xpath选择器以及自定义选择器来做更复杂的元素引用。这样，在WEB开发中，我们不用编写大量的javascript就可以轻松的对页面元素进行操作。
通过绑定事件，程序可以对用户操作进行反馈。
Javascript的事件绑定：
|
document.getElementById("save").onclick = function(){alert("Hello World!");}; |
代码 3
同样，jQuery也有相应的事件绑定方法：
|
$("#save").onclick(function(){alert("Hello World!");}); |
代码 4
同时，jQuery还支持方法的连锁，即可以对一个jquery对象连续调用各种不同的方法。
例如，如果我们除了为save按钮绑定了onclick事件，还想实现，当鼠标移动到按钮上时，为按钮加上样式“btnover”，当鼠标移出后，去掉“btnover”样式。
使用Javascript，我们需要在标签内加上onclick、onmouseover、onmouseout三个事件绑定：
代码 5
或者获得三次元素，分别绑定三个事件：
|
document.getElementById("save").onclick = sayHi();
document.getElementById("save").onmouseover = btnOver();
document.getElementById("save").onmouseout = btnOut(); |
代码 6
使用jQuery，我们采用连锁写法，只需要获得一次元素：
|
$("#save").click(sayHi).mouseover(btnOver).mouseout(btnOut); |
代码 7
大大简化了代码的书写，同时使得页面的body部分更加清洁。
此外，jQuery的强大远不止于此，下一章，我们就通过大汉版通JCMS中的一个AJAX分页插件，来了解一下如何利用jQuery来轻松的开发一个复杂的插件。
在大型门户类网站中，往往有大量的数据需要展示，而由于篇幅所限，不可能将所有内容都显示在一个页面中，于是需要通过分页的方式来分段显示这些内容。但是，通常考虑到访问量和速度的原因，这类网站都采用由内容管理系统在后台生成静态HTML文件后，发布到前台的方式。这就在一定程度上限制了网站的交互功能。因为静态页面无法对用户操作做出响应，只能用来展示。有一些网站的分页，采取了静态的Javascript分页，即将当前分页以外的数据隐藏，当点击到目标页码后，再将需要展示的内容显示出来，这种方式的反应速度很快，因为数据在第一次页面加载的时候就已经载入了。但其实，这种方式造成了页面数据的冗余，导致在网页第一次加载的时候相当缓慢，并且占用了大量的客户端内存。而这些内容，不是所有用户都会去查看的。那么，另一种方式，通过AJAX，向动态页面发送请求，再将处理后的数据返回，在不刷新整个页面的情况下，对局部数据进行更新，这正是我们所需要的效果。
jPage使用jQuery的$.ajax()方法，向数据代理页面发送请求，获得一组分页的数据。插件中，用到jquery.cookie.js这个插件，将当前页码和每页显示记录数保存在cookie中，当刷新整个页面的时候，依然定位在最后一次访问分页。 
图表 1
4.3.1 jQuery方法扩展
jQuery扩展一个插件的方法很简单。这里，我们对id为page1的div容器插入分页：
$("#page1").jpage([参数]);
只需要这么一个方法，就可以显示一个分页效果，一个页面上可以使用多个分页。
|
//刷新按钮监听
btnRefresh.bind("mousedown",pressHandler).bind("mouseup",unpressHandler).bind("mouseout",unpressHandler); |
代码 8
btnRefresh是刷新按钮的jQuery对象，使用jQuery的bind方法，为刷新按钮绑定了mousedown、mouseup、mouseout三个事件。
我们可以看到，这种绑定方式不同于上一章介绍的$().click()方式，使用他的好处在于，我们可以使用unbind方法，取消bind方法绑定的事件。
|
btnRefresh.unbind(“click”); |
代码 9
|
/**
* 获得远程数据
*/
function getRemoteData(){
//……
$.ajax(
{
type: "POST",//请求类型为post
url: "proxy.jsp",//请求页面URL地址
cache: false,//是否缓存
data: ajaxParam,//参数
dataType: "script",//返回值类型
timeout: 30000,//超时事件
success: function(msg){//成功返回
//……
},
error: function(){//发生错误
//……
}
}
);
} |
代码 10
使用jQuery的$.ajax（）来请求一组数据。请求超时事件为30秒。如果成功返回，则更新分页数据，并刷新按钮状态；如果超时或发生错误，则弹出提示。
5. 结论
jQuery简化了代码的编写，将常用的方法和复杂的功能封装起来，通过强大的选择器获取需要的对象后，把这些方法直接运用到获取的对象上，开发人员不需要精通Javascript，就可以实现丰富的表现和交互功能；同时，jQuery使得html内容和Javascirpt代码分离，降低了表现（HTML）和控制（Javascirpt）的耦合性，html内容的改变产生的影响更小，不需要重新编写脚本；开发人员不需要考虑兼容性，jQuery兼容CSS3，还兼容各种浏览器；它还改进了基本的JavaScript结构，如秩代和数组操作的性能。总之，jQuery带来的性能、效率的提升是巨大的，期望更多的开发人员参与到jQuery的改进和应用中来。
6. 典型成功案例
政府网站典型案例
|
名称 |
|
应用案例 |
网址 |
|
政府 |
省级 |
山东省政府 |
http://www.shandong.gov.cn/ |
|
地市级 |
浙江 |
宁波市政府 |
http://www. nb.gov.cn/ |
|
温州市政府 |
www.wenzhou.gov.cn |
|
嘉兴市政府 |
www.jiaxing.gov.cn |
|
|
|
|
山东 |
济南市政府 |
http://www.jinan.gov.cn/ |
|
淄博市政府 |
http://www.zibo.gov.cn |
|
济宁市政府 |
www.jining.gov.cn/ |
|
临沂市政府 |
http://www.linyi.gov.cn |
|
|
|
|
江苏 |
泰州市政府 |
http://www.taizhou.gov.cn/ |
|
南通市政府 |
www.nantong.gov.cn/ |
|
|
|
|
安徽 |
滁州市政府 |
www.chuzhou.gov.cn/ |
|
|
马鞍山市政府 |
www.mas.gov.cn |
|
其他 |
永州市政府 |
www.yzcity.gov.cn |
|
阳泉市政府 |
www.yq.gov.cn/ |
|
宜昌市政府 |
www.yichang.gov.cn/ |
|
六盘水市政府 |
www.gzlps.gov.cn/ |
|
常德市政府 |
|
|
区县级 |
浙江 |
余姚市政府 |
www.yy.gov.cn/ |
|
慈溪市政府 |
www.cixi.gov.cn/ |
|
江北区政府 |
www.nbjiangbei.gov.cn |
|
鄞州区政府 |
www.nbyz.gov.cn/ |
|
宁波保税区 |
www.nftz.gov.cn/ |
|
鸥海区政府 |
www.ouhai.gov.cn/ |
|
嘉善县政府 |
www.jiashan.gov.cn/ |
|
天台县政府 |
|
|
江苏 |
玄武区政府 |
www.xwzf.gov.cn |
|
鼓楼区政府 |
www.njgl.gov.cn/ |
|
栖霞区政府 |
qixia.nj.gov.cn |
|
下关区政府 |
www.njxg.gov.cn/ |
|
江宁区政府 |
www.jiangning.gov.cn/ |
|
宿城区政府 |
www.sqsc.gov.cn/ |
|
赣榆县政府 |
gyx.lyg.gov.cn/d |
|
太仓市政府 |
www.taicang.gov.cn/ |
|
其他 |
宜都市政府 |
www.hbyidu.com/ |
|
当阳市政府 |
www.hbdy.gov.cn/ |
|
高青县政府 |
www.gaoqing.gov.cn/ |
|
六枝特区政府 |
www.liuzhi.gov.cn/ |
|
惠民县政府 |
|
|
市中区政府 |
|
|
历城区政府 |
|
|
名称 |
|
应用案例 |
网址 |
|
各级部门 |
国家部委 |
中华人民共和国工业和信息化部 |
http://www.miit.gov.cn/ |
|
省级 |
浙江 |
浙江省司法厅 |
www.zjsft.gov.cn/ |
|
浙江省卫生厅 |
www.zjwst.gov.cn/ |
|
浙江省地税局 |
www.zj-l-tax.gov.cn/ |
|
浙江省国资委 |
gzw.zj.gov.cn/ |
|
浙江省审计厅 |
www.zjsjt.gov.cn/ |
|
山东 |
山东省国家税务局 |
www.sd-n-tax.gov.cn/ |
|
山东省地方税务局 |
www.sdds.gov.cn/ |
|
山东省公安厅 |
www.sdga.gov.cn/ |
|
山东省畜牧办 |
www.sdxm.gov.cn/ |
|
山东省农业厅 |
www.sdny.gov.cn/ |
|
江苏 |
江苏省交通厅 |
www.jscd.gov.cn/ |
|
江苏省审计厅 |
www.jssj.gov.cn/ |
|
江苏省地方税务局 |
www.jsds.gov.cn |
|
江苏省旅游局 |
www.jstour.gov.cn |
|
江苏省食品药品监督管理局 |
www.jsfda.gov.cn/ |
|
江苏省监狱管理局 |
www.jsjy.gov.cn |
|
江苏省气象局 |
www.jsmb.gov.cn/ |
|
江苏省信息中心 |
www.jsic.gov.cn/ |
|
江苏省档案局 |
www.dajs.gov.cn |
|
江苏省海事局 |
www.js-msa.gov.cn/ |
|
其他 |
上海市质量监督管理局 |
www.shzj.gov.cn |
|
湖北省国家税务局 |
www.hb-n-tax.gov.cn/ |
|
安徽省国家税务局 |
www.ah-n-tax.gov.cn/ |
|
地市、区县级 |
浙江 |
杭州市审计局 |
www.hzsj.gov.cn/ |
|
宁波市财税局 |
www.nbcs.gov.cn/ |
|
江苏 |
无锡监狱 |
wx.jsjy.gov.cn/ |
|
南京环保局 |
www.njhb.gov.cn |
|
句容监狱 |
jr.jsjy.gov.cn/ |
