热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

常用的js工具函数

JS选取DOM元素的方法注意:原生JS选取DOM元素比使用jQuery类库选取要快很多1、通过ID选取元素document.getElementById('myid'

/////////JS选取DOM元素的方法/////////
注意:原生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     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     for (var j = i + 1; j       if (tempArray[j] == tempArray[i])
      //后面的元素若和待比较的相同,则删除并计数;
      //删除后,后面的元素会自动提前,所以指针j不移动
      {
        tempArray.splice(j, 1);
      }
      else {
        j++;
      }
      //不同,则指针移动
    }
  }
  return tempArray;
}


/////////判断某个值是否在数组中/////////
Array.prototype.in_array = function (e) {
  for (i = 0; i     if (this[i] == e)
    return true;
  }
  return false;
}
/////////判断某个值在数组中的位置/////////
Array.prototype.indexOf = function (e) {
  for (i = 0; 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)//两个参数,一个是COOKIE的名字,一个是值
{
  var Days = 30; //此 COOKIE 将被保存 30 天
  var exp = new Date(); //new Date("December 31, 9998");
  exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
  document.COOKIE = name + "=" + escape(value) + ";expires=" + exp.toGMTString() + ";domain=77tianqi.com;"
}
//读取COOKIEs
function GetCOOKIE(name)
{
  var arr = document.COOKIE.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
  if (arr != null) return unescape(arr[2]); return null;

}
//删除COOKIEs
function delCOOKIE(name)
{
  var exp = new Date();
  exp.setTime(exp.getTime() - 1);
  var cval=getCOOKIE(name);
  if(cval!=null)
  document.COOKIE= name + "="+cval+";expires="+exp.toGMTString();
}


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

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

/////////返回字符串的实际长度, 一个汉字算2个长度/////////
  String.prototype.strlen = function () {
  return this.replace(/[^\x00-\xff]/g, "**").length;
}
/////////字符串超出省略 /////////
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     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     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);
  }
}

常用的js工具函数


推荐阅读
  • 本文介绍了lua语言中闭包的特性及其在模式匹配、日期处理、编译和模块化等方面的应用。lua中的闭包是严格遵循词法定界的第一类值,函数可以作为变量自由传递,也可以作为参数传递给其他函数。这些特性使得lua语言具有极大的灵活性,为程序开发带来了便利。 ... [详细]
  • 基于layUI的图片上传前预览功能的2种实现方式
    本文介绍了基于layUI的图片上传前预览功能的两种实现方式:一种是使用blob+FileReader,另一种是使用layUI自带的参数。通过选择文件后点击文件名,在页面中间弹窗内预览图片。其中,layUI自带的参数实现了图片预览功能。该功能依赖于layUI的上传模块,并使用了blob和FileReader来读取本地文件并获取图像的base64编码。点击文件名时会执行See()函数。摘要长度为169字。 ... [详细]
  • 本文介绍了OC学习笔记中的@property和@synthesize,包括属性的定义和合成的使用方法。通过示例代码详细讲解了@property和@synthesize的作用和用法。 ... [详细]
  • 在说Hibernate映射前,我们先来了解下对象关系映射ORM。ORM的实现思想就是将关系数据库中表的数据映射成对象,以对象的形式展现。这样开发人员就可以把对数据库的操作转化为对 ... [详细]
  • 1,关于死锁的理解死锁,我们可以简单的理解为是两个线程同时使用同一资源,两个线程又得不到相应的资源而造成永无相互等待的情况。 2,模拟死锁背景介绍:我们创建一个朋友 ... [详细]
  • 本文讨论了如何优化解决hdu 1003 java题目的动态规划方法,通过分析加法规则和最大和的性质,提出了一种优化的思路。具体方法是,当从1加到n为负时,即sum(1,n)sum(n,s),可以继续加法计算。同时,还考虑了两种特殊情况:都是负数的情况和有0的情况。最后,通过使用Scanner类来获取输入数据。 ... [详细]
  • Mac OS 升级到11.2.2 Eclipse打不开了,报错Failed to create the Java Virtual Machine
    本文介绍了在Mac OS升级到11.2.2版本后,使用Eclipse打开时出现报错Failed to create the Java Virtual Machine的问题,并提供了解决方法。 ... [详细]
  • 本文介绍了在SpringBoot中集成thymeleaf前端模版的配置步骤,包括在application.properties配置文件中添加thymeleaf的配置信息,引入thymeleaf的jar包,以及创建PageController并添加index方法。 ... [详细]
  • 知识图谱——机器大脑中的知识库
    本文介绍了知识图谱在机器大脑中的应用,以及搜索引擎在知识图谱方面的发展。以谷歌知识图谱为例,说明了知识图谱的智能化特点。通过搜索引擎用户可以获取更加智能化的答案,如搜索关键词"Marie Curie",会得到居里夫人的详细信息以及与之相关的历史人物。知识图谱的出现引起了搜索引擎行业的变革,不仅美国的微软必应,中国的百度、搜狗等搜索引擎公司也纷纷推出了自己的知识图谱。 ... [详细]
  • 本文讲述了作者通过点火测试男友的性格和承受能力,以考验婚姻问题。作者故意不安慰男友并再次点火,观察他的反应。这个行为是善意的玩人,旨在了解男友的性格和避免婚姻问题。 ... [详细]
  • 本文详细介绍了Linux中进程控制块PCBtask_struct结构体的结构和作用,包括进程状态、进程号、待处理信号、进程地址空间、调度标志、锁深度、基本时间片、调度策略以及内存管理信息等方面的内容。阅读本文可以更加深入地了解Linux进程管理的原理和机制。 ... [详细]
  • 后台获取视图对应的字符串
    1.帮助类后台获取视图对应的字符串publicclassViewHelper{将View输出为字符串(注:不会执行对应的ac ... [详细]
  • 《数据结构》学习笔记3——串匹配算法性能评估
    本文主要讨论串匹配算法的性能评估,包括模式匹配、字符种类数量、算法复杂度等内容。通过借助C++中的头文件和库,可以实现对串的匹配操作。其中蛮力算法的复杂度为O(m*n),通过随机取出长度为m的子串作为模式P,在文本T中进行匹配,统计平均复杂度。对于成功和失败的匹配分别进行测试,分析其平均复杂度。详情请参考相关学习资源。 ... [详细]
  • 本文介绍了通过ABAP开发往外网发邮件的需求,并提供了配置和代码整理的资料。其中包括了配置SAP邮件服务器的步骤和ABAP写发送邮件代码的过程。通过RZ10配置参数和icm/server_port_1的设定,可以实现向Sap User和外部邮件发送邮件的功能。希望对需要的开发人员有帮助。摘要长度:184字。 ... [详细]
  • 动态规划算法的基本步骤及最长递增子序列问题详解
    本文详细介绍了动态规划算法的基本步骤,包括划分阶段、选择状态、决策和状态转移方程,并以最长递增子序列问题为例进行了详细解析。动态规划算法的有效性依赖于问题本身所具有的最优子结构性质和子问题重叠性质。通过将子问题的解保存在一个表中,在以后尽可能多地利用这些子问题的解,从而提高算法的效率。 ... [详细]
author-avatar
绿色好心情
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有