首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

【经典源码收藏】基于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程序设计有所帮助。

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

- Author -

smartsmile2012

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
在JavaScript里嵌入大量字符串常量的实现方法
Jul 07 Javascript
JavaScript里实用的原生API汇总
May 14 Javascript
AngularJS 使用$sce控制代码安全检查
Jan 05 Javascript
jQuery实现联动下拉列表查询框
Jan 04 Javascript
javascript 使用正则test( )第一次是 true,第二次是false
Feb 22 Javascript
Node.js  事件循环详解及实例
Aug 06 Javascript
微信小程序自定义select下拉选项框组件的实现代码
Aug 28 Javascript
Vue实现美团app的影院推荐选座功能【推荐】
Aug 29 Javascript
electron实现静默打印的示例代码
Aug 12 Javascript
Vue项目vscode 安装eslint插件的方法(代码自动修复)
Apr 15 Javascript
vue基于better-scroll仿京东分类列表
Jun 30 Javascript
JS实现密码框效果
Sep 10 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
担保书(46) 意向书(73) 委托书(259) 承诺书(369) 聘任书(31) 竞聘书(31) 检举信(8) 广告词(105) 公证书(45) 主持词(345)
You might like
11个PHPer必须要了解的编程规范
2014/09/22 PHP
PHP如何将log信息写入服务器中的log文件
2015/07/29 PHP
js截取固定长度的中英文字符的简单实例
2013/11/22 Javascript
Javascript中的异步编程规范Promises/A详细介绍
2014/06/06 Javascript
浅析JQuery中的html(),text(),val()区别
2014/09/01 Javascript
JS JQUERY实现滚动条自动滚到底的方法
2015/01/09 Javascript
node-webkit打包成exe文件被360误报木马的解决方法
2015/03/11 Javascript
JS实现的倒计时效果实例(2则实例)
2015/12/23 Javascript
JavaScript面向对象程序设计教程
2016/03/29 Javascript
JS图片定时翻滚效果实现方法
2016/06/21 Javascript
深入浅析Node.js单线程模型
2017/07/10 Javascript
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结（附代码）
2017/08/18 Javascript
浅谈Angular 观察者模式理解
2018/11/01 Javascript
vue elementUI使用tabs与导航栏联动
2019/06/21 Javascript
vue 实现模糊检索并根据其他字符的首字母顺序排列
2019/09/19 Javascript
微信小程序地图实现展示线路
2020/07/29 Javascript
Vue实现可移动水平时间轴
2020/06/29 Javascript
python用来获得图片exif信息的库实例分析
2015/03/16 Python
Python实例一个类背后发生了什么
2016/02/09 Python
解决csv.writer写入文件有多余的空行问题
2018/07/06 Python
wxPython+Matplotlib绘制折线图表
2019/11/19 Python
利用matplotlib实现根据实时数据动态更新图形
2019/12/13 Python
python操作gitlab API过程解析
2019/12/27 Python
Python线程协作threading.Condition实现过程解析
2020/03/12 Python
CSS3 制作绽放的莲花采用效果叠加实现
2013/01/31 HTML / CSS
CSS3+JavaScript实现炫酷呼吸效果的示例代码
2020/06/15 HTML / CSS
Ashford台湾：以折扣价提供奢华的男女用表款
2019/12/04 全球购物
大学生个人实习的自我评价
2014/02/15 职场文书
国家税务局干部作风整顿整改措施
2014/09/18 职场文书
党的群众路线教育实践活动个人自我剖析材料
2014/10/07 职场文书
教育项目合作协议书格式
2014/10/17 职场文书
搞笑婚庆主持词
2015/06/29 职场文书
《学会看病》教学反思
2016/02/17 职场文书
微信小程序用户授权最佳实践指南
2021/05/08 Javascript
MySQL中日期型单行函数代码详解
2021/06/21 MySQL
如何使用pdb进行Python调试
2021/06/30 Python