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

JQuery 客户端脚本框架使用说明书制作人制作时间修改人修改时间修改内容版本于浩2011-8-26V1.0一 简介jQuery确实是一个挺好的轻量级的JS框架，能帮助我们快速的开发JS应用，并在一定程度上改变了我们写JavaScript代码的习惯。当然jQuery本身包含很多东西，例如说对事件的处理、对Ajax的处理、以及对UI的处理等很多很多的内容；同时利用开发的插件也包含很多类别，例如导航类、分页类、提示框类、编辑器类、表格类、验证类、图表类、Form相关类、上传类、事件日期类、虚拟键盘类等等。此处所封装的内容十分有限，甚至有些内容只是介绍了相关的用法。如想了解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：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,data : 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();/struts2 需要首先获取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.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内容：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(ajaxCheck.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) = name;public String getLocation() return location;public void setLocation(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.ajaxSetup( options ) 中的options参数属性中, 有一个global属性:global 值类型:布尔值, 默认值: true, 说明:是否触发全局的Ajax事件.这个属性用来设置是否触发全局的Ajax事件. 全局Ajax事件是一系列伴随Ajax请求发生的事件.主要有如下事件:名称说明ajaxComplete( callback )AJAX 请求完成时执行函数ajaxError( callback )AJAX 请求发生错误时执行函数ajaxSend( callback )AJAX 请求发送前执行函数ajaxStart( callback )AJAX 请求开始时执行函数ajaxStop( 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(function(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,settings)$(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: 检查是否为英文。checkCHcheckCH: 检查是否为汉字。checkLimitcheckLimit(int,int): 检查输入数字是否在规定范围内。checkMaxLengthchekcMaxLength(int): 最大长度。checkMinLengthcheckMinLength(int) : 最小长度。checkPwdcheckPwd(id): 比较两次输入内容是否一致。checkIntegercheckInteger: 检查输入内容是否为整数(含负) 。checkDigitscheckDigits:检查输入内容是否为正整数(含0) 。checkAlphanumcheckAlphanum : 检查输入内容是否为英文或数字 。checkIpcheckIp: 检查Ip(无端口号)填写格式。checkIpAndPortchekcIpAndPort :检查Ip填写格式。(端口号可有可无)checkMobilecheckMobile:检查手机号码填写格式。checkPhonecheckPhone:检查座机类电话号码填写格式。checkMobileOrPhonecheckMobileOrPhone:检查手机或电话号码填写格式。checkCustomizecheckCustomize(regex):传入条件进行检查。regex :自定义正则表达式。使用实例:checkNull检查输入内容是否为空或包含空格。返回: 用于提示用户的提示语，提示语使用“ ”包装。eg:checkEmail检查输入内容格式是否匹配email格式。返回:用于提示用户的提示语，提示语使用“ ”包装。eg:checkWebAddr检查输入内容格式是否匹配网址格式。返回:用于提示用户的提示语，提示语使用“ ”包装。eg:checkEN检查输入内容格式是否匹配英文格式。返回:用于提示用户的提示语，提示语使用“ ”包装。eg:checkCH检查输入内容格式是否匹配中文格式。返回:用于提示用户的提示语，提示语使用“ ”包装。eg:checkLimit检查输入数字是否在规定范围内。返回:用于提示用户的提示语，提示语使用“ ”包装。eg:checkMaxLength限制允许输入内容的最大字符。参数:最大内容长度。返回:用于提示用户的提示语，提示语使用“ ”包装。eg:checkMinLength限制允许输入内容的最小字符。参数:最小内容长度。返回:用于提示用户的提示语，提示语使用“ ”包装。eg:checkPwd比较两次输入内容是否一致。参数:要比较的另一个文本框的id。返回:用于提示用户的提示语，提示语使用“ ”包装。eg:checkInteger检查输入内容是否为整数(含负) 。返回:用于提示用户的提示语，提示语使用“ ”包装。eg:checkDigits检查输入内容是否为正整数(含0) 。返回:用于提示用户的提示语，提示语使用“ ”包装。eg:checkAlphanum检查输入内容是否为英文或数字。返回:用于提示用户的提示语，提示语使用“ ”包装。eg:checkIp检查Ip(无端口号)填写格式 。返回:用于提示用户的提示语，提示语使用“ ”包装。eg:checkIpAndPort检查Ip填写格式。(端口号可有可无)返回:用于提示用户的提示语，提示语使用“ ”包装。eg:checkMobile检查手机号码填写格式。返回:用于提示用户的提示语，提示语使用“ ”包装。eg:checkPhone检查座机类电话号码填写格式 。返回:用于提示用户的提示语，提示语使用“ ”包装。eg:checkMobileOrPhone检查手机或电话号码填写格式。返回:用于提示用户的提示语，提示语使用“ ”包装。eg:checkCustomize传入正则表达式进行检查。参数:regex : 自定义正则表达式 。注:正则表达式格式必须完整“/$/”必须写返回:用于提示用户的提示语，提示语使用“ ”包装。eg:全局校验，提交表单。vdSubmit全局校验，并提交。参数:submitButton:按钮名称，即点击的按钮id。formId:表单id。action:提交路径返回:用于提示用户的提示语，提示语使用“ ”包装。eg:$(function()$(“#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已经修改过，原文件的所有提示均为英文提示，并且当文件名过长的时候不能完全显示文件名称，此处修改为所有提示为中文提示，并且当文件名称过长时显示的形式为“文件名称”当鼠标滑动到文字上时会显示全部文字。二：代码如下1：fileupload.Js(function($)/* * 上传文件 * param Object path 工程根路径 即为request.getContextPath(); * param Object action 上传文件的Action * param Object size 单个文件的大小 * param Object fileExt 允许上传的文件类型 * param Object auto 是否自动上传，设置为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:path+/jquery.uploadify-v2.1.4/uploadify.swf, /uploadify.swf 文件的相对路径，该swf文件是一个带有文字BROWSE的按钮，点击后弹出打开文件对话框，默认值：uploadify.swf。buttonImg:path+/jquery.uploadify-v2.1.4/images/xzwj.jpg, /选择文件图片wmode:transparent, /可以使浏览按钮的flash背景文件透明，并且flash文件会被置为页面的最高层script:path+/+action, /后台处理程序的相对路径 。默认值：uploadify.phpfolder:myfolder,/上传文件存放的目录cancelImg:path+/jquery.uploadify-v2.1.4/images/cancel.png,/选择文件到文件队列中后的每一个文件上的关闭按钮图标fileDataName:fileInput,/设置一个名字，在服务器处理程序中根据该名字来取上传文件的数据。默认为FiledatasizeLimit:size,/上传文件大小fileExt:fileExt,/设置可以选择的文件的类型，格式如：*.doc;*.pdf;*.rar 。 fileDesc:fileDesc,/这个属性值必须设置fileExt属性后才有效，用来设置选择文件对话框中的提示文本，如设置fileDesc为“请选择rar doc pdf文件”，queueID:fileQueue,/文件队列的ID，该ID与存放文件队列的div的ID一致。auto:auto,/设置为true当选择文件后就直接上传了，为false需要点击上传按钮才上传 。multi:multi, /设置为true时可以上传多个文件。simUploadLimit:simUploadLimit,/允许同时上传的个数 默认值：1 。 displayData:percentage, width:90, /选择文件图片宽度height:23, /选择文件图片高度 onComplete:function(event, queueID, fileObj, response, data) /文件上传完成后触发。该函数有四个参数event、queueId、fileObj、response、data五个参数，前三个参数同上。response为后台处理程序返回的值，在上面的例子中为1或0，data有两个属性fileCount和speedalert(上传成功！););/* * 返回 * param Object path 工程根路径 * param Object action 返回的Action * memberOf TypeName */$.fn.backUp = function(path,action)if(action!=null&action!=)$(this).attr(action,path+/+action).submit();)(jQuery);2:页面代码 单文件上传 script src=/js/jquery-1.5.1.min.js type=text/javascriptlink href=/jquery.uploadify-v2.1.4/uploadify.css rel=stylesheet type=text/css /script type=text/javascript src=/jquery.uploadify-v2.1.4/jquery-1.4.2.min.js script language=javascript src=/jquery.uploadify-v2.1.4/swfobject.jsscript language=javascript src=/jquery.uploadify-v2.1.4/jquery.uploadify.v2.1.4.jsscript language=javascript src=/js/fileupload.js $(function()/文件上传$(#fileInput).fileupload(,uploadFileAction.action,1024*200*1024,*.exe;*.rar;*.zip;*.7z,false,false,1);); 浏览input type=button value=返    回 onclick=javascript:$(#form1).backUp(,toMain.action); class=btn / 3：工具类FileUploadUtil.javapackage common;import java.io.BufferedInputStream;import java.io.BufferedOutputStream;import java.io.File;import java.io.FileInputStream;import java.io.FileNotFoundException;import java.io.FileOutputStream;import java.io.IOException;import java.io.InputStream;import java.io.OutputStream;import java.text.SimpleDateFormat;import java.util.ArrayList;import java.util.Date;import java.util.List;import java.util.Random;public class FileUploadUtil /* * 将上传的文件拷贝到指定的目录 * param src 上传文件 * param dst 指定目录 */public static void copy(File src, File dst) try InputStream in = null ; OutputStream out = null ; try in = new BufferedInputStream( new FileInputStream(src), 20480); out = new BufferedOutputStream( new FileOutputStream(dst), 20480); byte buffer = new byte 20480; while (in.read(buffer) 0 ) out.write(buffer); finally if ( null != in) in.close(); if ( null != out) out.close(); catch (Exception e) /* * 获取文件后缀名称 * param filename 文件名称（不包含路径） * return 文件后缀名称 */public static String getFileSuffix(String filename)int pos = filename.lastIndexOf(.);return filename.substring(pos+1);/* * 上传文件 * param uploads 要上传的文件列表 * param fileNames 要上传的文件名列表 * param realPath 文件保存路径 */public static boolean upload(List uploads,List fileNames,String realPath)if(checkTotalSize(uploads)if (uploads != null) realPath = createNewFolder(realPath);for (int i=0; i 0) os.write(buffer, 0, count);os.close();is.close(); catch (FileNotFoundException e) catch (IOException e) return true;elsereturn false;/* * 单文件上传 * param file 上传文件 * param serverName 服务器端文件名称 * param realPath 上传路径 * return 成功返回true,否则返回false */public static boolean uploadSingle(File file,String serverName,String realPath)boolean flag = false;realPath = createNewFolder(realPath);InputStream is;try is = new FileInputStream(file);OutputStream os = new FileOutputStream(realPath+/ + serverName);byte buffer = new byte20480;int count = 0;while (count = is.read(buffer) 0) os.write(buffer, 0, count);os.close();is.close();flag = true; catch (Exception e) flag = false; return flag;/* * 改变上传文件的名称 * param fileNames 源文件名称集合 * return 新文件名称集合 */public static List changeImageName(List fileNames)List newfileNames = new ArrayList();if(fileNames!=null&fileNames.size()0)for(int i=0;ifileNames.size();i+)SimpleDateFormat sdf = new SimpleDateFormat(yyyyMMddHHmmss);String imageFileName=sdf.format(new Date()+new Random().nextInt(1000) + getFileSuffix(fileNames.