常用的js工具函数

注意:原生JS选取DOM元素比使用jQuery类库选取要快很多
1、通过ID选取元素
document.getElementById(‘myid‘);
2、通过CLASS选取元素
document.getElementsByClassName(‘myclass‘)[0];
3、通过标签选取元素
document.getElementsByTagName(‘mydiv‘)[0];
4、通过NAME属性选取元素(常用于表单)
document.getElementsByName(‘myname‘)[0];

JS修改CSS样式
document.getElementById(‘myid‘).style.display = ‘none‘;

JS修改CLASS属性
document.getElementById(‘myid‘).className = ‘active‘;

如果有多个CLASS属性,即用空格隔开////////
document.getElementById(‘myid‘).className = ‘active div-1‘;


移除该元素上的所有CLASS
document.getElementById(‘myid‘).className = ‘‘
注意:使用classList会优于使用className
document.getElementById(‘myid‘).classList.item(0);//item为类名的索引
document.getElementById(‘myid‘).classList.length;//只读属性
document.getElementById(‘myid‘).classList.add(‘newClass‘);//添加class
document.getElementById(‘myid‘).classList.remove(‘newClass‘);//移除class
document.getElementById(‘myid‘).classList.toggle(‘newClass‘);//切换,有则移除,没有则添加
document.getElementById(‘myid‘).classList.contains(‘newClass‘);//判断是否存在该class


JS修改文本
document.getElementById(‘myid‘).innerHTML = ‘123‘;

数组去重的方法
Array.prototype.unique = function(){
  var tem = {}, //新建一个空对象,给数组中没出现过的数添加一个属性
  arr = [], //去重后的数组
  len = this.length; //要进行去重数组的长度
  for(var i=0;i<len;i++){
    if(!temp[this[i]]){ // 判断数组中的数作为属性名在temp里有没有属性值
      temp[this[i]]="abc";//如果没有属性值,则说明没出现过给他一个属性值
      arr.push(this[i]);//同时把这个数添加到去重后的数组里
    }
  }
  return arr; //最后返回这个数组,这是hash算法
}

 

删除数组中存在重复的元素
function getUnique(someArray) { 
  tempArray = someArray.slice(0); //复制数组到临时数组 
  for (var i = 0; i < tempArray.length; i++) { 
    for (var j = i + 1; j < tempArray.length;) { 
      if (tempArray[j] == tempArray[i]) 
      //后面的元素若和待比较的相同,则删除并计数; 
      //删除后,后面的元素会自动提前,所以指针j不移动 
      { 
        tempArray.splice(j, 1); 
      } 
      else { 
        j++; 
      } 
      //不同,则指针移动 
    } 
  } 
  return tempArray; 
}


判断某个值是否在数组中
Array.prototype.in_array = function (e) { 
  for (i = 0; i < this.length; i++) { 
    if (this[i] == e) 
    return true; 
  } 
  return false; 
}

判断某个值在数组中的位置
Array.prototype.indexOf = function (e) { 
  for (i = 0; i < this.length; i++) { 
    if (this[i] == e) 
    return i; 
   } 
  return -1; 
}

圣杯模式=继承(继承自他,更改自己又不会影响到他)
function inherit(Target,Origin){ //目标元素和初始元素
  function F(){}; //创建一个中间函数
  F.prototype = Origin.prototype; //中间函数的原型继承自原始函数
  Target.prototype = new F(); //构造函数F 目标函数继承自此
  Target.prototype.constructor = Target; //使目标函数的构造器指向他自己
  Target.prototype.uber = Origin.prototype; //在uber里存储目标函数真正继承自哪里
}
Father.prototype.lastName ="hui";
function Father(){}
function Son(){}
inherit(Son,Father);
var son = new Son();
var father new Father();


时间戳转为格式化时间
function formatDate(timestamp, formats) {
  /*
  formats格式包括
  1. Y-M-D
  2. Y-M-D h:m:s
  3. Y年M月D日
  4. Y年M月D日 h时m分
  5. Y年M月D日 h时m分s秒
  示例:console.log(formatDate(1500305226034, ‘Y年M月D日 h:m:s‘)) ==> 2017年07月17日 23:27:06
  */
  formats = formats || ‘Y-M-D‘;
  var myDate = timestamp ? new Date(timestamp) : new Date();
  var year = myDate.getFullYear();
  var month = formatDigit(myDate.getMonth() + 1);
  var day = formatDigit(myDate.getDate());
  var hour = formatDigit(myDate.getHours());
  var minute = formatDigit(myDate.getMinutes());
  var second = formatDigit(myDate.getSeconds());
  return formats.replace(/Y|M|D|h|m|s/g, function(matches) {
    return ({
      Y: year,
      M: month,
      D: day,
      h: hour,
      m: minute,
      s: second
    })[matches];
  });
// 小于10补0
function formatDigit(n) {
  return n.toString().replace(/^(\d)$/, ‘0$1‘);
  };
}

千分位显示,常用于价格显示
function toThousands(num) {
  return parseFloat(num).toFixed(2).replace(/(\d{1,3})(?=(\d{3})+(?:\.))/g, "$1,");
}

Js获取页面地址参数
function getParameter(param) { 
  var query = window.location.search;// 获取URL地址中?后的所有字符 
  var iLen = param.length;// 获取你的参数名称长度 
  var iStart = query.indexOf(param);// 获取你该参数名称的其实索引 
  if (iStart == -1)// -1为没有该参数 
  return ""; 
  iStart += iLen + 1; 
  var iEnd = query.indexOf("&", iStart);// 获取第二个参数的其实索引 
  if (iEnd == -1)// 只有一个参数 
  return query.substring(iStart);// 获取单个参数的参数值 
  return query.substring(iStart, iEnd);// 获取第二个参数的值 
}


判断是否数字
function IsNumeric(txt) { 
  if (txt == "") { 
    return false; 
  } 
  if (txt.indexOf(",") > 0) { 
    txt = txt.replace(",", ""); 
  } 
  if (isNaN(txt)) { 
    return false; 
  } 
  else { 
    return true; 
  } 
}

设置cookie

function setCookie(name, value, iDay)
{
  var oDate=new Date();
  oDate.setDate(oDate.getDate()+iDay);
  document.cookie=name+‘=‘+value+‘;expires=‘+oDate;
}


读取cookies

function getCookie(name)
{
  var arr=document.cookie.split(‘; ‘);
  for(var i=0;i<arr.length;i++)
  {
    var arr2=arr[i].split(‘=‘);
    if(arr2[0]==name)
    {
      return arr2[1];
    }
  }
  return ‘‘;
}

删除cookies 

function removeCookie(name)
{
  setCookie(name, 1, -1);
}

jquery trim()函数的用法
recordList = $.trim(recordList);

缓冲图片 loading效果
$("#loading",navTab.getCurrentPanel()).ajaxStart(function() { 
  $(this).show(); 
  }).ajaxComplete(function() { 
    $(this).hide(); 
  });

 

 

 

字符串超出省略
String.prototype.cutstr = function (len) { 
  var restr = this; 
  var wlength = this.replace(/[^\x00-\xff]/g, "**").length; 
  if (wlength > len) { 
    for (var k = len / 2; k < this.length; k++) { 
    if (this.substr(0, k).replace(/[^\x00-\xff]/g, "**").length >= len) { 
      restr = this.substr(0, k) + "..."; 
      break; 
     } 
    } 
  } 
  return restr; 
}

加入收藏夹
function AddFavorite(sURL, sTitle) { 
  try { 
    window.external.addFavorite(sURL, sTitle) 
  } catch (e) { 
  try { 
    window.sidebar.addPanel(sTitle, sURL, "") 
  } catch (e) { 
    alert("加入收藏失败,请使用Ctrl+D进行添加") 
  } 
  } 

设为首页
function setHomepage(homeurl) { 
  if (document.all) { 
  document.body.style.behavior = ‘url(#default#homepage)‘; 
  document.body.setHomePage(homeurl) 
  } else if (window.sidebar) { 
    if (window.netscape) { 
  try { 
    netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect") 
  } catch (e) { 
    alert("该操作被浏览器拒绝,如果想启用该功能,请在地址栏内输入about:config,然后将项 signed.applets.codebase_principal_support 值该为true"); 
  } 

var prefs = Components.classes[‘@mozilla.org/preferences-service;1‘].getService(Components.interfaces.nsIPrefBranch); 
prefs.setCharPref(‘browser.startup.homepage‘, homeurl) 

}

跨浏览器绑定事件
function addEventSamp(obj, evt, fn) { 
  if (!oTarget) { return; } 
  if (obj.addEventListener) { 
    obj.addEventListener(evt, fn, false); 
  } else if (obj.attachEvent) { 
    obj.attachEvent(‘on‘ + evt, fn); 
  } else { 
    oTarget["on" + sEvtType] = fn; 
  } 
}


跨浏览器删除事件
function delEvt(obj, evt, fn) { 
  if (!obj) { return; } 
  if (obj.addEventListener) { 
    obj.addEventListener(evt, fn, false); 
  } else if (oTarget.attachEvent) { 
    obj.attachEvent("on" + evt, fn); 
  } else { 
    obj["on" + evt] = fn; 
  } 


判断是否移动设备访问
function isMobileUserAgent() { 
  return (/iphone|ipod|android.*mobile|windows.*phone|blackberry.*mobile/i.test(window.navigator.userAgent.toLowerCase())); 
}

获取页面高度
function getPageHeight() { 
  var g = document, a = g.body, f = g.documentElement, d = g.compatMode == "BackCompat" ? a : g.documentElement; 
  return Math.max(f.scrollHeight, a.scrollHeight, d.clientHeight); 

获取页面宽度
function getPageWidth() { 
  var g = document, a = g.body, f = g.documentElement, d = g.compatMode == "BackCompat" ? a : g.documentElement; 
  return Math.max(f.scrollWidth, a.scrollWidth, d.clientWidth); 


获取页面scrollLeft
function getPageScrollLeft() { 
  var a = document; 
  return a.documentElement.scrollLeft || a.body.scrollLeft; 

获取页面滚动距离
function getScrollOffset(){
  if(window.pageXOffset){
    return{
      X : window.pageXOffset;
      Y : window.pageYOffset
    }
  }else{//IE8及以下
    return{
      X : document.body.scrollLeft+document.documentElement.scrollLeft;
      Y : document.body.scrollTop+document.documentElement.scrollTop;
    }
     }
}

获取窗体可见范围的宽与高
function getViewportOffset() { 
  if(window.innerWidth){
    return{
      X : window.innerWidth;
      Y : window.innerHeight
      }
    }else{//IE8及以下
    if(document.compatMode == "BackCompat"){//如果是怪异模式、混杂模式
      return{
        X : document.body.clientWidth; 
        Y : document.body.clientHeight;
       }
}else{
  return {
     X : document.documentElement.clientWidth;//标准模式
     Y : document.documentElement.clientHeight
    }
      }
  }
}


查看元素的几何尺寸
domEle.getBoundingClientRect();//6个值 left top right bottom width height 不是实时监控的


查看元素的视觉尺寸
div.offsetWidth
div.offsetHeight
div.offsetLeft //对于无定位的父集返回文档的坐标,对于有定位的父集返回相对最近有定位父集的坐标
div.offsetTop
div.offsetParent //返回最近的有定位的父集

返回一个元素在文档中的坐标
function getElmentPosition(div){
  if(div.offsetParent == body){
  return {
    X : div.offsetLeft;
    Y : div.offsetTop
    }
  }else{

  }
}

让滚动条滚动
scrollTo();//滚动到xxx
scrollBy();//累加滚动xxxx


行间样式-可以写入
div.style.width //必须写到css style里面,获取的都是style里的
div.style.cssFloat//浮动
window.getComputedStyle(div,null) //返回的计算样式都是计算过的,不存在相对单位,只读
window.getComputedStyle(div,null).width
window.getComputedStyle(div,"after") //获取伪元素的样式表
ele.currentStyle//ie专用,获取显示显示样式,只读
ele.currentStyle.width


获取样式属性
function getStyle(elem,prop){
  if(window.getcomputedStyle){
    return window.getComputedStyle(elem,null)[prop];
  }else{
    return elem.currentStyle[prop];
  }
}

 

随机数时间戳
function uniqueId() { 
  var a = Math.random, b = parseInt; 
  return Number(new Date()).toString() + b(10 * a()) + b(10 * a()) + b(10 * a()); 
}


匹配国内电话号码(0511-4405222 或 021-87888822) //////// 
function istell(str) { 
  var result = str.match(/\d{3}-\d{8}|\d{4}-\d{7}/); 
  if (result == null) return false; 
  return true; 
}


匹配身份证(15位或18位)
function isIdCardNo(num) { 
  num = num.toUpperCase(); 
        //身份证号码为15位或者18位,15位时全为数字,18位前17位为数字,最后一位是校验位,可能为数字或字符X。 
  if (!(/(^/d{15}$)|(^/d{17}([0-9]|X)$)/.test(num))) 
  { 
    alert(‘输入的身份证号长度不对,或者号码不符合规定!/n15位号码应全为数字,18位号码末位可以为数字或X。‘); 
    return false; 
  } 
}


移动电话
function checkMobile(str) { 
  if (!(/^1[3|5|8][0-9]\d{4,8}$/.test(str))) { 
    return false; 
  } 
  return true; 
}


判断输入是否是有效的电子邮件
function isemail(str) { 
  var result = str.match(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/); 
  if (result == null) return false; 
    return true; 
  }


拆分整数与小数 
function splits(tranvalue) { 
  var value = new Array(‘‘, ‘‘); 
  temp = tranvalue.split("."); 
  for (var i = 0; i < temp.length; i++) { 
    value = temp; 
  } 
  return value; 
}


JS创建元素并向其中追加文本
var newdiv = document.createElement(‘div‘);
var newtext = document.createTextNode(‘123‘);
newdiv.appendChild(newtext);
document.body.appendChild(newdiv);
////////同理:removeChild()移除节点,并返回节点////////
cloneNode()//复制节点
insertBefore()//插入节点(父节点内容的最前面)
//注意:insertBefore()有两个参数,第一个是插入的节点,第二个是插入的位置
//例子:
var list = document.getElementById(‘myList‘);
list.insertBefore(newItem,list.childNodes[1]);
//插入新节点newItem到list的第二个子节点

//////insertAfter//////
Element.prototype.insertAfter = function(targetNode,afterNode){
  var beforeNode = afterNode.nextElementSibling;
    if(beforeNode == null){
      afterNode.appendChild(targetNode);
    }else{
      this.insertBefore(targetNode,beforeNode);
  }
}

浮点数加法运算
function FloatAdd(arg1, arg2)
{
var r1,r2,m;
  try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0}
  try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0}
  m=Math.pow(10,Math.max(r1,r2)) 
  return (arg1*m+arg2*m)/m
}


浮点数乘法运算
function FloatMul(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)
}
function toFixed(num, s) {
  var s = 2;
  var times = Math.pow(10, s)
  var des = num * times + 0.5
  des = parseInt(des, 10) / times
  return des + ‘‘
}

点击空白处消失

$("#a").on("click", function(e){ 

  $("#menu").show(); 
  $(document).one("click", function(){ 
    $("#menu").hide(); }); e.stopPropagation();
   });
 $("#menu").on("click", function(e){ e.stopPropagation(); });

常见的运动框架

window.onload = function() {

    var oDiv = document.getElementById(‘div1‘);

    oDiv.onmouseover = function() {

        startMove(0);

    };

    oDiv.onmouseout = function() {

        startMove( - 150);

    };

};

var timer = null;

function startMove(iTarget) {

    var oDiv = document.getElementById(‘div1‘);

    clearInterval(timer);

    timer = setInterval(function() {

        var speed = 0;

        if (oDiv.offsetLeft > iTarget) {

            speed = -10;

        } else {

            speed = 10;

        }

        if (oDiv.offsetLeft == iTarget) {

            clearInterval(timer);

        } else {

            oDiv.style.left = oDiv.offsetLeft + speed + ‘px‘;

        }

    },

    30);

}

上一篇:jQuery效果


下一篇:CSS布局相关及Flex详解