/////////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<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)//两个参数，一个是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 < 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);
}
}
常用的js工具函数
原文地址：https://www.cnblogs.com/xuniannian/p/8175746.html