【经典源码收藏】基于jQuery的项目常见函数封装集合


Posted in Javascript onJune 07, 2016

本文实例汇总了基于jQuery的项目常见函数封装。分享给大家供大家参考,具体如下:

/// <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参数
* @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.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)
}
/*
* 获取随机数
* @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",
      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");
};
/*
* 屏幕居中隐藏处理进度
* @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().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 回调函数 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 扩展****************************/
/*********************************************************************/
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().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: //其他任何值时
      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,
    success: callback,
    error: function () { }
  });
};

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
优化javascript的执行效率一些方法总结
Dec 25 Javascript
JavaScript中合并数组的N种方法
Sep 16 Javascript
JS对象与json字符串格式转换实例
Oct 28 Javascript
JavaScript常用验证函数实例汇总
Nov 25 Javascript
JavaScript中的null和undefined区别介绍
Jan 01 Javascript
CSS或者JS实现鼠标悬停显示另一元素
Jan 22 Javascript
javascript绘制漂亮的心型线效果完整实例
Feb 02 Javascript
js css实现垂直方向自适应的三角提示菜单
Jun 26 Javascript
js实现简单的网页换肤效果
Jan 18 Javascript
JavaScript实现二叉树定义、遍历及查找的方法详解
Dec 20 Javascript
angular2模块和共享模块详解
Apr 08 Javascript
js实现网页同时进行多个倒计时功能
Feb 25 Javascript
全面解析DOM操作和jQuery实现选项移动操作代码分享
Jun 07 #Javascript
全面解析JavaScript里的循环方法之forEach,for-in,for-of
Apr 20 #Javascript
Javascript之Date对象详解
Jun 07 #Javascript
批量下载对路网图片并生成html的实现方法
Jun 07 #Javascript
javascript之Boolean类型对象
Jun 07 #Javascript
jQuery简单实现仿京东分类导航层效果
Jun 07 #Javascript
javascript之Array 数组对象详解
Jun 07 #Javascript
You might like
星际中的相关伤害
2020/03/04 星际争霸
PHP 中关于ord($str)&amp;gt;0x80的详细说明
2012/09/23 PHP
PHP简单的MVC框架实现方法
2015/12/01 PHP
利用location.hash实现跨域iframe自适应
2010/05/04 Javascript
js 输出内容到新窗口具体实现代码
2013/05/31 Javascript
js模拟点击以提交表单为例兼容主流浏览器
2013/11/29 Javascript
Javascript将字符串日期格式化为yyyy-mm-dd的方法
2016/10/27 Javascript
vue2.X组件学习心得(新手必看篇)
2017/07/05 Javascript
微信小程序开发之animation循环动画实现的让云朵飘效果
2017/07/14 Javascript
angular项目中bootstrap-datetimepicker时间插件的使用示例
2018/03/15 Javascript
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
2018/04/17 jQuery
微信小程序实现人脸识别登陆的示例代码
2019/04/02 Javascript
vue实现拖拽的简单案例 不超出可视区域
2019/07/25 Javascript
ElementUI radio组件选中小改造
2019/08/12 Javascript
Python多进程并发(multiprocessing)用法实例详解
2015/06/02 Python
python 实现删除文件或文件夹实例详解
2016/12/04 Python
Python3使用PyQt5制作简单的画板/手写板实例
2017/10/19 Python
Linux CentOS7下安装python3 的方法
2018/01/21 Python
对python读取zip压缩文件里面的csv数据实例详解
2019/02/08 Python
使用python实现mqtt的发布和订阅
2019/05/05 Python
Django打印出在数据库中执行的语句问题
2019/07/25 Python
Python ArgumentParse的subparser用法说明
2020/04/20 Python
简述 Python 的类和对象
2020/08/21 Python
PyTorch预训练Bert模型的示例
2020/11/17 Python
详解css3 Transition属性(平滑过渡菜单栏案例)
2017/09/05 HTML / CSS
HTML5中drawImage用法分析
2014/12/01 HTML / CSS
英国排名第一的礼品体验公司:Red Letter Days
2018/08/16 全球购物
音乐学个人的自荐书范文
2013/11/26 职场文书
给领导的致歉信范文
2014/01/13 职场文书
国际贸易专业求职信
2014/06/04 职场文书
服务行业演讲稿
2014/09/02 职场文书
意外伤害赔偿协议书范本
2014/09/28 职场文书
2014年应急管理工作总结
2014/11/26 职场文书
秋季运动会开幕词
2015/01/28 职场文书
工程项目经理岗位职责
2015/02/02 职场文书
优秀党员主要事迹范文
2015/11/05 职场文书