Javascript 函數(比較全)

來源:互聯網
上載者:User
js函數(比較全) 轉自平平2008-12-23 13:23js函數集
·字串(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") ){ }

//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 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,*";

詳細見:http://www.cnblogs.com/xzp/archive/2008/09/17/1292649.html

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.