Jquery客户端脚本使用说明书.docx

1、Jquery客户端脚本使用说明书JQuery 客户端脚本框架使用说明书制作人制作时间修改人修改时间修改内容版本于浩2011-8-26V1.0一 简介jQuery确实是一个挺好的轻量级的JS框架，能帮助我们快速的开发JS应用，并在一定程度上改变了我们写JavaScript代码的习惯。当然jQuery本身包含很多东西，例如说对事件的处理、对Ajax的处理、以及对UI的处理等很多很多的内容；同时利用开发的插件也包含很多类别，例如导航类、分页类、提示框类、编辑器类、表格类、验证类、图表类、Form相关类、上传类、事件日期类、虚拟键盘类等等。此处所封装的内容十分有限，甚至有些内容只是介绍了相关的用法。如

2、想了解JQuery更多的知识，请参考相关资料。JQuery框架主要包含三部分内容：1：JQuery Ajax的使用。2：JQUery 校验框架的使用。3：JQuery 文件上传。版本： JQuery 1.5.1 。二 具体内容分析2.1 ajax的使用 由于对JQuery Ajax部分未作任何封装，所以在使用jQuery时只需要引入jquery-1.5.1.min.js即可。这里只对ajax的使用做简单的介绍。关于ajax的使用请大家注意三点：1：get方式请求最好加上时间戳，以免浏览器缓存对请求造成的影响。2：如果请求的字符串中含有中文字符，在某些浏览器下是否会出现中文乱码。由于不同工程的编

3、码方式不一致，以及浏览器的多样性，在这里很难提供一种完全解决方案，对于出现的具体问题，需要具体的解决方案。3：post方式请求参数的值应该通过对应的取值方式获取，(例如struts1系列通过form内封装属性，给予set、get方法。然后在action中取值。Struts2需要在action中提供属性与set、get方法。).2.1.1 $.ajax 的用法形式：jQuery.ajax(options)HTML内容：JavaScript内容：$(#ddd).click(function(event) $.ajax( type : POST, url : /ajaxCheck.action, d

4、ata : name=John&location=Boston, success : function(msg) alert(Data Saved: + msg); ););AjaxCheckAction内容：一：获取参数内容System.out.println(name+request.getParameter(name);System.out.println(location+request.getParameter(location);二：向客户端写内容：Writer writer = ServletActionContext.getResponse().getWriter();/str

5、uts2 需要首先获取HttpServletResponse。其他情况只要获取此对象即可。writer.write(向客户端写的内容);/向客户端写的内容即为msg。success : function(msg) alert(Data Saved: + msg);注：此方法也包含一些其他参数此处不做说明。可参考JQuery1.5.1 中文API。2.1.2 load的用法形式：load(url, data, callback)Html内容：Javascript内容：$(#testLoad).click(function(event) $(#divResult).load(/ajaxCheck.

6、action?name=nihao&location=shenyang, resultType : html , function(responseText, textStatus, XMLHttpRequest) alert(responseText + responseText); alert(textStatus + textStatus); alert(XMLHttpRequest + XMLHttpRequest); ););AjaxCheckAction内容：/同上。2.1.3 $.get的用法形式：jQuery.get(url, data, callback, type)HTML

7、内容：JavaScript内容： $(#testGet).click(function(event) $.get(ajaxCheck.action, name: John, location: 2pm , function(data) alert(Data Loaded: + data); ); );AjaxCheckAction内容：/同上。2.1.4 $.post 的用法形式：jQuery.post(url, data, callback, type)HTML内容：JavaScript内容： $(#testPost).click(function(event) $.get(ajaxChec

8、k.action, name: John, location: 2pm , function(data) alert(Data Loaded: + data); ); );AjaxCheckAction内容： private String name; private String location; public String getName() return name; public void setName(String name) this.name = name; public String getLocation() return location; public void setL

9、ocation(String location) this.location = location; public String execute() throws Exception System.out.println(name + name+ :location + location);Writer writer = ServletActionContext.getResponse().getWriter();writer.write(返回客户端的内容);对于 $.getJSON 的用法与 $.getScript的用法此处不做讲解。2.1.5 全局Ajax事件在jQuery.ajaxSet

10、up( options ) 中的options参数属性中, 有一个global属性:global 值类型:布尔值, 默认值: true, 说明:是否触发全局的Ajax事件.这个属性用来设置是否触发全局的Ajax事件. 全局Ajax事件是一系列伴随Ajax请求发生的事件.主要有如下事件:名称说明ajaxComplete( callback )AJAX 请求完成时执行函数ajaxError( callback )AJAX 请求发生错误时执行函数ajaxSend( callback )AJAX 请求发送前执行函数ajaxStart( callback )AJAX 请求开始时执行函数ajaxStop(

11、 callback )AJAX 请求结束时执行函数ajaxSuccess( callback )AJAX 请求成功时执行函数以下示例说明其执行顺序：jQueryAjax-AjaxEvent$(document).ready(function()$(#btnAjax).bind(click,function(event)$.get(ajaxCheck.action);)$(#divResult).ajaxComplete(function(evt,request,settings)$(this).append(ajaxComplete);)$(#divResult).ajaxError(func

12、tion(evt,request,settings)$(this).append(ajaxError);)$(#divResult).ajaxSend(function(evt,request,settings)$(this).append(ajaxSend);)$(#divResult).ajaxStart(function()$(this).append(ajaxStart);)$(#divResult).ajaxStop(function()$(this).append(ajaxStop);)$(#divResult).ajaxSuccess(function(evt,request,s

13、ettings)$(this).append(ajaxSuccess););发送Ajax请求结果为：了解了事件的执行顺序更有利于我们对Ajax的处理。2.2 JQuery校验首先此框架是由“validator”框架改进而成，因此同样需要“jQuery”基本库文件做支持。所需js类库 jquery-1.5.1.min.js 、validator-1.1.js。方法简介：checkNullcheckNull:检查是否为空。checkEmailcheckEmail:检查email。checkWebAddrcheckWebAddr: 检查网址填写格式。checkENcheckEN: 检查是否为英文。c

14、heckCHcheckCH: 检查是否为汉字。checkLimitcheckLimit(int,int): 检查输入数字是否在规定范围内。checkMaxLengthchekcMaxLength(int): 最大长度。checkMinLengthcheckMinLength(int) : 最小长度。checkPwdcheckPwd(id): 比较两次输入内容是否一致。checkIntegercheckInteger: 检查输入内容是否为整数(含负) 。checkDigitscheckDigits:检查输入内容是否为正整数(含0) 。checkAlphanumcheckAlphanum : 检查

15、输入内容是否为英文或数字 。checkIpcheckIp: 检查Ip(无端口号)填写格式。checkIpAndPortchekcIpAndPort :检查Ip填写格式。(端口号可有可无)checkMobilecheckMobile:检查手机号码填写格式。checkPhonecheckPhone:检查座机类电话号码填写格式。checkMobileOrPhonecheckMobileOrPhone:检查手机或电话号码填写格式。checkCustomizecheckCustomize(regex):传入条件进行检查。regex :自定义正则表达式。使用实例:checkNull 检查输入内容是否为空或

16、包含空格。 返回: 用于提示用户的提示语，提示语使用“ ”包装。 eg: checkEmail 检查输入内容格式是否匹配email格式。返回:用于提示用户的提示语，提示语使用“ ”包装。eg: checkWebAddr 检查输入内容格式是否匹配网址格式。返回:用于提示用户的提示语，提示语使用“ ”包装。eg: checkEN 检查输入内容格式是否匹配英文格式。返回:用于提示用户的提示语，提示语使用“ ”包装。eg: checkCH 检查输入内容格式是否匹配中文格式。返回:用于提示用户的提示语，提示语使用“ ”包装。eg: checkLimit 检查输入数字是否在规定范围内。返回:用于提示用户的

17、提示语，提示语使用“ ”包装。eg: checkMaxLength限制允许输入内容的最大字符。参数: 最大内容长度。返回:用于提示用户的提示语，提示语使用“ ”包装。eg:checkMinLength限制允许输入内容的最小字符。参数:最小内容长度。返回:用于提示用户的提示语，提示语使用“ ”包装。eg:checkPwd 比较两次输入内容是否一致。参数:要比较的另一个文本框的id。返回:用于提示用户的提示语，提示语使用“ ”包装。eg:checkInteger 检查输入内容是否为整数(含负) 。返回:用于提示用户的提示语，提示语使用“ ”包装。eg:checkDigits 检查输入内容是否为正整

18、数(含0) 。返回:用于提示用户的提示语，提示语使用“ ”包装。eg:checkAlphanum 检查输入内容是否为英文或数字。返回:用于提示用户的提示语，提示语使用“ ”包装。eg:checkIp 检查Ip(无端口号)填写格式 。返回:用于提示用户的提示语，提示语使用“ ”包装。eg:checkIpAndPort 检查Ip填写格式。(端口号可有可无)返回:用于提示用户的提示语，提示语使用“ ”包装。eg: checkMobile 检查手机号码填写格式。返回:用于提示用户的提示语，提示语使用“ ”包装。eg: checkPhone 检查座机类电话号码填写格式 。返回:用于提示用户的提示语，提示

19、语使用“ ”包装。eg: checkMobileOrPhone 检查手机或电话号码填写格式。返回: 用于提示用户的提示语，提示语使用“ ”包装。eg: checkCustomize 传入正则表达式进行检查。参数: regex : 自定义正则表达式 。注:正则表达式格式必须完整“/$/”必须写返回: 用于提示用户的提示语，提示语使用“ ”包装。eg: 全局校验，提交表单。vdSubmit 全局校验，并提交。参数: submitButton:按钮名称，即点击的按钮id。 formId:表单id。 action:提交路径返回: 用于提示用户的提示语，提示语使用“ ”包装。eg:$(function(

20、) $(“#submitButton”).vdSubmit(“formId” : “form1”,“action” : “addUserAction.action”);); 注意：所有校验均可进行多种校验。格式如下2.3 upload文件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已经修改过，原文件

21、的所有提示均为英文提示，并且当文件名过长的时候不能完全显示文件名称，此处修改为所有提示为中文提示，并且当文件名称过长时显示的形式为“文件名称”当鼠标滑动到文字上时会显示全部文字。二：代码如下1：fileupload.Js(function($) /* * 上传文件 * param Object path 工程根路径 即为request.getContextPath(); * param Object action 上传文件的Action * param Object size 单个文件的大小 * param Object fileExt 允许上传的文件类型 * param Object aut

22、o 是否自动上传，设置为true当选择文件后就直接上传了，为false需要点击上传按钮才上传 。 * param Object multi 是否可以一次上传多个文件，设置为true时可以上传多个文件。 * param Object simUploadLimit 每次允许同时上传的文件 * memberOf TypeName */ $.fn.fileupload = function(path,action,size,fileExt,auto,multi,simUploadLimit,formId,completeAction) var fileDesc = ; if(fileExt!=null) fileDesc = Files (+fileExt+); $(this).uploadify( uploader:pa