js基礎（常用文法、類型、函數）

標籤：des   style   http   io   color   ar   os   使用   sp   

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 ){ } //結果: true7.尋找替換字串 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"的字串,強制轉換成323.判斷是否為有效數字 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") ){ }//Regex(自己寫的檢查 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 156.組合與分解數組 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.frameNamewindow.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,*";

js基礎（常用文法、類型、函數）