【經(jīng)典源碼收藏】基于jQuery的項目常見函數(shù)封裝集合

更新時間：2016年06月07日 11:47:21 作者：smartsmile2012

這篇文章主要介紹了基于jQuery的項目常見函數(shù)封裝集合,總結(jié)分析 jQuery常見功能的函數(shù)封裝,便于在項目開發(fā)中直接使用,需要的朋友可以參考下

本文實例匯總了基于jQuery的項目常見函數(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ù)，用來得到精確的乘法結(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)
}
/*
* 獲取隨機數(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);
}
/*
* 正則驗證
* @param s 驗證字符串
* @param type 驗證類型 money,china,mobile等
* @return
*/
jQuery.mCheck = function (s, type) {
  var objbool = false;
  var objexp = "";
  switch (type) {
    case 'money': //金額格式,格式定義為帶小數(shù)的正數(shù)，小數(shù)點后最多三位
      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': //固話格式
      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': //浮點數(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-': //負整數(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 類型 如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", '這是綁定內(nèi)容'); //填充內(nèi)容
      //$("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); //填充內(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); //多選框：設置多個值為當前選中項
      break;
    default:
      break;
  }
};
/*
* 兼容IE火狐等瀏覽器的自動跳轉(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表格奇偶行設置顏色及移動鼠標行變色
* @param table 表格ID
* @return
*/
jQuery.mTableHover = function (table) {
  $("#" + table).each(function () {
    var o = $(this);
    //設置偶數(shù)行和奇數(shù)行顏色
    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();
};
/*
* 控件后創(chuàng)建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 回調(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 擴展****************************/
/*********************************************************************/
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ù)點后最多三位
      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': //固話格式
      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': //浮點數(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-': //負整數(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: //其他任何值時
      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 回調(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 () { }
  });
};

更多關于jQuery相關內(nèi)容感興趣的讀者可查看本站專題：《jquery中Ajax用法總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery擴展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結(jié)》、《jquery選擇器用法總結(jié)》及《jQuery常用插件及用法總結(jié)》

希望本文所述對大家jQuery程序設計有所幫助。

您可能感興趣的文章:

jQuery 綁定事件到動態(tài)創(chuàng)建的元素上的方法實例
這篇文章介紹了jQuery 綁定事件到動態(tài)創(chuàng)建的元素上的方法實例，有需要的朋友可以參考一下
2013-08-08
jQuery select的操作實現(xiàn)代碼
jQuery對select的操作的實際應用代碼。方便大家學習jquery
2009-05-05
jQuery常用數(shù)據(jù)處理方法小結(jié)
這篇文章主要介紹了jQuery常用數(shù)據(jù)處理方法,實例總結(jié)了trim、param、isArray、isFunction、each等jQuery常用的數(shù)據(jù)處理方法,具有一定參考借鑒價值,需要的朋友可以參考下
2015-02-02
jquery動態(tài)加載圖片數(shù)據(jù)練習代碼
這里我只是隨便做了下，上面是照片列表和兩個按鈕，單擊小圖片下面顯示大圖片，當點擊按鈕時可以查看下一頁，上一頁的圖片。
2011-08-08
使用隱藏的new來創(chuàng)建對象
JQ中發(fā)現(xiàn)的，jQuery.Event類。估計作者是為了減少代碼量。定義一個類，但不用new關鍵字去創(chuàng)建該類對象，而使用方法調(diào)用()方式去創(chuàng)建該對象。
2011-03-03
jQuery中:submit選擇器用法實例
這篇文章主要介紹了jQuery中:submit選擇器用法,實例分析了:submit選擇器的功能、定義及匹配提交按鈕的使用技巧,需要的朋友可以參考下
2015-01-01
jquery實現(xiàn)異步文件上傳ajaxfileupload.js
這篇文章主要為大家詳細介紹了jquery實現(xiàn)異步文件上傳ajaxfileupload.js，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-10-10
利用jquery實現(xiàn)驗證輸入的是否是數(shù)字、小數(shù)，包含保留幾位小數(shù)
本文主要介紹了利用jquery實現(xiàn)驗證輸入的是否是數(shù)字、小數(shù)，包含保留幾位小數(shù)，代碼清晰，容易理解。有需要的朋友可以參考下
2016-12-12
jQuery通過控制節(jié)點實現(xiàn)僅在前臺通過get方法完成參數(shù)傳遞
這篇文章主要介紹了jQuery通過控制節(jié)點實現(xiàn)僅在前臺通過get方法完成參數(shù)傳遞的功能,實例分析了jQuery操作節(jié)點的技巧與控制前臺get方法傳遞參數(shù)的用法,具有一定參考借鑒價值,需要的朋友可以參考下
2015-02-02
jQuery實現(xiàn)下拉框功能實例代碼
這篇文章主要介紹了jQuery實現(xiàn)下拉框功能實例代碼的相關資料,需要的朋友可以參考下
2016-05-05