JQUERY客户端脚本使用说明书

JQuery客户端脚本框架使用说明书

制作人制作时间修改人修改时间修改内容版本

V1.0

于浩2011-8-

26

一简介

jQuery确实是一个挺好的轻量级的JS框架，能帮助我们快速的开发JS应用，并在一定程度上改变了我们写JavaScript代码的习惯。

当然jQuery本身包含很多东西，例如说对事件的处理、对Ajax的处理、以及对UI 的处理等很多很多的内容；同时利用开发的插件也包含很多类别，例如导航类、分页类、提示框类、编辑器类、表格类、验证类、图表类、Form相关类、上传类、事件日期类、虚拟键盘类等等。

此处所封装的内容十分有限，甚至有些内容只是介绍了相关的用法。如想了解JQuery 更多的知识，请参考相关资料。

JQuery框架主要包含三部分内容：

1：JQuery Ajax的使用。

2：JQUery校验框架的使用。

3：JQuery文件上传。

版本：《JQuery 1.5.1》。

二具体内容分析

2.1ajax的使用

由于对JQuery Ajax部分未作任何封装，所以在使用jQuery时只需要引入jquery-1.5.1.min.js即可。这里只对ajax的使用做简单的介绍。关于ajax的使用请大家注意三点：

1：get方式请求最好加上时间戳，以免浏览器缓存对请求造成的影响。

2：如果请求的字符串中含有中文字符，在某些浏览器下是否会出现中文乱码。

由于不同工程的编码方式不一致，以及浏览器的多样性，在这里很难提供一种完全解决方案，对于出现的具体问题，需要具体的解决方案。

3：post方式请求参数的值应该通过对应的取值方式获取，(例如struts1系列通过form 内封装属性，给予set、get方法。然后在action中取值。Struts2需要在action中提供属性与set、get方法。).

2.1.1$.ajax的用法

形式：jQuery.ajax([options])

注：此方法也包含一些其他参数此处不做说明。可参考《JQuery1.5.1中文API》。

2.1.2load的用法

形式：load(url,[data],[callback])

2.1.3$.get的用法

形式：jQuery.get(url,[data],[callback],[type])

2.1.4$.post的用法

形式：jQuery.post(url,[data],[callback],[type])

对于$.getJSON的用法与$.getScript的用法此处不做讲解。

2.1.5全局Ajax事件

以下示例说明其执行顺序：

了解了事件的执行顺序更有利于我们对Ajax的处理。

2.2JQuery校验

首先此框架是由“validator”框架改进而成，因此同样需要“jQuery”基本

库文件做支持。

所需js类库jquery-1.5.1.min.js、validator-1.1.js。

方法简介：

checkNull checkNull:检查是否为空。

checkEmail checkEmail:检查email。

checkWebAddr checkWebAddr:检查网址填写格式。

checkEN checkEN:检查是否为英文。

checkCH checkCH:检查是否为汉字。

checkLimit checkLimit(int,int):检查输入数字是否在规定范围内。checkMaxLength chekcMaxLength(int):最大长度。checkMinLength checkMinLength(int):最小长度。

checkPwd checkPwd(id):比较两次输入内容是否一致。checkInteger checkInteger:检查输入内容是否为整数(含负)。

checkDigits checkDigits:检查输入内容是否为正整数(含0)。checkAlphanum checkAlphanum:检查输入内容是否为英文或数字。checkIp checkIp:检查Ip(无端口号)填写格式。checkIpAndPort chekcIpAndPort:检查Ip填写格式。(端口号可有可无) checkMobile checkMobile:检查手机号码填写格式。checkPhone checkPhone:检查座机类电话号码填写格式。checkMobileOrPhone checkMobileOrPhone:检查手机或电话号码填写格式。checkCustomize checkCustomize(regex):传入条件进行检查。

regex:自定义正则表达式。

使用实例:

全局校验，提交表单。

2.3upload文件

JQuery上传文件采用的是JQuery的uploadify插件。能够实现带进度条效果，并能够实现多文件上传。

具体实现过程

一：工程内引入

1：jquery.uploadify-v2.1.4包下的所有文件；

2：封装的fileupload.js；

3：jquery-1.5.1.min.js

注意：这里jquery.uploadify.v2.1.4.js已经修改过，原文件的所有提示均为英文提示，并且当文件名过长的时候不能完全显示文件名称，此处修改为所有提示为中文提示，并且当文件名称过长时显示的形式为“文件名称…”当鼠标滑动到文字上时会显示全部文字。

二：代码如下

1：页面js的引入2：后台处理类的编写