前言：突然有个想法，如果项目中有些简单的页面需要某些JS库里的方法，但是又不想依赖其他库，于是就只能自己封装点常用的方法,不能什么都靠百度和插件。
给DOM添加或删除class类
|
1 2 3 4 5 6 7 |
/* 添加 class 类 和 移出 class 类 方法*/ function addClass(element, className) { if(!new RegExp("(^|\\s)" + className + "(\\s|$)").test(element.className)) element.className += ' ' + className; } function removeClass(element, className) { element.className = element.className.replace(new RegExp("(^|\\s)" + className + "(?=(\\s|$))", "g"), ''); } |
添加class原理：正则去匹配DOM身上的class字符串，如果没有匹配到就增加这个class类。
删除class原理：用replace方法从获取的class字符串里用空字符串替换掉这个需要移出的class类，再赋值给这个DOM的className属性。
获取DOM的属性
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
function getStyle(obj,attr){ if (attr =='left') { return obj.offsetLeft; } else if (attr =='top') { return obj.offsetTop; } else if (attr =='width') { return obj.offsetWidth; } else if (attr =='height') { return obj.offsetHeight; } else { return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr]; } } |
设置DOM的属性
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
function setStyle(obj, json){ if(obj.length) for(var i=0;i<obj.length;i++) setStyle(obj[i], json); else{ if(arguments.length==2) //json for(var i in json) setStyle(obj, i, json[i]); else{ //name, value switch(arguments[1].toLowerCase()){ case 'opacity': obj.style.filter='alpha(opacity:'+arguments[2]+')'; obj.style.opacity=arguments[2]/100; break; default: if(typeof arguments[2]=='number'){ obj.style[arguments[1]]=arguments[2]+'px'; }else{ obj.style[arguments[1]]=arguments[2]; } break; } } } } |
获取DOM四边距离左右上下的距离
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
function getClientRectAttr(el,direction){ if(direction==='top') { return el.getBoundingClientRect().top; } else if(direction==='bottom') { return el.getBoundingClientRect().bottom; } else if(direction==='left') { return el.getBoundingClientRect().left; } else if(direction==='right') { return el.getBoundingClientRect().right; } } |
绑定和移出事件
|
1 2 3 4 5 6 |
function bindEvent(obj, ev, fn){ obj.addEventListener?obj.addEventListener(ev, fn, false):obj.attachEvent('on'+ev, fn); } function unbindEvent(obj, ev, fn){ obj.removeEventListener?obj.removeEventListener(ev, fn, false):obj.detachEvent('on'+ev, fn); } |
ps:绑定和解绑的回调必须是同一个函数
获取一个数组的极值(最大或是最小值)
|
1 2 3 4 5 6 |
function getExtremeValue(size,arr){ return size==='min'?Math.min.apply(null,arr):Math.max.apply(null,arr); } function getExtremeValue(size,arr){ return size==='min'?Math.min(...arr):Math.max(...arr); } |
获取移动设备类型
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
function getEquipmentType () { var u = navigator.userAgent; if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {//安卓手机 return "Android"; } else if (u.indexOf('iPhone') > -1) {//苹果手机 return "iPhone"; } else if (u.indexOf('iPad') > -1) {//iPad return "iPad"; } else if (u.indexOf('Windows Phone') > -1) {//winphone手机 return "Windows Phone"; }else{ return 'other' } } |
严格身份证号验证
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
// 严格的身份证校验 function isCardID(sId) { if (!/(^\d{15}$)|(^\d{17}(\d|X|x)$)/.test(sId)) { alert('你输入的身份证长度或格式错误') return false } //身份证城市 var aCity={11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"吉林",23:"黑龙江",31:"上海",32:"江苏",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",42:"湖北",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",51:"四川",52:"贵州",53:"云南",54:"西藏",61:"陕西",62:"甘肃",63:"青海",64:"宁夏",65:"新疆",71:"台湾",81:"香港",82:"澳门",91:"国外"}; if(!aCity[parseInt(sId.substr(0,2))]) { alert('你的身份证地区非法') return false } // 出生日期验证 var sBirthday=(sId.substr(6,4)+"-"+Number(sId.substr(10,2))+"-"+Number(sId.substr(12,2))).replace(/-/g,"/"), d = new Date(sBirthday) if(sBirthday != (d.getFullYear()+"/"+ (d.getMonth()+1) + "/" + d.getDate())) { alert('身份证上的出生日期非法') return false } // 身份证号码校验 var sum = 0, weights = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2], codes = "10X98765432" for (var i = 0; i < sId.length - 1; i++) { sum += sId[i] * weights[i]; } var last = codes[sum % 11]; //计算出来的最后一位身份证号码 if (sId[sId.length-1] != last) { alert('你输入的身份证号非法') return false } return true } |
数据或类型判断
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
//是否字符串 function isString (o) { return Object.prototype.toString.call(o).slice(8, -1) === 'String' } //是否数字 function isNumber (o) { return Object.prototype.toString.call(o).slice(8, -1) === 'Number' } //是否对象 function isObj (o) { return Object.prototype.toString.call(o).slice(8, -1) === 'Object' } //是否数组 function isArray (o) { return Object.prototype.toString.call(o).slice(8, -1) === 'Array' } //是否时间 function isDate (o) { return Object.prototype.toString.call(o).slice(8, -1) === 'Date' } //是否boolean function isBoolean (o) { return Object.prototype.toString.call(o).slice(8, -1) === 'Boolean' } //是否函数 function isFunction (o) { return Object.prototype.toString.call(o).slice(8, -1) === 'Function' } //是否为null function isNull (o) { return Object.prototype.toString.call(o).slice(8, -1) === 'Null' } //是否undefined function isUndefined (o) { return Object.prototype.toString.call(o).slice(8, -1) === 'Undefined' } //是否空数组 function isEmptyArray(a){ return Object.prototype.toString.call(a).slice(8, -1) === 'Array'&&a.length===0; } //是否是空字符串 function isEmptyString(s){ return Object.prototype.toString.call(s).slice(8, -1) === 'String'&&s.length===0; } |
guid生成
|
1 2 3 4 5 6 |
function guid() { function S4() { return (((1+Math.random())*0x10000)|0).toString(16).substring(1); } return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4()); } |
两种获取节点里的内容
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>获取DOM节点里面的纯内容</title> </head> <body> <div id="box">我是DOM节点的文本内容<p>我是前端<span>你呢？</span>一起努力！</p>好吗？</div> </body> <script> function $(el){ return document.querySelector(el); } function text(e){ var t=""; //如果传入的是元素，则继续遍历其子元素 //否则假定它是一个数组 e=e.childNodes||e; //遍历所有子节点 for(var j=0;j<e.length;j++){ //如果不是元素，追加其文本值 //否则，递归遍历所有元素的子节点 t+=e[j].nodeType!=1? e[j].nodeValue:text(e[j].childNodes); } //返回区配的文本 return t; } function getTetx(str){ var aText=[]; str.replace(/\>(.+?)\</g,function(r1,r2){aText.push(r2)}) return aText.join(''); } var str='<div id="box">我是DOM节点的文本内容<p>我是前端<span>你呢？</span>一起努力！</p>好吗？</div>'; console.log(getTetx(str)); console.log(text($('#box'))) </script> </html> |
