JS常用代码块

版权声明：本文为博主原创文章，未经博主允许不得转载。转载请标明出处：http://blog.csdn.net/ligang2585116！

目录(?)[+]

1. 加入收藏夹代码

[javascript]  view plain  copy

1. <script type="text/javascript">  
2. function AddFavorite(sURL,sTitle){  
3.     try{  
4.         window.external.addFavorite(sURL, sTitle);  
5.     }catch (e){  
6.         try{  
7.             window.sidebar.addPanel(sTitle, sURL, "");  
8.         }catch (e){  
9.             alert("加入收藏失败，请使用Ctrl+D进行添加");  
10.         }  
11.     }  
12. }  
13. </script>  
14. <a href=”javascript:favorite(‘李刚的学习专栏’,’http://blog.csdn.net/ligang2585116’)”>加入收藏</a>  

2. 设置给任何层添加事件触发调用对象层的内容

[javascript]  view plain  copy

1. function showid(idname){  
2.     var newBox=document.getElementById(idname);  
3.     console.log(newBox)  
4. }  
5. //调用方法：   
6. <a href="#none" onClick="showid('box')">测试按钮</a>  
7. <div id="box">测试内容</div>  

3. js 获取文档高度

网页可见区域宽：document.body.clientWidth
网页可见区域高：document.body.clientHeight
网页可见区域宽：document.body.offsetWidth (包括边线的宽)
网页可见区域高：document.body.offsetHeight (包括边线的宽)
网页正文全文宽：document.body.scrollWidth
网页正文全文高：document.body.scrollHeight
网页被卷去的高：document.body.scrollTop
网页被卷去的左：document.body.scrollLeft
网页正文部分上：window.screenTop
网页正文部分左：window.screenLeft
屏幕分辨率的高：window.screen.height
屏幕分辨率的宽：window.screen.width
屏幕可用工作区高度：window.screen.availHeight
屏幕可用工作区宽度：window.screen.availWidth
HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

4. js获取对象字符串，截取所需位数的内容

[javascript]  view plain  copy

1. var data = $('a').text();  
2. data = data.length > 20 ? (data.substring(0,20)+"…") : data;  

5. Javascript获取地址栏参数的三种方法

[javascript]  view plain  copy

1. //方法一：  
2. <script type="text/javascript">  
3. String.prototype.getQuery = function(name) {  
4.     var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");  
5.     var r = this.substr(this.indexOf("\?")+1).match(reg);  
6.     if (r!=null)   
7.         return unescape(r[2]);   
8.     return null;  
9. }  
10. var strHref = "www.cnlei.org/index.htm?a=aaa&b=bbb&c=ccc";  
11. console.log(strHref.getQuery("a"));  
12. console.log(strHref.getQuery("b"));  
13. console.log(strHref.getQuery("c"));  
14. </script>  
15. //方法二：  
16. <script type="text/javascript">  
17. function getUrlPara(paraName){  
18.     var sUrl = location.href;  
19.     var sReg = "(?:\\?|&){1}"+paraName+"=([^&]*)";  
20.     var re=new RegExp(sReg,"gi");  
21.     re.exec(sUrl);  
22.     return RegExp.$1;  
23. }  
24. //应用实例：test_para.html?a=11&b=22&c=33  
25. console.log(getUrlPara("a"));  
26. console.log(getUrlPara("b"));  
27. </script>  
28. //方法三：  
29. <script type="text/javascript">  
30. function Request(strName){  
31.     var strHref = "www.cnlei.org/index.htm?a=aaa&b=bbb&c=ccc";  
32.     var intPos = strHref.indexOf("?");  
33.     var strRight = strHref.substr(intPos + 1);  
34.     var arrTmp = strRight.split("&");  
35.     for(var i = 0; i < arrTmp.length; i++) {  
36.         var arrTemp = arrTmp[i].split("=");  
37.         if(arrTemp[0].toUpperCase() == strName.toUpperCase())   
38.             return arrTemp[1];  
39.     }  
40.     return "";  
41. }  
42. console.log(Request("a"));  
43. console.log(Request("b"));  
44. console.log(Request("c"));  
45. </script>  

6. div已经有一个class值，s再给它添加一个class值

[javascript]  view plain  copy

1. document.getElementById("comn").className+=" comn";  

7. iframe操作

a. 在iframe子页面中获取当前iframe的id(firefox可以)

[javascript]  view plain  copy

1. var frameId = window.frameElement && window.frameElement.id || '';  

遍历父页面所有iframe并输出ID(firefox可以)

[javascript]  view plain  copy

1. function iframeID(){  
2.     var fs = window.parent.window.frames;  
3.     for(var i = 0; i < fs.length; i++){  
4.         if (window == fs[i]){  
5.             console.log(window.parent.document.getElementsByTagName("iframe")[i].id)  
6.             return window.parent.document.getElementsByTagName("iframe")[i].id;  
7.         }  
8.     }  
9. };  

b. js判断iframe是否加载完成

[javascript]  view plain  copy

1. var iframe = document.createElement("iframe");  
2. iframe.src = "http://www.planabc.net";  
3. if (iframe.attachEvent){  
4.     iframe.attachEvent("onload", function(){  
5.         alert("Local iframe is now loaded.");  
6.     });  
7. } else {  
8.     iframe.onload = function(){  
9.         alert("Local iframe is now loaded.");  
10.     };  
11. }  

c. js判断iframe是加载成功还是加载失败

[javascript]  view plain  copy

1. url = document.getElementById('iframe1').src;  
2. var xmlhttp = new XMLHttpRequest();  
3. xmlhttp.open("GET",url,true);  
4. xmlhttp.send();  
5. xmlhttp.onreadystatechange = function(){  
6.     if(xmlhttp.readyState == 4){  
7.         if (xmlhttp.status == 200){  
8.             alert("加载成功！");  
9.         } else {  
10.             alert("加载失败！");  
11.         }  
12.     }  
13. }  
14. var oFrm = document.getElementById("ifrm");  
15. oFrm.onload = oFrm.onreadystatechange = function() {  
16.     if (this.readyState && this.readyState != 'complete')   
17.         return;  
18.     else {  
19.         onComplete();  
20.     }  
21. }  

d 加载iframe 禁用缓存
1. 将http header访问设置成no-cache的：

[html]  view plain  copy

1. <meta HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">  
2. <meta HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">  

2. 在web site 后面加个随机参数，绕过相同url读取cache问题

[javascript]  view plain  copy

1. iframeObj.src = "http://www.example.com/page/myframe.html?random=" + (new Date()).getTime() + Math.floor(Math.random() * 1000000);  

8. 验证邮箱格式是否正确

[javascript]  view plain  copy

1. function chkEmail(strEmail) {  
2.     if (!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(strEmail)) {  
3.         return false;  
4.     }  
5.     else {  
6.         return true;  
7.     }  
8. }  

9. 判断设备为PC或是移动终端

[javascript]  view plain  copy

1. //判断平台  
2. isPCByPlat = function(){  
3.     var platForm = navigator.platform.toLowerCase();  
4.     var isWin = (platForm=="win32")||(platForm=="win64")||(platForm=="windows")||(platForm.indexOf("win") > -1);  
5.     if(isWin)   
6.         return "windows";  
7.     var isMac = (platForm=="mac68k")||(platForm=="macppc")||(platForm=="macintosh")||(platForm=="macintel");  
8.     if(isMac)   
9.         return "mac";  
10.     return false;  
11. };  
12. //判断UA  
13. isPCByOSList = function(uaArg){  
14.     var pcOS = ["AIX","Amiga","BeOS","DragonFly","FreeBSD","GNU","Haiku","HP-UX","IRIX","Joli","Java","Macintosh","Minix","MorphOS","NetBSD","OpenBSD","PClinuxOS","QNX x86pc","SunOS","Ubuntu","Mint","Red Hat","Slackware","SUSE","PCLinuxOS","Debian","Fedora","CentOS","Vine","Arch Linux","Gentoo","Kanotix","Mandriva"];  
15.     for (var i = 0; i < pcOS.length; i++){  
16.         if(uaArg.indexOf(pcOS[i]) > -1){  
17.             return true;  
18.         }  
19.     };  
20.     return false;  
21. };  
22.   
23. if(isPCByPlat() || isPCByOSList(navigator.userAgent)){  
24.     console.log("PC");  
25. } else {  
26.     console.log("Mobile");  
27. };  

10. 动态插入js

[javascript]  view plain  copy

1. function loadScript(url, callback) {  
2.     //创建script  
3.     var script = document.createElement("script");  
4.     script.type = "text/javascript";  
5.     script.src = url;  
6.     document.getElementsByTagName("head")[0].appendChild(script);  
7.     //加载完毕回调  
8.     if(script.readyState) { //for IE  
9.         script.onreadystatechange = function() {  
10.             if(script.readyState == "loaded" || script.readyState == "complete") {  
11.                 script.onreadystatechange = null;  
12.                 if(callback){  
13.                     callback();  
14.                 }  
15.             }  
16.         };  
17.     }else { //for Others  
18.         script.onload = function() {  
19.             if(callback){callback();}  
20.         };  
21.     }  
22. }  
23. //加载script  
24. loadScript("http://www.ueder.net/testhtml/jquery/jquery.js");  

11. js实现页面跳转的几种方式

a. window.location.href="login.jsp?backurl="+window.location.href;
b. window.history.back(-1); //返回
c. window.navigate("top.jsp"); //针对IE的
d. self.location="top.htm";
e. top.location="xx.jsp"; //非法访问

12. js获取css属性值

[javascript]  view plain  copy

1. /** 
2. * GetCurrentStyle 
3. */  
4. function GetCurrentStyle(obj, style){  
5.     if (obj.currentStyle) { //IE浏览器  
6.         return obj.currentStyle[style];  
7.     } else if (window.getComputedStyle) { //W3C标准浏览器  
8.         propprop = style.replace(/([A-Z])/g, "-$1");  
9.         propprop = style.toLowerCase();  
10.         return document.defaultView.getComputedStyle(obj, null)[propprop];  
11.     }  
12.     return null;  
13. }; //GetCurrentStyle  
14.   
15.   
16. var dd = document.getElementById("box");  
17. console.log(GetCurrentStyle(dd, "display"));  

13. 日期转数值

[javascript]  view plain  copy

1. var d = +new Date();  

14. 漂亮的随机码

[javascript]  view plain  copy

1. Math.random().toString(16).substring(2); //14位  
2. Math.random().toString(36).substring(2); //11位  

15. 用0补全位数

[javascript]  view plain  copy

1. function prefixInteger(num, length) {  
2.     return (num / Math.pow(10, length)).toFixed(length).substr(2);  
3. };  
4. prefixInteger(31, 4);//0031