【經(jīng)典源碼收藏】基于jQuery的項(xiàng)目常見(jiàn)函數(shù)封裝集合
本文實(shí)例匯總了基于jQuery的項(xiàng)目常見(jiàn)函數(shù)封裝。分享給大家供大家參考,具體如下:
/// <reference path="jquery-1.8.0.min.js" /> /* * DIV或元素居中 * @return */ jQuery.fn.mCenterDiv = function () { this.css("position", "absolute"); this.css("border", "1px solid #ccc"); this.css("top", ($(window).height() - this.height()) / 2 + $(window).scrollTop() + "px"); this.css("left", ($(window).width() - this.width()) / 2 + $(window).scrollLeft() + "px"); this.show(100); return this; }; /* * 替換字符串中所有符合的字符 * @param ASource 源字符串 * @param AFindText 待替換字符 * @param ARepText 替換后字符 * @return */ jQuery.mReplaceAll = function (ASource,AFindText, ARepText) { var raRegExp = new RegExp(AFindText, "g"); return ASource.replace(raRegExp, ARepText); }; /* * 判斷object是否空,未定義或null * @param object * @return */ jQuery.mIsNull = function (obj) { if (obj == "" || typeof(obj) == "undefined" || obj == null) { return true; } else { return false; } }; /* * 獲取URL參數(shù) * @param name 參數(shù) * @return */ jQuery.mGetUrlParam = function (name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); if (r != null) return unescape(r[2]); return null; }; /* * 乘法函數(shù),用來(lái)得到精確的乘法結(jié)果 * @param arg1 參數(shù)1 * @param arg2 參數(shù)2 * @return */ jQuery.mAccMul = function(arg1, arg2) { var m = 0, s1 = arg1.toString(), s2 = arg2.toString(); try { m += s1.split(".")[1].length } catch (e) { } try { m += s2.split(".")[1].length } catch (e) { } return Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m) } /* * 獲取隨機(jī)數(shù) * @param x 下限 * @param y 上限 * @return */ jQuery.mGetRandom = function (x, y) { return parseInt(Math.random() * (y - x + 1) + x); }; /* * 將數(shù)值四舍五入(保留2位小數(shù))后格式化成金額形式 * @param num 數(shù)值(Number或者String) * @return 金額格式的字符串,如'1,234,567.45' */ jQuery.mFormatCurrency = function(num) { num = num.toString().replace(/\$|\,/g, ''); if (isNaN(num)) num = "0"; sign = (num == (num = Math.abs(num))); num = Math.floor(num * 100 + 0.50000000001); cents = num % 100; num = Math.floor(num / 100).toString(); if (cents < 10) cents = "0" + cents; for (var i = 0; i < Math.floor((num.length - (1 + i)) / 3); i++) num = num.substring(0, num.length - (4 * i + 3)) + ',' + num.substring(num.length - (4 * i + 3)); return (((sign) ? '' : '-') + num + '.' + cents); } /* * 正則驗(yàn)證 * @param s 驗(yàn)證字符串 * @param type 驗(yàn)證類(lèi)型 money,china,mobile等 * @return */ jQuery.mCheck = function (s, type) { var objbool = false; var objexp = ""; switch (type) { case 'money': //金額格式,格式定義為帶小數(shù)的正數(shù),小數(shù)點(diǎn)后最多三位 objexp = "^[0-9]+[\.][0-9]{0,3}$"; break; case 'numletter_': //英文字母和數(shù)字和下劃線組成 objexp = "^[0-9a-zA-Z\_]+$"; break; case 'numletter': //英文字母和數(shù)字組成 objexp = "^[0-9a-zA-Z]+$"; break; case 'numletterchina': //漢字、字母、數(shù)字組成 objexp = "^[0-9a-zA-Z\u4e00-\u9fa5]+$"; break; case 'email': //郵件地址格式 objexp = "^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$"; break; case 'tel': //固話(huà)格式 objexp = /^((\d2,3)|(\d{3}\-))?(0\d2,3|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/; break; case 'mobile': //手機(jī)號(hào)碼 objexp = "^(13[0-9]|15[0-9]|18[0-9])([0-9]{8})$"; break; case 'decimal': //浮點(diǎn)數(shù) objexp = "^[0-9]+([.][0-9]+)?$"; break; case 'url': //網(wǎng)址 objexp = "(http://|https://){0,1}[\w\/\.\?\&\=]+"; break; case 'date': //日期 YYYY-MM-DD格式 objexp = /^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/; break; case 'int': //整數(shù) objexp = "^[0-9]*[1-9][0-9]*$"; break; case 'int+': //正整數(shù)包含0 objexp = "^\\d+$"; break; case 'int-': //負(fù)整數(shù)包含0 objexp = "^((-\\d+)|(0+))$"; break; case 'china': //中文 objexp = /^[\u0391-\uFFE5]+$/; break; } var re = new RegExp(objexp); if (re.test(s)) { return true; } else { return false; } }; /* * 獲取控件的值 * @param controlID 控件ID * @param controltype 類(lèi)型 如text radio * @return */ jQuery.mGetValue = function (controlID, controltype) { var objValue = ""; switch (controltype) { case 'text': //文本輸入框 objValue = $.trim($("#" + controlID + "").attr("value")); //取值去左右空格 break; case 'radio': //單選框 objValue = $("input[name='" + controlID + "']:checked").attr("value"); break; case 'select': //下拉列表 objValue = $("#" + controlID + "").attr("value"); break; case 'checkbox': //多選框 $("input[name='" + controlID + "']:checked").each(function () { objValue += $(this).val() + ","; }); break; default: break; } return objValue; }; /* * 設(shè)置控件的值 * @param controlID 控件ID * @param controltype 類(lèi)型 如text radio * @param controlvalue 綁定值 * @return */ jQuery.mSetValue = function (controlID, controltype, controlvalue) { switch (controltype) { case 'text': //文本輸入框 //$("#txtUserID").attr("value", '這是綁定內(nèi)容'); //填充內(nèi)容 //$("input[name='radio1'][value='上海']").attr("checked", true); //單選組radio:設(shè)置value='上海'的項(xiàng)目為當(dāng)前選中項(xiàng) //$("#select1").attr("value", '葡萄牙'); //下拉框select:設(shè)置value='中國(guó)'的項(xiàng)目為當(dāng)前選中項(xiàng) //$("input[name='checkbox1'][value='黑色'],[value='藍(lán)色']").attr("checked", true); //多選框:設(shè)置多個(gè)值為當(dāng)前選中項(xiàng) $("#" + controlID + "").attr("value", controlvalue); //填充內(nèi)容 break; case 'radio': //單選框 $("input[name='" + controlID + "'][value='" + controlvalue + "']").attr("checked", true); break; case 'select': //下拉列表 $("#" + controlID + "").attr("value", controlvalue); break; case 'checkbox': //多選框 $("input[name='" + controlID + "'][value='" + controlvalue + "'],[value='" + controlvalue + "']").attr("checked", true); //多選框:設(shè)置多個(gè)值為當(dāng)前選中項(xiàng) break; default: break; } }; /* * 兼容IE火狐等瀏覽器的自動(dòng)跳轉(zhuǎn) * @param url 跳轉(zhuǎn)網(wǎng)址 * @return */ jQuery.mAutoNav = function (url) { if ($.browser.msie) { var referLink = document.createElement('a'); referLink.href = url; document.body.appendChild(referLink); referLink.click(); } else { location.href = url; } }; /* * Table表格奇偶行設(shè)置顏色及移動(dòng)鼠標(biāo)行變色 * @param table 表格ID * @return */ jQuery.mTableHover = function (table) { $("#" + table).each(function () { var o = $(this); //設(shè)置偶數(shù)行和奇數(shù)行顏色 o.find("tr:even").css("background-color", "#EFF3FB"); o.find("tr:odd").css("background-color", "#FFFFFF"); //鼠標(biāo)移動(dòng)隔行變色hover用法關(guān)鍵 o.find("tr:not(:first)").hover(function () { $(this).attr("bColor", $(this).css("background-color")).css("background-color", "#E0E0E0"); }, function () { $(this).css("background-color", $(this).attr("bColor")); }); }); }; /* * gridview 隔行換色 鼠標(biāo)滑過(guò)變色 多選 * c#獲取選擇值 Request.Form.Get("chkItem") * @param objgridview ID * @return */ jQuery.mGridview = function (objgridview) { var headcolor = { background: '#E0ECFF', color: '#333' }; var normalcolor = { background: '#f7f6f3' }; var altercolor = { background: '#EDF1F8' }; var hovercolor = { background: '#89A5D1' }; var selectcolor = { background: '#ACBFDF' }; var nullcolor = {}; //get obj id var gridviewId = "#" + objgridview; //even $(gridviewId + ">tbody tr:even").css(normalcolor); //first $(gridviewId + ">tbody tr:first").css(nullcolor).css(headcolor); //odd $(gridviewId + ">tbody tr:odd").css(altercolor); //hover $(gridviewId + ">tbody tr").click(function () { var cb = $(this).find("input:checkbox"); var chf = typeof (cb.attr("checked")) == "undefined" ? true : false; cb.attr("checked", chf); var expr1 = gridviewId + ' >tbody >tr >td >input:checkbox:checked'; var expr2 = gridviewId + ' >tbody >tr >td >input:checkbox'; var selectAll = $(expr1).length == $(expr2).length; $('#chkAll').attr('checked', selectAll); }).hover(function () { $(this).css(hovercolor); }, function () { $(gridviewId + ">tbody tr:even").css(normalcolor); $(gridviewId + ">tbody tr:first").css(nullcolor).css(headcolor); $(gridviewId + ">tbody tr:odd").css(altercolor); }); //all check $("#chkAll").click(function () { $(gridviewId + '>tbody >tr >td >input:checkbox:visible').attr('checked', this.checked); }); //check status $(gridviewId + ' >tbody >tr >td >input:checkbox').click(function () { var cb = $(this); var chf = typeof (cb.attr("checked")) == "undefined" ? true : false; cb.attr("checked", chf); var expr1 = gridviewId + ' >tbody >tr >td >input:checkbox:checked'; var expr2 = gridviewId + ' >tbody >tr >td >input:checkbox'; var selectAll = $(expr1).length == $(expr2).length; $('#chkAll').attr('checked', selectAll); }); }; /* * 屏幕居中顯示處理進(jìn)度 * @param info 顯示文字 * @param type 方式 0遮罩 1不遮罩 * @param typepic 圖片 0:load 1:ok 2:error * @return */ jQuery.mMaskLoad = function (info, type, typepic) { var pic = ""; switch (typepic) { case 0: // loading pic = "./Images/loading.gif"; break; case 1: // ok pic = "./Images/right.png"; break; case 2: // error pic = "./Images/error.png"; break; default: //其他任何值時(shí) pic = "./Images/loading.gif"; break; } if (type == 0) { $("<div class=\"datagrid-mask\"></div>").css( { display: "block", width: "100%", position: "absolute", left: "0", top: "0", opacity: "0.3", height: "100%", filter: "alpha(opacity=30)", background: "#ccc" }).appendTo("body"); }; $("<div class=\"datagrid-mask-msg\"></div>").css( { position: "absolute", top: "50%", padding: "12px 5px 10px 30px", width: "auto", height: "16px", border: "1px solid #D1D1D1", background: "#ffffff url('" + pic + "') no-repeat scroll 5px center", display: "block", left: ($(document.body).outerWidth(true) - 190) / 2, top: ($(window).height() - 45) / 2 }).html(info).appendTo("body"); }; /* * 屏幕居中隱藏處理進(jìn)度 * @return */ jQuery.mMaskLoadClose = function () { $(".datagrid-mask").remove(); $(".datagrid-mask-msg").remove(); }; /* * 控件后創(chuàng)建SPAN作為T(mén)IP提示 * @param o 用this * @param tip 提示文字 * @param typepic 圖片 0:load 1:ok 2:error * @return */ jQuery.mTip = function (o, tip, typepic) { var pic = ""; switch (typepic) { case 0: // loading pic = "./Images/loading.gif"; break; case 1: // ok pic = "./Images/right.png"; break; case 2: // error pic = "./Images/error.png"; break; default: //其他任何值時(shí) pic = "./Images/loading.gif"; break; } var eTip = document.createElement("span"); var objid = $(o).attr("id") + "_tipDiv"; var value = $(o).val(); //絕對(duì)路徑 var x = $(o).offset().top; var y = $(o).offset().left; var w = $(o).width(); var h = $(o).height(); eTip.setAttribute("id", objid); try { document.body.appendChild(eTip); } catch (e) { } $("#" + objid).hide(); $("#" + objid).css({ top: x, left: y + w + 10, height: h, position: "absolute" }); $("#" + objid).html("<img src=\"" + pic + "\" style=\"vertical-align:bottom;margin-right:5px;\">" + tip); $("#" + objid).show(); }; /** * ajax post提交 * @param url * @param param * @param datat 為html,json,text * @param callback 回調(diào)函數(shù) function callBack(data) * @return */ jQuery.mJqAjax = function (url, param, datat, callback) { $.ajax({ type: "post", url: url, data: param, dataType: datat, success: callback, error: function () { } }); };
/// <reference path="jquery-1.8.3.min.js" /> /*********************************************************************/ /***************************Jquery 擴(kuò)展****************************/ /*********************************************************************/ jQuery.mIsNull = function (obj) { if (obj == "" || typeof (obj) == "undefined" || obj == null) { return true; } else { return false; } }; jQuery.mCheckNull = function (id, tipid, nullmess, ctype) { var str = $.mGetValue(id, ctype); var tid = ($.mIsNull(tipid)) ? id : tipid; var obj = ($.mIsNull(tipid)) ? $.mTip : $.mTipCustom; if ($.mIsNull(str)) { obj("#" + tid, nullmess, 2); } else { obj("#" + tid, "", 1); } }; jQuery.mCheckNullAndReg = function (id, tipid, nullmess, regmess, ctype, rtype) { var str = $.mGetValue(id, ctype); var tid = ($.mIsNull(tipid)) ? id : tipid; var obj = ($.mIsNull(tipid)) ? $.mTip : $.mTipCustom; if ($.mIsNull(str)) { obj("#" + tid, nullmess, 2); } else { if ($.mCheck(str, rtype)) { obj("#" + tid, "", 1); } else { obj("#" + tid, regmess, 2); } } }; jQuery.mCheck = function (s, type) { var objbool = false; var objexp = ""; switch (type) { case 'money': //金額格式,格式定義為帶小數(shù)的正數(shù),小數(shù)點(diǎn)后最多三位 objexp = "^[0-9]+[\.][0-9]{0,3}$"; break; case 'numletter_': //英文字母和數(shù)字和下劃線組成 objexp = "^[0-9a-zA-Z\_]+$"; break; case 'numletter': //英文字母和數(shù)字組成 objexp = "^[0-9a-zA-Z]+$"; break; case 'numletterchina': //漢字、字母、數(shù)字組成 objexp = "^[0-9a-zA-Z\u4e00-\u9fa5]+$"; break; case 'email': //郵件地址格式 objexp = "^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$"; break; case 'tel': //固話(huà)格式 objexp = /^((\d2,3)|(\d{3}\-))?(0\d2,3|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/; break; case 'mobile': //手機(jī)號(hào)碼 objexp = "^(13[0-9]|15[0-9]|18[0-9])([0-9]{8})$"; break; case 'decimal': //浮點(diǎn)數(shù) objexp = "^[0-9]+([.][0-9]+)?$"; break; case 'url': //網(wǎng)址 objexp = "(http://|https://){0,1}[\w\/\.\?\&\=]+"; break; case 'date': //日期 YYYY-MM-DD格式 objexp = /^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/; break; case 'int': //整數(shù) objexp = "^[0-9]*[1-9][0-9]*$"; break; case 'int+': //正整數(shù)包含0 objexp = "^\\d+$"; break; case 'int-': //負(fù)整數(shù)包含0 objexp = "^((-\\d+)|(0+))$"; break; case 'china': //中文 objexp = /^[\u0391-\uFFE5]+$/; break; } var re = new RegExp(objexp); if (re.test(s)) { return true; } else { return false; } }; jQuery.mTip = function (o, tip, typepic) { var pic = ""; switch (typepic) { case 0: // loading pic = "/images/publicNew/loading.gif"; break; case 1: // ok pic = "/images/publicNew/right.png"; break; case 2: // error pic = "/images/publicNew/error.png"; break; default: //其他任何值時(shí) pic = "/images/publicNew/onLoad.gif"; break; } var eTip = document.createElement("span"); var objid = $(o).attr("id") + "_tipDiv"; var value = $(o).val(); //絕對(duì)路徑 var x = $(o).offset().top; var y = $(o).offset().left; var w = $(o).width(); var h = $(o).height(); eTip.setAttribute("id", objid); try { document.body.appendChild(eTip); } catch (e) { } $("#" + objid).hide(); $("#" + objid).css({ top: x, left: y + w + 10, height: h, position: "absolute" }); $("#" + objid).html("<img src=\"" + pic + "\" style=\"vertical-align:bottom;margin-right:5px;\">" + tip); $("#" + objid).show(); }; jQuery.mTipCustom = function (o, tip, typepic) { var pic = ""; switch (typepic) { case 0: // loading pic = "/images/publicNew/loading.gif"; break; case 1: // ok pic = "/images/publicNew/right.png"; break; case 2: // error pic = "/images/publicNew/error.png"; break; default: //其他任何值時(shí) pic = "/images/publicNew/onLoad.gif"; break; } $("#" + o).html("<img src=\"" + pic + "\" style=\"vertical-align:bottom;margin-right:5px;\">" + tip); $("#" + o).show(); }; jQuery.mGetValue = function (controlID, controltype) { var objValue = ""; switch (controltype) { case 'text': //文本輸入框 objValue = $.trim($("#" + controlID + "").attr("value")); //取值去左右空格 break; case 'radio': //單選框 objValue = $("input[name='" + controlID + "']:checked").attr("value"); break; case 'select': //下拉列表 objValue = $("#" + controlID + "").attr("value"); break; case 'checkbox': //多選框 $("input[name='" + controlID + "']:checked").each(function () { objValue += $(this).val() + ","; }); break; default: break; } return objValue; }; /** * ajax post提交 * @param url * @param param * @param datat 為html,json,text * @param callback 回調(diào)函數(shù) function callBack(data) * @return */ jQuery.mJqAjax = function (url, param, datat, callback) { $.ajax({ type: "post", url: url, data: param, dataType: datat, success: callback, error: function () { } }); };
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題:《jquery中Ajax用法總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見(jiàn)經(jīng)典特效匯總》、《jQuery動(dòng)畫(huà)與特效用法總結(jié)》、《jquery選擇器用法總結(jié)》及《jQuery常用插件及用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- jQuery常用知識(shí)點(diǎn)總結(jié)以及平時(shí)封裝常用函數(shù)
- Jquery作者John Resig自己封裝的javascript 常用函數(shù)
- 基于jquery封裝的一個(gè)js分頁(yè)
- jquery數(shù)組封裝使用方法分享(jquery數(shù)組遍歷)
- Jquery封裝tab自動(dòng)切換效果的具體實(shí)現(xiàn)
- jquery自動(dòng)將form表單封裝成json的具體實(shí)現(xiàn)
- jquery datatable后臺(tái)封裝數(shù)據(jù)示例代碼
- jQuery焦點(diǎn)圖切換特效插件封裝實(shí)例
- 基于jquery的用dl模擬實(shí)現(xiàn)可自定義樣式的SELECT下拉列表(已封裝)
- jQueryUI的Dialog的簡(jiǎn)單封裝
相關(guān)文章
jQuery實(shí)現(xiàn)淡入淡出二級(jí)下拉導(dǎo)航菜單的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)淡入淡出二級(jí)下拉導(dǎo)航菜單的方法,涉及jquery簡(jiǎn)單操作頁(yè)面元素展開(kāi)與隱藏的實(shí)現(xiàn)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-08-08基于jquery的lazy loader插件實(shí)現(xiàn)圖片的延遲加載[簡(jiǎn)單使用]
當(dāng)網(wǎng)站上有大量圖片要展示的話(huà),如果一次把所有的圖片都加載出來(lái)的話(huà),這勢(shì)必會(huì)影響網(wǎng)站的加載速度,給用戶(hù)帶來(lái)比較差的體驗(yàn)。2011-05-05使用jQuery實(shí)現(xiàn)圖片遮罩半透明墜落遮擋
這篇文章主要介紹了使用jQuery實(shí)現(xiàn)圖片遮罩半透明墜落遮擋,效果非常棒,小伙伴們做相冊(cè)的時(shí)候可以直接拿走使用。2015-03-03jQuery簡(jiǎn)單實(shí)現(xiàn)iframe的高度根據(jù)頁(yè)面內(nèi)容自適應(yīng)的方法
這篇文章主要介紹了jQuery簡(jiǎn)單實(shí)現(xiàn)iframe的高度根據(jù)頁(yè)面內(nèi)容自適應(yīng)的方法,給出了2種簡(jiǎn)單實(shí)現(xiàn)方法,涉及jQuery針對(duì)頁(yè)面高度的動(dòng)態(tài)獲取與設(shè)置相關(guān)技巧,需要的朋友可以參考下2016-08-08jQuery設(shè)置div一直在頁(yè)面頂部顯示的方法
如何讓div一直在頁(yè)面頂部,這種類(lèi)似的效果大家都有見(jiàn)過(guò)的,實(shí)現(xiàn)的方法也有很多,在本文為大家詳細(xì)介紹下使用jquery是如何實(shí)現(xiàn)的,感興趣的朋友不要錯(cuò)過(guò)2013-10-10使用jQuery時(shí)Form表單元素ID和name命名大忌
將自己的表單元素ID和name命名為了nodeName,在chrome瀏覽器下報(bào)錯(cuò),結(jié)果發(fā)現(xiàn)是表單元素命名的原因2014-03-03使用ajax+jqtransform實(shí)現(xiàn)動(dòng)態(tài)加載select
本文給大家介紹了使用ajax+jqtransform實(shí)現(xiàn)動(dòng)態(tài)加載select,效果非常的不錯(cuò),這里推薦給大家,有需要的小伙伴直接拿走使用。2014-12-12利用JQuery+EasyDrag 實(shí)現(xiàn)彈出可拖動(dòng)的Div,同時(shí)向Div傳值,然后返回Div選中的值
JQuery是一個(gè)優(yōu)秀的Javascript類(lèi)庫(kù),使得我們?cè)?jīng)對(duì)JavaScript的痛恨不再,越來(lái)越喜歡上了JavaScript,而且更好的是他的plugin眾多.2009-10-10