学习js也很有一段时间，收集了一些js的片段。特地整理排版了一下，以一个js初学者的视界来分析注释了这些代码段，暂且不去讨论它的性能和优化问题，相信会对一些初学者有用。第一次发文，定许多纰漏和不足的地方，希望可以交流和学习。
1 javascript动态加载--2
获取字符串的字节长度--3 DOM加载完即执行(有别于onload-页面的一切都加载完后执行)--4获取CSS属性--5 数组检测--6 继承--7
简单事件绑定--8 浏览器判断--9 阻止事件的默认行为--10 数组合并去重--11 将arguments转化为数组--12 数组去重--13
根据生日算年龄--14 获取某个节点下类名为classname的所有元素--15 object.crate的用法--16 获取事件的目标对象--17
获取事件发生时按键状态--18 dom操作--19 阻止事件冒泡--20 元素位置计算--21 元素显示效果--22 闭包的用例--23
实现字符串长度截取--24 获取域名的主机--26 清楚空格--27 替换全部--28 html文档中转义和解码字符--29 判断是否为数字类型--30
设置cookie--31 获取指定cookie--32 加入收藏夹--33 判断IE6--34 跨域解决方法--35 加载样式文件--36 今天是星期几--38
返回按id检索的元素对象--39 元素显示的通用方法--40 insrtAfter函数--41 压缩css样式代码--42 获取当前路径--43
checkbox全选全不选--44 判断移动设备-- 45 克隆对象--46 敏感词--47 常用正则--48 获取数组中的最大最小值--49
反转文本顺序--50 选择框跳转页面--51 批量修改样式--52 获取Url中的get参数值--53 在新窗体中打开页面--54 获取单选按钮的值--55
获取复选框的值.
1 javascript动态加载
1 function loadScript(url,callback){//异步加载脚本函数 2 var script=document.createElement("script"); 3 script.type="text/javascript"; 4 if(script.readyState){ 5 script.onreadystatechange=function(){//ie 6 if(script.readyState=="loaded"||script.readyState=="complete"){ 7 script.onreadystatechange=null; 8 callback();//加载成功后的回调函数 9 } 10 }; 11 }else{ 12 script.onload=function(){//others 13 callback(); 14 }; 15 } 16 script.src=url; 17 document.getElementsByTagName("head")[0].appendChild(script); 18 } 19 20 //方法二ajax原理 21 //创建XMLHttpRequest对象 22 var xhr=new XMLHttpRequest(); 23 //设置与服务器端的交互方式和参数 24 xhr.open("get","script.js",true); 25 //注册回调函数 26 xhr.onreadystatechange=function(){ 27 //判断和服务器交互是否已经完成 28 if(xhr.readyState===4){ 29 //与服务器交互成功且返回正确数据 30 if(xhr.status===200){ 31 var script=document.createElement("script"); 32 script.type="text/javascript"; 33 script.text=xhr.responseText; 34 document.body.appendChild(script); 35 } 36 } 37 }; 38 xhr.send(null);
2 获取字符串的字节长度
1 //方法一 2 String.prototype.getLength=function(){ 3 var b=0,l=this.length; 4 if(l){ 5 for(var i=0;i<l;i++){ 6 //字符编码值大于255为汉字（全角） 7 if(this.charCodeAt(i)>255){ 8 b+=2; 9 }else{ 10 b++; 11 } 12 } 13 return b; 14 }else{ 15 return 0; 16 } 17 }; 18 19 //方法二 20 String.prototype.getLength=function(){ 21 var l=this.length; 22 var b=l; 23 for(var i=0;i<l;i++){ 24 //字符编码值大于255为汉字（全角） 25 if(this.charCodeAt(i)>255){ 26 b++; 27 } 28 return b; 29 }; 30 31 //方法三 32 String.prototype.getLength=function(){ 33 var b=0,l=this.length; 34 if(l){ 35 for(var i=0;i<l;i++){ 36 var c=this.chartAt(i); 37 //字符编码长度大于4为全角字符 38 if(escape(c).length>4){ 39 b+=2; 40 }else if(c!=‘\r‘){ 41 b++; 42 } 43 } 44 return b; 45 }else{ 46 return 0; 47 } 48 }; 49 50 //方法四 51 String.prototype.getLength=function(){ 52 var b=0,l=this.length; 53 if(l){ 54 for(var i=0;i<l;i++){ 55 var c=this.chartAt(i); 56 //编码范围在[\u0000-\uooff]为半角字符 57 if(/^[\u0000-\uooff]为半角字符$/.test(c)){ 58 b++; 59 }else if(c!=‘\r‘){ 60 b+=2; 61 } 62 } 63 return b; 64 }else{ 65 return 0; 66 } 67 }; 68 69 //方法五 70 String.prototype.getLength=function(){ 71 //用"**"替换掉所有全角字符 72 var s=this.replace(/^[\x00-\xff]/g,"**"); 73 return s.length; 74 }
3 DOM加载完即执行(有别于onload-页面的一切都加载完后执行)
1 function domLoad(fn){ 2 if(document.addEventLister){//ff支持DOMContentLoaded 3 document.addEventLister("DOMContentLoaded",fn,false); 4 } 5 else if(window.ActiveXobject){ //ie支持defer 6 document.write("<script id="onload" defer="defer" src=‘javascript:void(0)‘></script>"); 7 document.getElementsById("onload").onreadystatechange=function(){ 8 if(this.readyState=="complete"){ 9 this.onreadystatechange=null; 10 fn(); 11 } 12 } 13 else if(/webkit/i.test(navigator.userAgent)){//chrome 14 var timer=setInterval(function(){ 15 if(document.readyState=="loaded"||"complete"){ 16 clearInterval(timer) 17 fn(); 18 } 19 },10)//延迟一个极小的时间 20 } 21 22 23 } 24 }
4 获取CSS属性
1 function getStyle(obj,n){ 2 if(obj.style[n]){//获取行内样式 3 return obj.style[n]； 4 }else { 5 if(obj.currentStyle){//ie 6 return obj.currentStyle[n]; 7 }else if(obj.defaultView.getComputedStyle){//ff 8 reurn obj.defaultView.getComputedStyle[obj,null].[n] 9 10 }else{ 11 return null 12 } 13 14 } 15 }
5 数组检测
1 //方法一 2 var isArray=function(o){ 3 //不能解决跨执行环境(iframe)慎用 4 return o instanceof Array||o.constructor==Array; 5 } 6 7 //方法二 8 var isArray=function(o){ 9 //把类型检测转化为字符串比较 10 return typeof o==="object"&& Object.prototype.toString().call(o)==="[object Array]" 11 12 } 13 //方法三 14 var isArray=function(o){ 15 //鸭式辨形，若此对象有数组的splice和join两个特有方法即为数组 16 return o!=null && typeof o=="object"&&‘splice‘ in object && 17 ‘join‘ in object; 18 }
6 继承
1 function animal(){ 2 this.species="me"; 3 } 4 //方法一 构造函数绑定 5 function cat(name,color){ 6 animal.apply(this,arguments); 7 this.name=name; 8 this.color=color; 9 } 10 //方法二 原型继承 11 function cat(name,color){ 12 this.name=name; 13 this.color=color; 14 } 15 function extend(child,parent){ 16 var p=parent.prototype; 17 var c=children.prototype; 18 for(var i in p){ 19 c[i]=p[i]; 20 return c; 21 } 22 extend(cat,animal); 23 //方法三 直接继承 24 function cat(name,color){ 25 this.name=name; 26 this.color=color; 27 } 28 cat.prototype=animal.prototype; 29 cat.prototype.constructor=cat; 30 //方法四：利用空对象做中介 31 function cat(name,color){ 32 this.name = name; 33 this.color = color; 34 } 35 function f(){}; 36 f.prototype=animal.prototype; 37 cat.prototype=new f(); 38 cat.prototype.constructor=cat;
7 简单事件绑定
1 //添加事件 2 function addEvent(obj,type,fn){ 3 if(obj.addEventLister){ 4 obj.addEventLister(type,fn,false); 5 }else if(obj.attachEvent){//ie 6 obj.attachEvent(‘on‘+type,fn); 7 } 8 } 9 //移除事件 10 function removeEvent(obj,type,fn){ 11 if(obj.removeEventListner){ 12 obj.removeEventListner(type,fn,false); 13 }else if(obj.detachEvent){//ie 14 obj.detachEvent(‘on‘+type,fn) 15 } 16 }
8 浏览器判断
1 var sys={}; 2 var ua=navigator.userAgent.toLowerCase(); 3 var s; 4 (s=ua.match(/msie([\d.]+)/))?sys.ie=s[1]: 5 (s=ua.match(/firefox([\d.]+)/))?sys.firefox=s[1]: 6 (s=ua.match(/chrome([\d.]+)/))?sys.chrome=s[1]: 7 (s=ua.match(/opera([\d.]+)/))?sys.opera=s[1]: 8 (s=ua.match(/safari([\d.]+)/))?sys.safari=s[1]:0; 9 10 if (Sys.ie) document.write(‘IE: ‘ + Sys.ie); 11 if (Sys.firefox) document.write(‘Firefox: ‘ + Sys.firefox); 12 if (Sys.chrome) document.write(‘Chrome: ‘ + Sys.chrome); 13 if (Sys.opera) document.write(‘Opera: ‘ + Sys.opera); 14 if (Sys.safari) document.write(‘Safari: ‘ + Sys.safari);
9 阻止事件的默认行为
1 function stopdefault(evt){ 2 var e=evt||window.event; 3 if(e.preventDefault){//ff 4 e.preventDefault 5 }else{//ie 6 e.returnValue=false; 7 } 8 return false; 9 }
10 数组合并去重
1 Array prototype.unique=function(){ 2 var b=[],c=[]; 3 var a=b.concat(c); 4 var l=a.length; 5 //从第一个元素起，看其后的所有元素是否和它相等 6 for(var i=0;i<l;i++){ 7 for(j=i+1;j<l;j++){ 8 if(a[i]===a[j]){ 9 //数组拼接，起始第j个元素，删除长度为1，拼接其他元素为空 10 a.splice(j,1); 11 } 12 } 13 } 14 return a; 15 }
11 将arguments转化为数组
1 var arr=Array.prototype.slice(arguments,0);
//数组切割，将arguments作为slice的执行环境，返回的是数组0为切割起始位置，长度为默认的length
12 数组去重
1 Array.prototype.unique=function(){ 2 var ret=[];//目标数组 3 var obj={};//中介对象 4 var l=this.length; 5 for(var i=0;i<l;i++){ 6 var v=this[i];//获取数组元素 7 if(!obj[v]){//数组元素作为中介对象的属性,判断此属性是否已在对象中 8 obj[v]=1; 9 ret.push(v); 10 } 11 } 12 return ret; 13 }
13 根据生日算年龄
1 function getAge(dateString){ 2 var today=new Date(); 3 var birthday=new Date(dateString); 4 var age=today.getFullYear()-birthDate.getFullYear(); 5 var m=today.getMonth()-birthDate.getMonth(); 6 //今天所在的月份小于出生月份，或(月份相等且今天的日期小于出生日期) 7 if(m<0||(m===0&&today.getDay()<birthday.getDay())){ 8 age--; 9 } 10 return age; 11 }
14 获取某个节点下类名为classname的所有元素
1 function getclass(node,classname){ 2 if(node.getElementsByClassName){ 3 return node.getElementsByClassName(classname); 4 }else{//ie 5 //存储目标元素的数组 6 var targs=[]; 7 //获取节点对象下的所有元素 8 var els=node.getElementsByTagName("*"); 9 var elslen=els.length; 10 for(var i=0;i<elslen;i++){ 11 //元素的class值等于classname 12 if(els.className==classname){ 13 targs[targs.length]=els[i]; 14 } 15 } 16 return targs; 17 } 18 }
15 object.crate的用法
1 Object.create=function(o){ 2 var f=function(){}; 3 f.prototype=o; 4 return new f(); 5 } 6 var b=Object.create(a);
16 获取事件的目标对象
1 function getTarget(evt){ 2 var evt=window.event||evt 3 if(evt.target){//w3c 4 return evt.target; 5 }else(evt.srcElement){//ie 6 return evt.srcElement; 7 } 8 }
17 获取事件发生时按键状态
1 function getKey(evt){ 2 var e=evt||window.event; 3 var keys=[]; 4 if(e.shiftKey){keys.push(‘shift‘);} 5 if(e.ctrlKey){keys.push(‘ctrl‘);} 6 if(e.altKey){keys.push(‘alt‘);} 7 return keys; 8 }
18 dom操作
1 //得到上一个元素 2 function prev(elem){ 3 do{ 4 elem=elem.previousSibling; 5 }while(elem&&elem.nodeType!=1);//不为元素节点的时候继续循环 6 return elem; 7 } 8 //得到下一个元素 9 function next(elem){ 10 do{ 11 elem=elem.nextSibling; 12 }while(elem&&elem.nodeType!=1); 13 return elem; 14 } 15 //得到第一个元素 16 function first(elem){ 17 elem=elem.firstChild; 18 return elem&&elem.nodeType!=1?next(elem):elem; 19 } 20 //得到最后一个元素 21 function last(elem){ 22 elem=elem.lastChild; 23 //优先级!= > && > ?: 24 return elem&&elem.nodeType!=1?prev(elem):elem; 25 } 26 //得到父元素 27 function parent(elem,num){ 28 num=num||1; 29 for(var i=0;i<num;i++){ 30 if(elem!=null){elem=elem.parentNode;} 31 } 32 return elem; 33 } 34 //得到相关name元素 35 function tag(name,elem){ 36 return (elem||document).getElementsByTagName(name); 37 } 38 //获取指定类名的元素 39 function hasClass(name,node){ 40 var r=[]; 41 //在构造函数中要用\对元字符\转义 42 var re=new RegExp(‘(^|\\s)‘+name+‘(\\s|$)‘); 43 var e=document.getElementsByTagName(node||‘*‘); 44 for(var i=0;i<e.length;i++){ 45 if(re.test(e[i].className)){ 46 r.push(e[i]); 47 } 48 } 49 return r 50 } 51 //获取元素文本 52 function text(e){ 53 var t=‘‘; 54 e=e.childNodes||e; 55 for(var i=0;i<e.length;i++){ 56 t+=e[i].nodeType!=1?e[i].nodeValue:text(e[i].childNodes); 57 } 58 return t; 59 } 60 //在一个元素之前插入元素 61 //在父元素为parent的before之前，插入elem 62 function before(parent,before,elem){ 63 if(elem==null){ 64 elem=before; 65 befroe=parent; 66 parent=before.parentNode 67 } 68 var elems=checkElem(elem); 69 for(var i=elems.length;i>=0;i--){ 70 parent.insertBefore(elem[i],before); 71 } 72 } 73 //创建元素 74 function create(elem){ 75 //测试是否用命名空间来创建新的元素 76 return document.createElementNS?document.createElementNS(‘namespace‘,elem):document.createElement(elem); 77 } 78 //检查参数a(可能是字符串和元素的组合)类型并转化成节点数组 79 function checkElem(a){ 80 //中介数组 81 var r=[]; 82 //若参数不为数组，强制转化 83 if(a.constructor!=Array){a=[a];} 84 for(var i=0;i<a.length;i++){ 85 //参数数组中的元素类型 86 if(a[i].constructor==String){ 87 var div=document.createElement(‘div‘); 88 div.innerHTML=a[i]; 89 //提取临时div中的dom结构 90 for(var j=0;j<div.childNodes.length;j++){ 91 r[r.length]=div.childNodes[j]; 92 } 93 }else if(a[i].length){//若为dom节点数组 94 for(var j=0;j<a[i.length];j++){ 95 r[r.length]-a[i][j]; 96 } 97 98 }else{r[r.length]=a[i];} 99 } 100 return r 101 } 102 103 //添加元素 104 function append(parent,elem){ 105 if(elem=null){//若参数为空 106 elem=parent; 107 parent=null; 108 } 109 //转化参数为标准的节点数组 110 var elems=checkElem(elem); 111 for(var i;i<elems.length;i++){ 112 (parent||document.body).appendChild(elem[i]); 113 } 114 } 115 //删除独立的dom 116 function remove(elem){ 117 if(elem){elem.parentNode.removeChild(elem);} 118 } 119 //删除一个节点的所有子节点 120 function empty(elem){ 121 while(elem.firstChild){ 122 remove(elem.firstChild); 123 } 124 }
19 阻止事件冒泡
1 function stopBubble(e){ 2 if(e&&e.stoppropagation){ 3 e.stoppropagation(); 4 }else{ 5 window.event.cancelBubble=true; 6 } 7 }
20 元素位置计算
1 //返回元素的x位置 2 //event.pageX是鼠标事件相对于文档边沿的位置 3 function pageX(elem){ 4 //若元素有最近的定位祖先元素offestParent,若没有为document.body 5 //offest相对于offestParent而言 6 return elem.offestParent?elem.offestLeft+pageX(elem.offestParent):elem.offestLeft 7 } 8 //获取元素的Y位置 9 function pageY(elem){ 10 return elem.offestParent?elem.offestTop+pageY(elem.offestParent):elem.offestTop; 11 } 12 //获取元素相对于父级元素的x位置 13 function parentX(elem){ 14 //父节点是否为最近的定位父元素 15 return elem.parentNode==elem.offestParent?elem.offestLeft:pageX(elem.parentNode)-pageX(elem); 16 } 17 function parentY(elem){ 18 return elem.parentNode==elem.offestParent?elem.offestTop:pageY(elem.offestParent)-pageY(elem); 19 }
21 元素显示效果
1 //隐藏元素 2 function hide(elem){ 3 //getStyle()已经封装好 4 var curDisplay=getStyle(elem,‘display‘); 5 if(curDisplay!=‘none‘){ 6 elem.oldDisplay=curDisplay; 7 }else{elem.style.display=‘none‘;} 8 } 9 //显示元素 10 function show(elem){ 11 //‘block‘的存在强制显示 12 elem.style.display=elem.oldDisplay||‘block‘; 13 } 14 //设置透明度 15 function setOpacity(elem,level){ 16 if(elem.filters){//ie中用滤镜filter,alpha通道 17 elem.style.filter=‘alpha(opacity=‘+level+‘)‘; 18 elem.style.zoom=1;//zoom为对象缩放比例 19 }else{ 20 elem.style.opacity=level/100; 21 } 22 } 23 function slideDown(elem){ 24 //从高度0开始 25 elem.style.height=‘0px‘; 26 //先显示elem，但看不到它 27 show(elem)； 28 //元素最终的完整高度 29 var h=fullHeight(elem); 30 //在一秒内执行20次动画 31 for(var i=0;i<100;i+=5){ 32 //设置setTimeout按指定时间执行 33 /*把i保存在内部函数的局部变量pos中，*/ 34 (function(){ 35 var pos=i; 36 setTimeout(function(){ 37 elem.style.height=(pos/100)*h+‘px‘; 38 },(pos+1)*5); 39 })(); 40 } 41 } 42 //透明度渐显 43 function fadeIn(elem){ 44 //setOpacity(emel, 0); 45 show(elem); 46 for(var i=0; i<=100; i+=10){ 47 (function(){ 48 var pos = i; 49 setTimeout(function(){ 50 setOpacity(elem, pos); 51 }, (pos + 1) * 10); 52 })(); 53 } 54 }
22 闭包的用例
1 //闭包中局部变量是引用而非拷贝 2 function say667(){ 3 var num=666; 4 var sayAlert=function(){alert(num);} 5 num++; 6 return sayAlert; 7 } 8 var say=say667(); 9 say(); 10 //多个函数绑定同一个闭包,因为他们定义在同一个函数内 11 function setupSomeGlobals(){ 12 var num=666; 13 gAlertNumber=function(){alert(num);} 14 gIncreaseNumber=function(){num++;} 15 gSetNumber=function(x){num=x;} 16 } 17 setupSomeGlobals()//为三个全局变量赋值 18 gAlertNumber(); 19 gIncreaseNumber(); 20 gAlertNumber(); 21 gSetNumber(12); 22 gAlertNumber() 23 //外部函数所有局部变量都在闭包内，即使这个变量声明在内部函数定义之后。 24 function sayAlice(){ 25 var sayAlert=function(){alert(alice);} 26 var alice=‘hello‘; 27 return sayAlert 28 } 29 var hello=sayAlice(); 30 hello()
23 实现字符串长度截取
1 function cutstr(str,len){ 2 var temp;//临时字符 3 var count=0;//记录获取的字符长度 4 var patern =/[^\x00-\xff]/; 5 var str1=""; 6 //js中length表示字符数目，而不是长度 7 for(var i=0,l=str.length;i<l;i++){ 8 if(count<len-1){ 9 temp=str.substr(i,1) 10 if(patern.exec(temp)==null){ 11 count=count+1; 12 }else{count=count+2;} 13 str1+=temp 14 }else{break} 15 } 16 return str1+"..."; 17 }
24 获取域名的主机
1 //var url=" http://www.baidu.com/ 2 //http是传输协议，www是主机名（在服务器规划是取得别名），baidu.com是域名 3 function getHost(url){ 4 var host="null"; 5 if(typeof url=="undefined"||null){ 6 url=window.location.href; 7 } 8 var regex=/^\w+\:\/\/([^\/]*).*/; 9 var match=url.match(regex); 10 if(typeof match!="undefined"&&match!=null){ 11 host=match[1]; 12 } 13 return host; 14 }
26 清楚空格
1 String.prototype.trim=function(){ 2 //?表示*可选最终就是个不定长度的字符.可选长度为0或n 3 var space=/^\s*(.*?)\s+$/; 4 retuen this.replace(space,"$s1"); 5 }
27 替换全部
1 //用s2替换s1 2 String.prototype.replaceAll=function(s1,s2){ 3 return this.replace(new RegExp(s1,"gm"),s2) 4 }
28 html文档中转义和解码字符
1 // &,",<,> 2 function htmlEncode(text){ 3 return text.replace(/&/g,‘&‘).replace(/\"/g,‘"‘).replace(/</g,‘<‘).replace(/>/g,‘>‘); 4 } 5 function HtmlDecode(text) { 6 return text.replace(/&/g, ‘&‘).replace(/"/g, ‘\"‘).replace(/</g, ‘<‘).replace(/>/g, ‘>‘) }
29 判断是否为数字类型
1 function isDigit(value){ 2 var pattern=/^[0-9]*$/; 3 //exec匹配结果是一个数组，null未找到匹配 4 if(pattern.exec(value)==null||value==""){ 5 return false 6 }else{ 7 return true; 8 } 9 }
30 设置cookie
1 function addCookie(name,value,expiresHours){ 2 //escape避免乱码 3 var cookieString=name+"="+escape(value); 4 //判断是否设置过期时间 5 if(expiresHours>0){ 6 var date=new Date(); 7 //使用GMT时间。获取毫秒数 8 date.setTime(date.getTime+expiresHours*3600*1000); 9 cookieString=cookieString+"; expires="+date.toGMTString(); 10 } 11 document.cookie=cookieString; 12 }
31 获取指定cookie
1 function getCookie(name){ 2 //获取cookie字符串 3 var strCookie=document.cookie; 4 //将字符串用;分割成各单个cookie数组 5 var arrCookie=strCookie.split(";"); 6 for(var i=0;i<arrCookie.length;i++){ 7 //对每一个cookie处理 8 var arr=arrCookie[i].split("="); 9 if("name"==arr[0]){ 10 name=arr[1]; 11 break; 12 } 13 } 14 }
32 加入收藏夹
1 function AddFavorite(sUrl,sTitle){ 2 try{//ie 3 window.external.addFavorite(sUrl,sTitle); 4 }catch(e){ 5 try{//ff 6 window.sideBar.addPanel(sTitle,sUrl,""); 7 }catch(e){//其他 8 alert("加入收藏失败，请使用Ctrl+D进行添加"); 9 } 10 } 11 }
33 判断IE6
1 //方法一 2 var isIE6= /msie 6/i.test(navigator.userAgent); 3 4 //方法2： 5 var isIE6= navigator.appVersion.indexOf("MSIE 6")>-1; 6 //方法一和二是通过navigator对象获取浏览器信息字符串，获取相关信息确认是否是IE6
34 跨域解决方法
1 //方法一 document.domain+iframe 2 //这种方式适用于{www.kuqin.com, kuqin.com, script.kuqin.com, css.kuqin.com}中的任何页面相互通信。 3 www.a.com的a.html 4 document.domain=‘a.com‘;//配置其主域为要访问页面的主域 5 var ifr=document.createElement(‘iframe‘); 6 ifr.src=‘http://script.a.com/b.html‘;//这个iframe中存放要访问的页面 7 ifr.style.style=‘none‘; 8 document.appendChild(ifr); 9 ifr.onload=function(){ 10 //获取iframe的文档 11 var doc=ifr.contentDocument||ifr.contentWindow.documnet; 12 //在a.html中操作 13 alert(doc.getElementsByTagName("h1")[0].nodeValue); 14 } 15 script.a.com的b.html文档中document.domain=‘a.com‘ 16 //方法二 动态创建script（jsonp） 17 function load_script(url, callback){ 18 var head = document.getElementsByTagName(‘head‘)[0]; 19 var script = document.createElement(‘script‘); 20 script.type = ‘text/javascript‘; 21 script.src = url; 22 //借鉴了jQuery的script跨域方法 23 script.onload = script.onreadystatechange = function(){ 24 if((!this.readyState||this.readyState === "loaded"||this.readyState === "complete")){ 25 callback && callback(); 26 // Handle memory leak in IE 27 script.onload = script.onreadystatechange = null; 28 if ( head && script.parentNode ) { 29 head.removeChild( script ); 30 } 31 } 32 }; 33 // Use insertBefore instead of appendChild to circumvent an IE6 bug. 34 head.insertBefore( script, head.firstChild ); 35 } 36 //callback对跨域中的数据进行操作 37 load_script(‘http://suggestion.baidu.com/su?wd=w‘,function(){alert(‘loaded‘)}); 38 //方法三window.name实现的跨域数据传输(略)
35 加载样式文件
1 function loadStyle(url){ 2 try { 3 document.createStyleSheet(url); 4 }catch(e){ 5 var cssLink=document.createElement(‘link‘); 6 cssLink.rel=‘stylesheet‘; 7 cssLink.type=‘text/css‘; 8 cssLink.href=url; 9 var head=document.getElementsByTagName(‘head‘)[0]; 10 head.appendChild(cssLink); 11 } 12 }
36 今天是星期几
1 "今天是星期"+"0123456".charAt(new Date().getDay());
38 返回按id检索的元素对象
1 function $(id){ 2 return !id?null:document.getElementsById(id) 3 }
39 元素显示的通用方法
1 function display(id){ 2 var obj=$(id); 3 //visibility占用空间 4 if(obj.style.visibility){ 5 obj.style.visibility=obj.style.visibility==‘visibe‘?‘hidden‘:‘visible‘ 6 }else{ 7 //display不占用空间 8 obj.style.display=obj.style.display==‘‘?‘none‘:‘‘ 9 } 10 }
40 insrtAfter函数
1 function insertAfter(newChild,targetChild){ 2 //获取待操作节点的父节点 3 var parent=targetChild.parentNode； 4 if(parent.lastChild==targetChild){ 5 //若目标节点为最后子节点，替换 6 parent.lastChild=newChild; 7 }else{ 8 //在目标节点的兄弟节点之前插入 9 parent.insertBefore(newChild,targetChild.nextSibling) 10 } 11 12 }
41 压缩css样式代码
1 function yasuoCss(s){ 2 s=s.replace(/\/\*(.|\n)*?\*\//g,"");//删除注释 3 s=s.replace(/\s*([\{\}\:\;\,])\s*/g,"$1") 4 s=s.replace(/\,[\s\.\#\d]*\{/g,"{");//容错处理 5 s=s.replace(/;\s*;/g,";");//清除连续分号 6 s=s.match(/^\s*(\S+(\s+\S+)*)\s*$/)//去掉首尾空白 7 return (s===null)?"":s[1] 8 }
42 获取当前路径
1 var currentPageUrl=‘‘; 2 if(typeof this.href==="undefined"){ 3 currentPageUrl=document.location.tostring.toLowerCase(); 4 }else{ 5 currentPageUrl=this.href.tostring.toLowerCase(); 6 }
43 checkbox全选全不选
1 function checkAll() { 2 var selectall = document.getElementById("selectall"); 3 var allbox = document.getElementsByName("allbox"); 4 if (selectall.checked) { 5 for (var i = 0; i < allbox.length; i++) { 6 allbox.checked = true; 7 } 8 } else { 9 for (var i = 0; i < allbox.length; i++) { 10 allbox.checked = false; 11 } 12 } 13 }
44 判断移动设备
1 function isApple(){ 2 return (/iphone|ipod|ipad|macintosh/i.test(navigation.userAgent.toLowerCase())); 3 } 4 function isAndroid(){ 5 return (/android/.test(navigator.userAgent.toLowerCase())); 6 }
45 克隆对象
1 //单步操作 2 function clone(obj){ 3 if(obj===null||"object"!=typeof obj) return obj; 4 //handle date 5 if(obj instanceof Date){ 6 var copy=new Date(); 7 copy.setTime(obj.getTime()); 8 return copy; 9 } 10 //handle Array 11 if(obj instanceof Array){ 12 var copy=[]; 13 for(var i=0;var len=obj.length;i++){ 14 copy[i]=clone(obj[i]); 15 } 16 return copy; 17 } 18 //handle object 19 if(obj instanceof Object){ 20 var copy={}; 21 for(var attr in obj){ 22 if(obj.hasOwnProperty(attr)){ 23 copy[attr]=clone(obj.attr); 24 } 25 } 26 return copy 27 } 28 throw new Error("Unable to copy obj! "); 29 } 30 //利用递归深度克隆 31 Object.prototype.clone=function(){ 32 var objClone; 33 if(this.constructor==Object){ 34 objClone=new this.constructor(); 35 }else{ 36 objClone=new this.constructor(this.valueOf()); 37 } 38 for(var key in this){ 39 if ( objClone[key] != this[key] ){ 40 if ( typeof(this[key]) == ‘object‘ ){ 41 objClone[key] = this[key].Clone(); 42 }else{ 43 objClone[key] = this[key]; 44 } 45 } 46 } 47 objClone.toString = this.toString; 48 objClone.valueOf = this.valueOf; 49 return objClone; 50 } 51 }
46 敏感词过滤
1 function badWord(text,words){ 2 //将文本转化成字符串 3 text=String(text||‘‘); 4 words=words||[]; 5 var reg=new RegExp(words.join(‘|‘),‘g‘); 6 var self=this; 7 return text.replace(reg,function($0){ 8 var length=String($0||‘‘).length; 9 //用*替代 10 return self.repeat(‘*‘,length); 11 }) 12 }
47 常用正则
1 var RegExps={ 2 isEmail:function(mail){ 3 return /^([a-z0-9]+[_\-\.]?)*[a-z0-9]+@([a-z0-9]+[_\-\.]?)*[a-z0-9])+\.[a-z]{2,5}/i.test(mail); 4 }, 5 isIdCard:function(card){ 6 return /^(\d{14}|\d{17})(\d|[xX])/.test(card); 7 }, 8 isMobile:function(mobile){ 9 return /^0*1\d{10}$/.test(mobile); 10 }, 11 isQQ:function(qq){ 12 return /^[1-9]\d{4,10}$/.test(qq); 13 }, 14 isTel:function(tel){ 15 return /^\d{3,4}-\d{7,8}(-\d{1,6})?$/.text(tel); 16 }, 17 isUrl:function(url){ 18 return /https?:\/\/[a-z0-9\.\-]{1,255}\.[0-9a-z\-]{1,255}/i.test(url); 19 }, 20 isColor:function(color){ 21 return /#([\da-f]{3}){1,2}$/i.test(color); 22 }, 23 isFloat:function(num){ 24 return/^(([1-9]\d*)|(\d+\.\d+)|0)/.test(num); 25 }, 26 isInt:function(num){ 27 return /^[1-9]\d*$/.test(num); 28 }, 29 }
48 获取数组中的最大最小值
1 //利用math对象 2 var max=Math.max.apply(null,array); 3 var min=Math.min.apply(null,array);
49 反转文本顺序
1 //分解字符串为数组 2 var aTxt=‘反转文本顺序‘.split(‘‘); 3 var str=‘‘; 4 for(var i=aTxt.length-1;i>0;i--){ 5 str+=aTxt[i] 6 }
50 选择框跳转页面
1 <select onchange="window.open(this.options[this.selectedIndex].value)"> 2 <option value="http://www.baidu.com/" selected >百度</option> 3 <option value="http://www.163.com/">网易</option> 4 </select>
51 批量修改样式
1 //给一个HTML元素设置css属性，如 2 var head= document.getElementById("head"); 3 head.style.width = "200px"; 4 head.style.height = "70px"; 5 head.style.display = "block"; 6 //这样写太罗嗦了，为了简单些写个工具函数，如 7 function setStyle(obj,css){ 8 for(var atr in css){ 9 obj.style[atr] = css[atr]; 10 } 11 } 12 var head= document.getElementById("head"); 13 setStyle(head,{width:"200px",height:"70px",display:"block"}) 14 //使用了cssText属性，后在各浏览器中测试都通过了。 15 var head= document.getElementById("head"); 16 head.style.cssText="width:200px;height:70px;display:bolck";
52 获取Url中的get参数值
1 function get_get(){ 2 //将url地址用?分割成两个字符数组 3 querystr=window.location.href.split("?"); 4 if(querystr[1]){ 5 //将上面得到的字符数组1用&分割成一个新字符数组 6 Gets=query[1].split("&"); 7 //新建一个存储结果的数组 8 get=new Array(); 9 for(var i=0;i<Gets.length;i++){ 10 //每个元素用=分割形成又一个临时数组 11 tem_arr=Gets[i].split("="); 12 key=tmp_arr[0]; 13 get[key]=tmp_arr[1] 14 } 15 } 16 return get; 17 }
53 在新窗体中打开页面
1 window.open
(‘page.html‘,‘newwindow‘,‘height=100,width=400,top=0,left=0,
toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no‘)
2 //宽为100，高为400，距屏顶0象素，屏左0象素，无工具条，无菜单条，无滚动条，不可调整大小，
无地址栏，无状态栏。
54 获取单选按钮的值
1 //<input type="radio" name="browser" value="Internet Explorer" />Internet Explorer<br />,一个表单里面有多个单选框，且name属性一致 2 function get_radio_value(field){//field为单选按钮的name属性值 3 if(field&&field.length){ 4 for(var i=0;i<field.length;i++){ 5 if(field[i].checked){//若此按钮选中 6 return field[i].value; 7 } 8 }else{return;} 9 } 10 }
55 获取复选框的值
1 function get_checkbox_value(field){ 2 if(field&&field.length){ 3 for(var i=0;i<field.length;i++){ 4 //被选中且不能禁用 5 if(field[i].checked && !field[i].disabled){ 6 return field[i].value; 7 } 8 } 9 }else { 10 return; 11 } 12 }