JS語法大全

js函數集
·字符串(String) 
1.聲明 
var myString = new String("Every good boy does fine."); 
var myString = "Every good boy does fine.";

2.字符串鏈接 
var myString = "Every " + "good boy " + "does fine."; 
var myString = "Every "; myString += "good boy does fine.";

3.截取字符串 
//截取第 6 位開始的字符 
var myString = "Every good boy does fine."; 
var section = myString.substring(6); //結果: "good boy does fine."

//截取第 0 位開始至第 10 位爲止的字符 
var myString = "Every good boy does fine."; 
var section = myString.substring(0,10); //結果: "Every good"

//截取從第 11 位到倒數第 6 位爲止的字符 
var myString = "Every good boy does fine."; 
var section = myString.slice(11,-6); //結果: "boy does"

//從第 6 位開始截取長度爲 4 的字符 
var myString = "Every good boy does fine."; 
var section = myString.substr(6,4); //結果: "good"

4.轉換大小寫 
var myString = "Hello"; 
var lcString = myString.toLowerCase(); //結果: "hello" 
var ucString = myString.toUpperCase(); //結果: "HELLO"

5.字符串比較 
var aString = "Hello!"; 
var bString = new String("Hello!"); 
if( aString == "Hello!" ){ } //結果: true 
if( aString == bString ){ } //結果: true 
if( aString === bString ){ } //結果: false (兩個對象不一樣,儘管它們的值相同)

6.檢索字符串 
var myString = "hello everybody."; 
// 若是檢索不到會返回-1,檢索到的話返回在該串中的起始位置 
if( myString.indexOf("every") > -1 ){ } //結果: true

7.查找替換字符串 
var myString = "I is your father."; 
var result = myString.replace("is","am"); //結果: "I am your father."

8.特殊字符: 
\b : 後退符 \t : 水平製表符 
\n : 換行符 \v : 垂直製表符 
\f : 分頁符 \r : 回車符 
\" : 雙引號 \' : 單引號 
\\ : 反斜杆

9.將字符轉換成Unicode編碼 
var myString = "hello"; 
var code = myString.charCodeAt(3); //返回"l"的Unicode編碼(整型) 
var char = String.fromCharCode(66); //返回Unicode爲66的字符

10.將字符串轉換成URL編碼 
var myString = "hello all"; 
var code = encodeURI(myString); //結果: "hello%20all" 
var str = decodeURI(code); //結果: "hello all" 
//相應的還有: encodeURIComponent() decodeURIComponent()

11.將字符串轉換成base64編碼 
// base64Encode() base64Decode() 用法同上

//-----------------------------------------------------------------------

·數字型(Number) 
1.聲明 
var i = 1; 
var i = new Number(1);

2.字符串與數字間的轉換 
var i = 1; 
var str = i.toString(); //結果: "1" 
var str = new String(i); //結果: "1" 
i = parseInt(str); //結果: 1 
i = parseFloat(str); //結果: 1.0

//注意: parseInt,parseFloat會把一個相似於"32G"的字符串,強制轉換成32

3.判斷是否爲有效的數字 
var i = 123; var str = "string"; 
if( typeof i == "number" ){ } //true

//某些方法(如:parseInt,parseFloat)會返回一個特殊的值NaN(Not a Number) 
//請注意第2點中的[注意],此方法不徹底適合判斷一個字符串是不是數字型!! 
i = parseInt(str); 
if( isNaN(i) ){ }

4.數字型比較 
//此知識與[字符串比較]相同

5.小數轉整數 
var f = 1.5; 
var i = Math.round(f); //結果:2 (四捨五入) 
var i = Math.ceil(f); //結果:2 (返回大於f的最小整數) 
var i = Math.floor(f); //結果:1 (返回小於f的最大整數)

6.格式化顯示數字 
var i = 3.14159;

//格式化爲兩位小數的浮點數 
var str = i.toFixed(2); //結果: "3.14"

//格式化爲五位數字的浮點數(從左到右五位數字,不夠補零) 
var str = i.toPrecision(5); //結果: "3.1415"

7.X進制數字的轉換 
//不是很懂 -.- 
var i = parseInt("0x1f",16); 
var i = parseInt(i,10); 
var i = parseInt("11010011",2);

8.隨機數 
//返回0-1之間的任意小數 
var rnd = Math.random(); 
//返回0-n之間的任意整數(不包括n) 
var rnd = Math.floor(Math.random() * n)

//-----------------------------------------------------------------------

·Math對象 
1. Math.abs(num) : 返回num的絕對值 
2. Math.acos(num) : 返回num的反餘弦值 
3. Math.asin(num) : 返回num的反正弦值 
4. Math.atan(num) : 返回num的反正切值 
5. Math.atan2(y,x) : 返回y除以x的商的反正切值 
6. Math.ceil(num) : 返回大於num的最小整數 
7. Math.cos(num) : 返回num的餘弦值 
8. Math.exp(x) : 返回以天然數爲底,x次冪的數 
9. Math.floor(num) : 返回小於num的最大整數 
10.Math.log(num) : 返回num的天然對數 
11.Math.max(num1,num2) : 返回num1和num2中較大的一個 
12.Math.min(num1,num2) : 返回num1和num2中較小的一個 
13.Math.pow(x,y) : 返回x的y次方的值 
14.Math.random() : 返回0到1之間的一個隨機數 
15.Math.round(num) : 返回num四捨五入後的值 
16.Math.sin(num) : 返回num的正弦值 
17.Math.sqrt(num) : 返回num的平方根 
18.Math.tan(num) : 返回num的正切值 
19.Math.E : 天然數(2.718281828459045) 
20.Math.LN2 : 2的天然對數(0.6931471805599453) 
21.Math.LN10 : 10的天然對數(2.302585092994046) 
22.Math.LOG2E : log 2 爲底的天然數(1.4426950408889634) 
23.Math.LOG10E : log 10 爲底的天然數(0.4342944819032518) 
24.Math.PI : π(3.141592653589793) 
25.Math.SQRT1_2 : 1/2的平方根(0.7071067811865476) 
26.Math.SQRT2 : 2的平方根(1.4142135623730951)

//-----------------------------------------------------------------------

·日期型(Date) 
1.聲明 
var myDate = new Date(); //系統當前時間

var myDate = new Date(yyyy, mm, dd, hh, mm, ss); 
var myDate = new Date(yyyy, mm, dd); 
var myDate = new Date("monthName dd, yyyy hh:mm:ss"); 
var myDate = new Date("monthName dd, yyyy"); 
var myDate = new Date(epochMilliseconds);

2.獲取時間的某部份 
var myDate = new Date(); 
myDate.getYear(); //獲取當前年份(2位) 
myDate.getFullYear(); //獲取完整的年份(4位,1970-????) 
myDate.getMonth(); //獲取當前月份(0-11,0表明1月) 
myDate.getDate(); //獲取當前日(1-31) 
myDate.getDay(); //獲取當前星期X(0-6,0表明星期天) 
myDate.getTime(); //獲取當前時間(從1970.1.1開始的毫秒數) 
myDate.getHours(); //獲取當前小時數(0-23) 
myDate.getMinutes(); //獲取當前分鐘數(0-59) 
myDate.getSeconds(); //獲取當前秒數(0-59) 
myDate.getMilliseconds(); //獲取當前毫秒數(0-999) 
myDate.toLocaleDateString(); //獲取當前日期 
myDate.toLocaleTimeString(); //獲取當前時間 
myDate.toLocaleString( ); //獲取日期與時間

3.計算以前或將來的時間 
var myDate = new Date(); 
myDate.setDate(myDate.getDate() + 10); //當前時間加10天 
//相似的方法都基本相同,以set開頭,具體參考第2點

4.計算兩個日期的偏移量 
var i = daysBetween(beginDate,endDate); //返回天數 
var i = beginDate.getTimezoneOffset(endDate); //返回分鐘數

5.檢查有效日期 
//checkDate() 只容許"mm-dd-yyyy"或"mm/dd/yyyy"兩種格式的日期 
if( checkDate("2006-01-01") ){ }

//正則表達式(本身寫的檢查 yyyy-mm-dd, yy-mm-dd, yyyy/mm/dd, yy/mm/dd 四種) 
var r = /^(\d{2}|\d{4})[\/-]\d{1,2}[\/-]\d{1,2}$/; 
if( r.test( myString ) ){ }

//-----------------------------------------------------------------------

·數組(Array) 
1.聲明 
var arr = new Array(); //聲明一個空數組 
var arr = new Array(10); //聲明一個10個長度的數組 
var arr = new Array("Alice", "Fred", "Jean"); //用值初始化數組 
var arr = ["Alice", "Fred", "Jean"]; //用值初始化數組 
var arr = [["A","B","C"][1,2,3]]; //聲明一個二(多)維數組

2.數組的訪問 
arr[0] = "123"; //賦值 
var str = arr[0]; //獲取 
arr[0][0] = "123"; //多維數組賦值

3.數組與字符串間的轉換 
var arr = ["A","B","C","D"]; //聲明

//數組按分隔符轉換成字符串 
var str = arr.join("|"); //結果: "A|B|C|D"

//字符串切割成數組 
arr = str.split("|");

4.遍歷數組 
for( var i=0; i<arr.length; i++ ){ alert(arr[i]); }

5.排序 
var arr = [12,15,8,9]; 
arr.sort(); //結果: 8 9 12 15

6.組合與分解數組 
var arr1 = ["A","B","C","D"]; 
var arr2 = ["1","2","3","4"];

//獎兩個數組組合成一個新的數組 
var arr = arr1.concat(arr2); //結果: ["A","B","C","D","1","2","3","4"]

//將一個數組切成兩個數組(參數1:起始索引,參數2:切割長度) 
var arr3 = arr.splice(1,3); //結果: arr3:["B","C","D"] arr["A","1","2","3","4"]

//將一個數組切成兩個數組,並在原數組補新值 
var arr4 = arr.splice(1,3,"AA"); //結果: arr4:["B","C","D"] arr["A","AA","1","2","3","4"]

//-----------------------------------------------------------------------

·自定義對象 
1.聲明: 
function myUser(uid,pwd){ 
this.uid = uid; 
this.pwd = pwd || "000000"; //默認值 
this.show = showInfo; //方法 
}

//下面的函數不是自定義對象,是自定義對象的方法.繼續看下去就明白了 
function showInfo(){ 
alert("用戶名:" + this.uid + ",密碼:" + this.pwd) 
}

2.實例化: 
var user = new myUser("user","123456"); 
var user = {uid:"user",pwd:"123456"};

3.獲取與設置 
alert("用戶名是:" + user.uid); //get 
user.uid = "newuser"; //set 
user.show(); //調用show()方法

//-----------------------------------------------------------------------

·變量 函數 流程控制 
1.變量 
var i = 1; 
var i = 1, str = "hello";

2.函數 
function funName(){ 
//do something. 
} 
function funName(param1[,paramX]){ 
//do something. 
}

3.嵌套函數 
//某種狀況,你須要建立一個函數自己所獨有的函數. 
function myFunction(){ 
//do something. 
privateFunction(); 
function privateFunction(){ 
//do something. 
} 
}

4.匿名函數 
var tmp = function(){ alert("only test."); } 
tmp();

5.延遲函數調用 
var tId = setTimeout("myFun()",1000); //延遲1000毫秒後再調用myFun()函數 
fucntion myFun(){ 
//do something 
clearTimeout(tId); //銷燬對象 
}

6.流程控制 
if( condition ){ } 
if( condition ){ } else{ } 
if( condition ){ } else if( condition ){ } else{ }

switch( expression ){ 
case valA : statement; break; 
case valB : statement; break; 
default : statement; break; 
}

7.異常捕獲 
try{ expression } catch(e){ } finally{ }

//不處理任何異常 
window.onerror = doNothing; 
function doNothing(){ return true; }

//異常類可用的屬性 
description : 異常描述(IE,NN) 
fileName : 異常頁面URI(NN) 
lineNumber : 異常行數(NN) 
message : 異常描述(IE,NN) 
name : 錯誤類型(IE,NN) 
number : 錯誤代碼(IE)

//錯誤信息(兼容全部瀏覽器) 
try{ } 
catch(e){ 
var msg = (e.message) ? e.message : e.description; 
alert(msg); 
}

8.加快腳本的執行速度 
-避免使用 eval() 函數 
-避免使用 with 關鍵字 
-將重複的表達式賦值精簡到最小 
-在較大的對象中使用索引來查找數組 
-減小 document.write() 的使用

//-----------------------------------------------------------------------

·瀏覽器特徵( navigator ) 
1.瀏覽器名稱 
//IE : "Microsoft Internet Explorer" 
//NS : "Netscape" 
var browserName = navigator.appName;

2.瀏覽器版本 
bar browserVersion = navigator.appVersion;

3.客戶端操做系統 
var isWin = ( navigator.userAgent.indexOf("Win") != -1 ); 
var isMac = ( navigator.userAgent.indexOf("Mac") != -1 ); 
var isUnix = ( navigator.userAgent.indexOf("X11") != -1 );

4.判斷是否支持某對象,方法,屬性 
//當一個對象,方法,屬性未定義時會返回undefined或null等,這些特殊值都是false 
if( document.images ){ } 
if( document.getElementById ){ }

5.檢查瀏覽器當前語言 
if( navigator.userLanguage ){ var l = navigator.userLanguage.toUpperCase(); }

6.檢查瀏覽器是否支持Cookies 
if( navigator.cookieEnabled ){ }

//-----------------------------------------------------------------------

·控制瀏覽器窗口( window ) 
1.設置瀏覽器的大小 
window.resizeTo(800, 600); //將瀏覽器調整到800X600大小 
window.resizeBy(50, -10); //在原有大小上改變增大或減少窗口大小

2.調整瀏覽器的位置 
window.moveTo(10, 20); //將瀏覽器的位置定位到X:10 Y:20 
window.moveBy(0, 10); //在原有位置上移動位置(偏移量)

3.建立一個新的窗口 
var win = window.open("about.htm","winName","height=300,width=400");

//參數 
alwaysLowered //始終在其它瀏覽器窗口的後面(NN) 
alwaysRaised //始終在其它瀏覽器窗口的前面(NN) 
channelMode //是否爲導航模式(IE) 
copyhistory //複製歷史記錄至新開的窗口(NN) 
dependent //新窗口隨打開它的主窗口關閉而關閉(NN) 
fullscreen //全屏模式(全部相關的工具欄都沒有)(IE) 
location //是否顯示地址欄(NN,IE) 
menubar //是否顯示菜單欄(NN,IE) 
scrollbars //是否顯示滾動條(NN,IE) 
status //是否顯示狀態欄(NN,IE) 
toolbar //是否顯示工具欄(NN,IE) 
directories //是否顯示連接欄(NN,IE) 
titlebar //是否顯示標題欄(NN) 
hotkeys //顯示菜單快捷鍵(NN) 
innerHeight //內容區域的高度(NN) 
innerWidth //內容區域的寬度(NN) 
resizable //是否能夠調整大小(NN,IE) 
top //窗口距離桌面上邊界的大小(NN,IE) 
left //窗口距離桌面左邊界的大小(NN,IE) 
height //窗口高度(NN,IE) 
width //瀏覽器的寬度

4.與新窗口通信 
win.focus(); //讓新窗口得到焦點 
win.document.write("abc"); //在新窗口上操做 
win.document.close(); //結束流操做 
opener.close();

5.模式窗口 
window.showModalDialog("test.htm",dialogArgs,"param"); //傳遞對象 
window.showModelessDialog("test.htm",myFunction,"param"); //傳遞函數 
window.dialogArguments //對話框訪問父窗口傳遞過來的對象 
window.returnValue //父窗口獲取對話框返回的值

//參數 
center //窗口居中屏幕 
dialogHeight //窗口高度 
dialogWidth //窗口寬度 
dialogTop //窗口距離屏幕的上邊距 
dialogLeft //窗口距離屏幕的左邊距 
edge //邊框風格(raised|sunken) 
help //顯示幫助按鈕 
resizable //是否能夠改變窗口大小 
status //是否顯示狀態欄

//例子 
<script> 
function openDialog(myForm) { 
var result = window.showModalDialog("new.html",myForm,"center"); 
} 
</script> 
<form action="#" onsubmit="return false"> 
<input type="text" id="txtId"> 
<input type="button" id="btnChk" value="驗證是否可用" onclick="openDialog(this.form);"> 
</form>

//另外一個頁面new.html 
<script> 
window.dialogArguments.btnChk.enabled = false; //將父窗口中的按鈕設置爲不可用 
//do something to check the Id. 
window.write("用戶ID: " + window.dialogArguments.txtId.value + " 可以使用!"); //獲取文本框的值 
</script>

//-----------------------------------------------------------------------

·管理框架網頁( frames ) 
1.建立一個框架架構網頁 
<html> 
<frameset rows="50, *"> 
<frame name="header" src="header.html"> 
<frame name="main" src="main.html"> 
</frameset> 
</html>

2.訪問框架網頁 
window.frames[i] 
window.frames["frameName"] 
window.frameName

window.frames["frameName"].frames["frameName2"] 
parent.frames["frameName"] 
top.frames["frameName"]

3.將某一頁面定向到某框架 
<a href="new.html" target="main"> 
location = "new.html"; 
parent.frameName.location.href = "new.html"; 
top.frameName.location = "new.html";

4.強制不讓其它框架引用某頁面 
if (top != self) { 
top.location.href = location.href; 
}

5.更改框架的大小 
document.framesetName.rows = "50,*"; 
document.framesetName.cols = "50,*";

6.動態建立框架網頁 var frag = document.createDocumentFragment( ); var newFrame= document.createElement("frame"); newFrame.id = "header"; newFrame.name = "header"; newFrame.src="header.html" frag.appendChild(newFrame); newFrame = document.createElement("frame"); newFrame.id = "main"; newFrame.name = "main"; newFrame.src="main.html" frag.appendChild(newFrame); document.getElementById("masterFrameset").rows = "50,*";