【经典源码收藏】基于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 相关文章推荐
xml和web特殊字符
Apr 28 Javascript
JQuery 文本框使用小结
May 22 Javascript
ExtJS判断IE浏览器类型的方法
Feb 10 Javascript
JavaScript中对象属性的添加和删除示例
May 12 Javascript
jquery 根据name名获取元素的value值
Feb 27 Javascript
js只执行1次的函数示例
Jul 20 Javascript
jQuery自定义多选下拉框效果
Jun 19 jQuery
让你彻底掌握es6 Promise的八段代码
Jul 26 Javascript
基于Vue单文件组件详解
Sep 15 Javascript
vue 全选与反选的实现方法(无Bug 新手看过来)
Feb 09 Javascript
js canvas实现画图、滤镜效果
Nov 27 Javascript
Openlayers绘制聚合标注
Sep 28 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
php教程 插件机制在PHP中实现方案
2012/11/02 PHP
无刷新动态加载数据 滚动条加载适合评论等页面
2013/10/16 PHP
php计算几分钟前、几小时前、几天前的几个函数、类分享
2014/04/09 PHP
ThinkPHP自动填充实现无限级分类的方法
2014/08/22 PHP
php实现SAE上使用storage上传与下载文件的方法
2015/06/29 PHP
PHP文字转图片功能原理与实现方法分析
2017/08/31 PHP
浅谈php使用curl模拟多线程发送请求
2019/03/08 PHP
Laravel5.1 框架控制器基础用法实例分析
2020/01/04 PHP
在Z-Blog中运行代码[html][/html](纯JS版)
2007/03/25 Javascript
js实现的黑背景灰色二级导航菜单效果代码
2015/08/24 Javascript
基于jquery实现鼠标左右拖动滑块滑动附源码下载
2015/12/23 Javascript
百度搜索框智能提示案例jsonp
2016/11/28 Javascript
详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
2017/01/10 Javascript
性能优化之代码优化页面加载速度
2017/03/01 Javascript
self.attachevent is not a function的解决方法
2017/04/04 Javascript
jQuery查找dom的几种方法效率详解
2017/05/17 jQuery
微信小程序联网请求的轮播图
2017/07/07 Javascript
详解Angular-ui-BootStrap组件的解释以及使用
2018/07/13 Javascript
Node.js JSON模块用法实例分析
2019/01/04 Javascript
element-ui table组件如何使用render属性的实现
2019/11/04 Javascript
VUE实现Studio管理后台之鼠标拖放改变窗口大小
2020/03/04 Javascript
Python+matplotlib绘制不同大小和颜色散点图实例
2018/01/19 Python
Python读取txt文件数据的方法(用于接口自动化参数化数据)
2018/06/27 Python
Python内置random模块生成随机数的方法
2019/05/31 Python
python使用sessions模拟登录淘宝的方式
2019/08/16 Python
Python MySQL 日期时间格式化作为参数的操作
2020/03/02 Python
pytorch中的weight-initilzation用法
2020/06/24 Python
CSS3实现线性渐变用法示例代码详解
2020/08/07 HTML / CSS
英国性能汽车零件和发动机配件在线:Maxpeedingrods
2019/11/05 全球购物
意大利买卖二手奢侈品网站:LAMPOO
2020/06/03 全球购物
水利学院求职自荐书
2014/02/01 职场文书
应届毕业生求职信
2014/05/26 职场文书
禁毒宣传标语
2014/06/19 职场文书
2014年仓库管理员工作总结
2014/11/18 职场文书
2014年社区妇联工作总结
2014/12/02 职场文书
2015年老干部工作总结
2015/04/23 职场文书