学习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][email protected]([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 }
收藏的一些javascript片段
时间： 2024-10-10 00:12:33