【经典源码收藏】基于jQuery的项目常见函数封装
网络编程 2021-07-04 19:59www.168986.cn编程入门
这篇文章主要介绍了基于jQuery的项目常见函数封装集合,分析 jQuery常见功能的函数封装,便于在项目开发中直接使用,需要的朋友可以参考下
本文实例汇总了基于jQuery的项目常见函数封装。分享给大家供大家参考,具体如下
/// <reference path="jquery-1.8.0.min.js" /> / DIV或元素居中 @return / jQuery.fn.mCenterDiv = function () { this.css("position", "absolute"); this.css("border", "1px solid #c"); this.css("", ($(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参数 @param name 参数 @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; }; / 乘法函数,用来得到精确的乘法结果 @param arg1 参数1 @param arg2 参数2 @return / jQuery.mAMul = 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) } / 获取随机数 @param x 下限 @param y 上限 @return / jQuery.mGetRandom = function (x, y) { return parseInt(Math.random() (y - x + 1) + x); }; / 将数值四舍五入(保留2位小数)后格式化成金额形式 @param num 数值(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); } / 正则验证 @param s 验证字符串 @param type 验证类型 money,china,mobile等 @return / jQuery.mCheck = function (s, type) { var objbool = false; var objexp = ""; switch (type) { case 'money': //金额格式,格式定义为带小数的正数,小数点后最多三位 objexp = "^[0-9]+[\.][0-9]{0,3}$"; break; case 'numletter_': //英文字母和数字和下划线组成 objexp = "^[0-9a-zA-Z\_]+$"; break; case 'numletter': //英文字母和数字组成 objexp = "^[0-9a-zA-Z]+$"; break; case 'numletterchina': //汉字、字母、数字组成 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': //固话格式 objexp = /^((\d2,3)|(\d{3}\-))?(0\d2,3|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/; break; case 'mobile': //手机号码 objexp = "^(13[0-9]|15[0-9]|18[0-9])([0-9]{8})$"; break; case 'decimal': //浮点数 objexp = "^[0-9]+([.][0-9]+)?$"; break; case 'url': //网址 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': //整数 objexp = "^[0-9][1-9][0-9]$"; break; case 'int+': //正整数包含0 objexp = "^\\d+$"; break; case 'int-': //负整数包含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 类型 如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; }; / 设置控件的值 @param controlID 控件ID @param controltype 类型 如text radio @param controlvalue 绑定值 @return / jQuery.mSetValue = function (controlID, controltype, controlvalue) { switch (controltype) { case 'text': //文本输入框 //$("#txtUserID").attr("value", '这是绑定内容'); //填充内容 //$("input[name='radio1'][value='上海']").attr("checked", true); //单选组radio设置value='上海'的项目为当前选中项 //$("#select1").attr("value", '葡萄牙'); //下拉框select设置value='中国'的项目为当前选中项 //$("input[name='checkbox1'][value='黑色'],[value='蓝色']").attr("checked", true); //多选框设置多个值为当前选中项 $("#" + controlID + "").attr("value", controlvalue); //填充内容 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); //多选框设置多个值为当前选中项 break; default: break; } }; / 兼容IE火狐等浏览器的自动跳转 @param url 跳转网址 @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表格奇偶行设置颜色及移动鼠标行变色 @param table 表格ID @return / jQuery.mTableHover = function (table) { $("#" + table).each(function () { var o = $(this); //设置偶数行和奇数行颜色 o.find("tr:even").css("background-color", "#EFF3FB"); o.find("tr:odd").css("background-color", "#FFFFFF"); //鼠标移动隔行变色hover用法关键 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 隔行换色 鼠标滑过变色 多选 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); }); }; / 屏幕居中显示处理进度 @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: //其他任何值时 pic = "./Images/loading.gif"; break; } if (type == 0) { $("<div class=\"datagrid-mask\"></div>").css( { display: "block", width: "100%", position: "absolute", left: "0", : "0", opacity: "0.3", height: "100%", filter: "alpha(opacity=30)", background: "#c" }).appendTo("body"); }; $("<div class=\"datagrid-mask-msg\"></div>").css( { position: "absolute", : "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, : ($(window).height() - 45) / 2 }).html(info).appendTo("body"); }; / 屏幕居中隐藏处理进度 @return / jQuery.mMaskLoadClose = function () { $(".datagrid-mask").remove(); $(".datagrid-mask-msg").remove(); }; / 控件后创建SPAN作为TIP提示 @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: //其他任何值时 pic = "./Images/loading.gif"; break; } var eTip = document.createElement("span"); var objid = $(o).attr("id") + "_tipDiv"; var value = $(o).val(); //绝对路径 var x = $(o).offset().; 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({ : 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 回调函数 function callBack(data) @return / jQuery.mJqAjax = function (url, param, datat, callback) { $.ajax({ type: "post", url: url, data: param, dataType: datat, suess: callback, error: function () { } }); };
/// <reference path="jquery-1.8.3.min.js" /> // /Jquery 扩展/ // 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': //金额格式,格式定义为带小数的正数,小数点后最多三位 objexp = "^[0-9]+[\.][0-9]{0,3}$"; break; case 'numletter_': //英文字母和数字和下划线组成 objexp = "^[0-9a-zA-Z\_]+$"; break; case 'numletter': //英文字母和数字组成 objexp = "^[0-9a-zA-Z]+$"; break; case 'numletterchina': //汉字、字母、数字组成 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': //固话格式 objexp = /^((\d2,3)|(\d{3}\-))?(0\d2,3|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/; break; case 'mobile': //手机号码 objexp = "^(13[0-9]|15[0-9]|18[0-9])([0-9]{8})$"; break; case 'decimal': //浮点数 objexp = "^[0-9]+([.][0-9]+)?$"; break; case 'url': //网址 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': //整数 objexp = "^[0-9][1-9][0-9]$"; break; case 'int+': //正整数包含0 objexp = "^\\d+$"; break; case 'int-': //负整数包含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: //其他任何值时 pic = "/images/publicNew/onLoad.gif"; break; } var eTip = document.createElement("span"); var objid = $(o).attr("id") + "_tipDiv"; var value = $(o).val(); //绝对路径 var x = $(o).offset().; 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({ : 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: //其他任何值时 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 回调函数 function callBack(data) @return / jQuery.mJqAjax = function (url, param, datat, callback) { $.ajax({ type: "post", url: url, data: param, dataType: datat, suess: callback, error: function () { } }); };
更多关于jQuery相关内容感兴趣的读者可查看本站专题《》、《》、《》、《》、《》、《》、《》及《》
希望本文所述对大家jQuery程序设计有所帮助。
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程