项目中js往往会有些比较常用的函数，这时就可以把这些函数封装到一起。如果项目使用jQuery则可以封装成jQuery的扩展。jQuery扩展一般有两种方式，一种是对jQuery本身的扩展，一种是jQuery对象的扩展。
jQuery本身的扩展即把函数封装在jQuery名称空间下，通过jQuery.funcName的形式调用。如：jQuery.ajax({param1:value1,param2,value2[,...]});
jQuery对象的扩展，即扩展到jQuery查找到DOM后的对象下，通过jQuery("#divId").funcName的形式调用。如：$("#selectID").appendTo("body"); //$为jQuery的别名
封装的代码如下：
1 /** 2 * 项目常用函数封装，扩展到jQuery下，函数名以'_'线开头区别于jQuery本身的函数 3 * 类方法调用： 4 * $.functionName( param1[, param2[, param3, ...] ] ); 5 * $._trim( "abcdef", "f" ); //去除字符串首尾的'f' 6 * 对象方法调用： 7 * jQueryObj.functionName( param1[, param2[, param3, ...] ] ); 8 * $("#img")._alignCenter(); //弹窗居中 9 * 10 * 常用函数： 11 * 1. $._trim( string[, char] ); //去除字符串首尾的空格（包括全角空格），或特殊字符 12 * 2. $._rtrim( string[, char] ); //去除字符串右侧的空格（包括全角空格），或特殊字符 13 * 3. $._strLen( string ); //获取字符串长度，一个中文算两个字节 14 * 4. $._cutStr( string[, len[, replace]] ); //截取字符串 15 * 5. $._urlParams( [name] ); //获取url中的参数 16 * 6. $._stopProp( e ); //阻止冒泡传递 17 * 7. $._date( str[, c]); //获取当前日期 18 * 8. $._addMask( [bColor[, zindex]] ); //添加遮罩 19 * 9. $._removeMask(); //移除遮罩 20 * 10. $._formData( id[, boolean] ); //获取form表单提交的值 21 * 11. $._cookie( [name[, value[, options]]] ); //获取设置cookie的值 22 * 12. $._removeCookie( name ); //移除cookie 23 * 13. $._ajaxPage( fn, params[, pageId] ); //ajax分页 24 * 16. $._html2Entity( str ); //html转实体 25 * 17. $._entity2Html( str ); //实体转html 26 * 20. $._mousePos( e ); //获取当前鼠标位置 27 * 28 * 22. _alignCenter( [offset[, bool[, style]]] ); //弹窗居中显示 29 * 23. _dragHandle( dragId[, cursor] ); //拖动弹窗 30 * 24. _checkTextArea( limitObj, len ); //检查textarea的字数 31 */ 32 (function($, document) { 33 //扩展jQuery类本身的方法，$为传入的jQuery对象 34 $.extend({ 35 /** 36 * 功能：去除字符串两端的空格或指定字符 37 * @param string str 字符串 38 * @param char c 需要去除的字符，不填为去除空格 39 * @return string 字符串 40 */ 41 _trim: function(str, c) { 42 if (!str) 43 return ""; 44 var re1 = !c ? /(^\s*)|(\s*$)/g : eval("/(\^" + c + ")|(" + c + "\$)/g"), 45 re2 = /(^[\u3000]*)|([\u3000]*$)/g; 46 if (!c) { 47 return str.replace(re1, "").replace(re2, ""); 48 } 49 return str.replace(re1, ""); 50 }, 51 52 /** 53 * 功能：去除字符串右端的空格或指定字符 54 * @param string str 字符串 55 * @param char c 需要去除的字符，不填为去除空格 56 * @return string 字符串 57 */ 58 _rtrim: function(str, c) { 59 if (!str) 60 return ""; 61 var re1 = !c ? /(\s*$)/g : eval("/(" + c + "\$)/g"), 62 re2 = /[\u3000]*$/g; 63 if (!c) { 64 str.replace(re1, "").replace(re2, ""); 65 } 66 return str.replace(re1, ""); 67 }, 68 69 /** 70 * 功能：获取字符串长度，一个中文算两个字节，其它一个字节。 71 * @param string str 字符串 72 * @return int 字符串长度（字节大小） 73 */ 74 _strLen: function(str) { 75 if (!str) 76 return 0; 77 return str.replace(/[^\x00-\xff]/g, "aa").length; 78 }, 79 80 /** 81 * 功能：截取字符串，默认截取20个字符（一个中文算2个字符），超出默认用'...'表示。 82 * @param string str 要截取的字符串，必须 83 * @param int len 要截取的字节长度，默认20个字符 84 * @param string r 末尾替代字符，默认'...' 85 * @return string 字符串 86 */ 87 _cutStr: function(str, len, r) { 88 if (!str) 89 return ""; 90 len = len || 20; 91 r = r === "" ? "" : "..."; 92 if ($._strLen(str) <= len) { 93 return str; 94 } 95 for (var i = 0, l = 0, sLen = str.length, c; i < sLen; i++) { 96 c = encodeURI(str.charAt(i)); 97 if (c === "%0A" || c === "%20" || c === "%7C") { 98 l += 1; 99 } else { 100 c.length > 2 ? l += 2 : l += 1; 101 } 102 if (l >= len) { 103 return l == len ? str.substr(0, i + 1) + r : str.substr(0, i) + r; 104 } 105 } 106 return str; 107 }, 108 109 /** 110 * 功能：获取url中的参数。（有待优化，增加多个参数值获取） 111 * @param string name 参数名称，不填获取所有参数 112 * @return string|obj 参数不为空返回指定参数的值，参数为空时返回所有参数 113 * {param1:value1, param2:value2, ...} 114 */ 115 _urlParams: function(name) { 116 var url = $._trim(location.href.split("?").pop()).toLowerCase(); 117 if (!url) 118 return null; 119 name = name ? name.toLowerCase() : ""; 120 var arr = url.split("&"), a, p, re = {}; 121 if (arr[0].split("=").length < 2) 122 return null; //没有参数返回 123 for (var i = 0, l = arr.length; i < l; i++) { 124 a = arr[i].split("="); 125 if (name == a[0]) { 126 p = a[1]; 127 } else { 128 re[a[0]] = a[1]; 129 } 130 } 131 if (!name) 132 return re; 133 return p; 134 }, 135 136 //阻止冒泡（事件传递） 137 _stopProp: function(e) { 138 e = e || window.event; 139 if (e.stopPropagation) { 140 e.stopPropagation();//W3C阻止冒泡方法 141 } 142 else { 143 e.cancelBubble = true;//IE阻止冒泡方法 144 } 145 return false; 146 }, 147 148 /** 149 * 功能：获取当前日期,不填参数获取完整的时间，格式'2013-12-22 06:20:21'。 150 * @param string str 时间格式： 151 * y输出4位年份，如：2013 152 * ym输出年月，如：201312 153 * ymd输出年月日，如2013-12-20 154 * @param char c 分割符，默认'-' 155 * @return string 当前日期 156 */ 157 _date: function(str, c) { 158 var myDate = new Date(), //创建日期对象 159 yyyy = myDate.getFullYear(), //获取完整的年份(4位,1970-????) 160 mm = myDate.getMonth() + 1, //获取当前月份(0-11,0代表1月) 161 dd = myDate.getDate(), //获取当前日(1-31) 162 hh = myDate.getHours(), //获取当前小时数(0-23) 163 ii = myDate.getMinutes(), //获取当前分钟数(0-59) 164 ss = myDate.getSeconds(); //获取当前秒数(0-59) 165 mm = mm > 9 ? mm : "0" + mm; 166 dd = dd > 9 ? dd : "0" + dd; 167 hh = hh > 9 ? hh : "0" + hh; 168 ii = ii > 9 ? ii : "0" + ii; 169 ss = ss > 9 ? ss : "0" + ss; 170 str = str ? str.toLowerCase() : ""; 171 c = c || "-"; 172 switch (str) { 173 case "y": 174 return yyyy; 175 case "ym": 176 return yyyy + c + mm; 177 case "ymd": 178 return yyyy + c + mm + c + dd; 179 default: 180 return yyyy + c + mm + c + dd + " " + hh + ":" + ii + ":" + ss; 181 } 182 }, 183 184 /** 185 * 功能：获取form表单中提交的值。 186 * @param object obj 187 * @param boolean bool 返回的数据类型，默认返回json数据，若为true则返回string格式字符串 188 * @return string|obj 默认返回json数据，json对像{param1:param1Value, param2:param2Value, ...} 189 * 若bool=true则返回string类型的值格式：'param1=value1¶m2=value2...', 190 */ 191 _formData: function(obj, bool) { 192 var obj, params = {}; 193 if (typeof obj === "string") { 194 obj = $("#" + obj)[0]; 195 } else if (obj instanceof jQuery) { 196 obj = obj[0]; 197 } 198 199 //返回string格式数据值 200 if (bool) { 201 var str = ""; 202 for (var i = 0, l = obj.length; i < l; i++) { 203 if (obj[i] !== null && obj[i].type !== "submit" && obj[i].type !== "button" && obj[i].type !== "reset") { 204 str += obj[i].name; 205 str += "="; 206 str += obj[i].value === $(obj[i]).attr("placeholder") ? "" : obj[i].value; 207 str += "&"; 208 } 209 } 210 str = $._rtrim(str, "&"); 211 return str; 212 } 213 214 //返回json数据值 215 for (var i = 0, l = obj.length; i < l; i++) { 216 if (obj[i] !== null && obj[i].type !== "submit" && obj[i].type !== "button" && obj[i].type !== "reset") { 217 params[obj[i].name] = obj[i].value === $(obj[i]).attr("placeholder") ? "" : obj[i].value; 218 } 219 } 220 return params; 221 }, 222 223 /** 224 * 功能：获取cookie值，设置cookie值 225 * @param string name 名称 226 * @param string value 名称对应的值，value为空时为获取cookie中的值，value不为空设置cookie值 227 * @param Object options {expires:expires, path:path, domain:domain, secure:secure} 228 * expires：过期时间（单位：天，expries=2为2天后失效），默认为空，关闭浏览器后cookie值失效 229 * path：路径，path（如：/test/）下的所有页面共享该cookie，默认为空，当前目录 230 * domain：域，域下面所有页面都共享该cookie，默认为空，当前目录 231 * secure:安全，，默认为空不加密；若设置为"secure"，将采用加密的https传递数据 232 * @return string cookie中的值 233 */ 234 _cookie: function(name, value, options) { 235 //获取cookie中的值 236 if (value === undefined) { 237 var cValue = {}, cookies, arr; 238 if (document.cookie && document.cookie != "") { 239 cookies = document.cookie.split(";"); 240 for (var i = 0, l = cookies.length; i < l; i++) { 241 arr = cookies[i].split("="); 242 if (name !== undefined && name == $.trim(arr[0])) { 243 return decodeURIComponent(arr[1]); 244 } else { 245 cValue[arr[0]] = arr[1]; 246 } 247 } 248 } 249 return name === undefined ? cValue : ""; 250 } 251 252 //设置cookie的值 253 else { 254 var options = options || {}, expires = "", date, path, domain, secure; 255 256 //值为空时不设置cookie 257 if (value === null) { 258 return false; 259 } 260 if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) { 261 if (typeof options.expires == 'number') { 262 date = new Date(); 263 date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000)); 264 } else { 265 date = options.expires; 266 } 267 expires = '; expires=' + date.toUTCString(); 268 } 269 270 path = options.path ? ";data-path=" + options.path : ""; //路径 271 domain = options.domain ? ";domain=" + options.domain : ""; //域 272 secure = options.secure ? ";secure" : ""; //安全 273 document.cookie = [name, "=", encodeURIComponent(value), expires, path, domain, secure].join(""); 274 } 275 }, 276 277 /** 278 * 功能：删除cookie中指定的值 279 * @param string name cookie中的值 280 */ 281 _removeCookie: function(name) { 282 document.cookie = name + "=;expires=" + (new Date(0)).toGMTString(); 283 }, 284 285 /** 286 * 功能：AJAX分页 287 * @param function fn ajax提交后的回调函数 288 * @param object params 提交参数 289 * @param mix pageId 分页按钮div的id 290 */ 291 _ajaxPage: function(fn, params, pageId) { 292 params = params || {}; 293 pageId = pageId || "Paginator"; 294 var pageObj = typeof pageId === "string" ? $("#" + pageId) : pageId, 295 aObj = pageObj.find("a"), 296 des_page = pageObj.find("a.now_page").text(), 297 l = aObj.length; 298 if (l <= 0) { 299 return false; 300 } 301 params.url = params.url ? params.url : aObj[0].name.split("public").pop().split("&").shift(); //提交地址 302 params.maxPage = aObj[l - 2].innerHTML; //最大页 303 aObj.each(function() { 304 $(this).bind("click", ajaxHandle); 305 }); 306 307 function ajaxHandle() { 308 var $this = $(this); 309 params.curr_page = $this.attr("name").split("=").pop(); 310 if (params.curr_page == des_page) { 311 return false; 312 } 313 $this.removeAttr("href"); 314 //提交数据 315 $.ajax({ 316 type: "POST", 317 url: webServerPath + params.url, 318 data: params, 319 dataType: "json", 320 beforeSend: function() { 321 pageId === "Paginator" ? jQuery._loadingPop($("div.list-wrap").parent()) : jQuery._loadingPop(pageObj.parent()); 322 }, 323 success: function(data) { 324 if (data.status == 100) { 325 pageId === "Paginator" ? $("html,body").animate({scrollTop: 0}, 100) : $("html,body").animate({scrollTop: pageObj.parent().offset().top - 100}, 100); 326 fn(data.msg); 327 } else if (data.status == 200) { 328 return false; 329 } else if (data.status == 400) { 330 eval(data.callback); 331 } 332 }, 333 complete: function() { 334 $("#loadingPop").remove(); 335 } 336 }); 337 } 338 }, 339 340 //过滤字符，html标签转义为实体 341 _html2Entity: function(str) { 342 return str.replace(/[<>&"']/g, function(c) { 343 return {'<': '<', '>': '>', '&': '&', '"': '"', "'": '''}[c]; 344 }); 345 }, 346 347 //实体转义为html标签 348 _entity2Html: function(str) { 349 var arrEntities = {'lt': '<', 'gt': '>', 'nbsp': ' ', 'amp': '&', 'quot': '"'}; 350 return str.replace(/&(lt|gt|nbsp|amp|quot);/ig, function(all, t) { 351 return arrEntities[t]; 352 }); 353 }, 354 355 //获取当前鼠标的坐标 356 _mousePos: function(e) { 357 var e = e || window.event, db = document.body, dd = document.documentElement; 358 return { 359 x: e.clientX + db.scrollLeft + dd.scrollLeft, 360 y: e.clientY + db.scrollTop + dd.scrollTop 361 }; 362 }, 363 364 /** 365 * 功能：添加遮罩 366 * @param string style 遮罩的样式，默认黑色半透明 367 */ 368 _addMask: function(style) { 369 var m = $("#mask"); 370 if (m[0]) { 371 return m.show(); 372 } 373 var mask = $('<div id="mask" class="mask"></div>'), 374 str = '<iframe style="width:' + window.screen.width + 'px;height:' + document.documentElement.scrollHeight + 375 'px;position:fixed;filter:alpha(opacity=50);opacity:0.5;background-color:#000000;top:0px;left:0px;z-index:9999;' + style + 376 '" src="' + webServerPath + '/js/iframe.htm" id="maskiframe_id" name="maskiframe_name"></iframe>'; 377 return mask.html(str).appendTo("body"); 378 }, 379 380 //移除遮罩 381 _removeMask: function() { 382 return $("#mask").remove(); 383 } 384 }); 385 386 //扩展jQuery对象方法 387 $.fn.extend({ 388 /** 389 * 功能：弹窗居中 390 * @param mix dragId 触发拖动的对象或对象id 391 * @param int offset 偏移量 392 * @param boolean bool 是否添加遮罩，false不添加，默认添加遮罩 393 * @param string style 遮罩样式 394 * @return object 弹出层 395 */ 396 _alignCenter: function(offset, bool, style) { 397 offset = offset || 0; 398 var l = document.body.scrollLeft + (document.body.clientWidth - this.width()) / 2, //div宽度 399 t = document.body.scrollTop ? (document.documentElement.clientHeight - this.height()) / 2 - offset + document.body.scrollTop : 400 (document.documentElement.clientHeight - this.height()) / 2 - offset + document.documentElement.scrollTop; 401 l = l < 0 ? 100 : l; 402 t = t < 0 ? 100 : t; 403 this.css("zIndex") < 10000 ? this.css({left: l + "px", top: t + "px", position: "absolute"}) : 404 this.css({left: l + "px", top: t + "px", zIndex: 10000, position: "absolute"}); 405 //添加遮罩 406 bool === false ? null : $._addMask(style); 407 return this; 408 }, 409 410 /** 411 * 功能：鼠标拖动div层 412 * @param string dragId 点击对象id 413 * @param string cursor 拖动时鼠标style 414 * @return object 拖动层 415 */ 416 _dragHandle: function(dragId, cursor) { 417 cursor = cursor || "move"; 418 var isMousedown = false, clickLeft = 0, clickTop = 0, $this = this, 419 dragDom = typeof dragId === "string" ? $("#" + dragId).css("cursor", cursor)[0] : dragId.css("cursor", cursor)[0]; 420 $this.css("zIndex") <= 9999 ? $this.css("zIndex", 10000) : null; 421 422 //按下鼠标左键时的事件 423 function startDrag(e) { 424 e = window.event || e; // 获取当前事件对象 425 isMousedown = true; // 记录已经准备开始移动了 426 clickLeft = e.clientX - $this.offset().left; // 获取鼠标与div左边的距离 427 clickTop = e.clientY - $this.offset().top; // 获取鼠标与div头部的距离 428 document.onmouseup = endDrag; // 鼠标释放事件 429 document.onmousemove = doDrag; // 鼠标移动事件 430 } 431 432 //鼠标开始移动时的事件 433 function doDrag(e) { 434 e = window.event || e; // 获取当前事件对象 435 if (!isMousedown) { 436 return false; // 如果_IsMousedown不等于真了返回 437 } 438 // 计算偏移量 439 var posX = e.clientX - clickLeft; 440 441 // left不能超过浏览器框架左右边界 442 if (posX < 0) { 443 posX = 0; 444 } else if (posX > document.documentElement.clientWidth - $this.width()) { 445 posX = document.documentElement.clientWidth - $this.width(); 446 } 447 // top不能超过整个页面上下边界 448 var posY = e.clientY - clickTop, 449 documentY = document.body.clientHeight < document.documentElement.clientHeight ? 450 document.documentElement.clientHeight : document.body.clientHeight; 451 if (posY < 0) { 452 posY = 0; 453 } else if (posY > documentY - $this.height()) { 454 posY = documentY - $this.height(); 455 } 456 $this.css({left: posX + "px", top: posY + "px"}); 457 } 458 459 // 释放鼠标左键时的事件 460 function endDrag() { 461 if (isMousedown) { // 如果_IsMousedown还为真那么就赋值为假 462 if (navigator.appName == "Microsoft Internet Explorer") { 463 $this[0].releaseCapture(); //该函数从当前的窗口释放鼠标捕获，并恢复通常的鼠标输入处理 464 } 465 isMousedown = false; 466 document.onmousemove = null; 467 document.onmouseup = null; 468 } 469 } 470 dragDom.onmousedown = startDrag; // 鼠标按下事件 471 return $this; 472 }, 473 474 /** 475 * 功能：检查输入域中的字数 476 * @param object limitObj 提示字数div的jquery对象 477 * @param int len 限制长度 478 * @returns object 输入域textarea对象 479 */ 480 _checkTextArea: function(limitObj, len) { 481 var lw = typeof limitObj === "string" ? $("#" + limitObj) : limitObj, 482 wordLen = jQuery._strLen(jQuery._trim($(this).val())); 483 if (wordLen > len) { 484 lw.html('已经超过<span class="f14" style="color:red;font-weight:bold;">' + Math.ceil((wordLen - len) / 2) + '</span>个字'); 485 } else { 486 lw.html('还能输入<span class="f14" style="font-weight:bold;">' + Math.ceil((len - wordLen) / 2) + '</span>个字'); 487 } 488 return this; 489 } 490 }); 491 492 })(jQuery, document);
//初始还传入document，是因为封装的有些函数要多次调用document，将document对象保存到函数局部变量中，避免去全局查找。(function($, document))(jQuery,document);