收藏的一些javascript片斷

時間 2019-11-13

原文原文鏈接

學習js也頗有一段時間，收集了一些js的片斷。特意整理排版了一下，以一個js初學者的視界來分析註釋了這些代碼段，暫且不去討論它的性能和優化問題，相信會對一些初學者有用。第一次發文，定許多紕漏和不足的地方，但願能夠交流和學習。javascript

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 獲取複選框的值.
css

1 javascript動態加載html

 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 獲取字符串的字節長度java

 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-頁面的一切都加載完後執行)node

 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屬性android

 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 數組檢測git

 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 繼承web

 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 簡單事件綁定ajax

 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 瀏覽器判斷chrome

 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,'&amp;').replace(/\"/g,'&quot;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
4 }
5 function HtmlDecode(text) {
6     return text.replace(/&amp;/g, '&').replace(/&quot;/g, '\"').replace(/&lt;/g, '<').replace(/&gt;/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 }

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。