JavaScript學習筆記（八）—— 補
第九章 最後的補充
一、Jquery簡單闡述
JQuery是一個JavaScript庫，旨在減少和簡化處理DOM和添加視覺效果的JavaScript代碼；使用時必須得添加庫路徑；學習路徑：http://jquery.com/
例1：
1 window.onload=function(){ 2 3 alert("the page is loaded!"); 4 5 }
Jqery:
1 $(document).ready(function(){ //在網頁加載完調用的函數 2 3 alert("the page is loaded!"); 4 5 });
進一步簡化：
1 $(function(){ 2 3 alert("the page is loaded!"); 4 5 });
例2：id為buynow的元素添加單擊事件
1 $(function(){ 2 3 $("$buynow").click(function(){ 4 5 alert("I want to buy now!"); 6 7 }); 8 9 });
//要給網頁所有a元素添加單擊事件就將上述 buynow改成a 即可
二、補充的DOM獲取元素的方法
document.getElementsByClassName //返回一個NodeList其中包含所有class指定的元素
document.getElementsByName //返回name特性的所有元素
document.querySelector //將一個選擇器作為參數並返回匹配的第一個元素
document.querySelectorAll //選擇器為參數，返回NodeList所有元素
如：var li=document.querySelector ("#playlist .song");//先查id為playlist元素再查找第一個class特性為song的元素
三、補充對象window的屬性方法
window.innerWidth //瀏覽器寬度 單位px
window.innerHeight //瀏覽器高度 單位px
window.close(); //關閉瀏覽器窗口
window.print(); //使用打印機打印網頁
window.confirm(); //提供Okand Cancle
window.history; //瀏覽器歷史記錄
window.location; //當前網頁的URl，可以設置加載新的網頁
四、arguments
在每個函數中都有一個名為arguments的對象可供使用；以數組形式返回函數的所有參數
1 <script> 2 3 function printArgs(){ 4 5 for(var i=0;i<arguments.length;i++){ 6 7 console.log(arguments[i]); 8 9 } 10 11 } 12 13 14 15 printArgs("one",1,1+5,"five"); 16 17 </script>
五、處理異常
網頁控制器窗口可以報錯，也可以使用try/catch
1 <!doctype html> 2 3 <html lang="en"> 4 5 <head> 6 7 <meta charset="utf-8"> 8 9 <title>Show dogs</title> 10 11 <script> 12 13 window.onload=function(){ 14 15 try{ 16 17 var message=document.getElementById("messge"); 18 19 message.innerHTML="Here‘s the message!"; 20 21 }catch(error){ 22 23 console.log("Erroe! "+error.messsge); 24 25 } 26 27 }; 28 29 </script> 30 31 </head> 32 33 <body> 34 35 <div id="message"></div> 36 37 </body> 38 39 </html>
六、addEventListener添加事件處理程序
給一個事件添加多個處理程序，使用方法addEventListener
例：
1 <!doctype html> 2 3 <html lang="en"> 4 5 <head> 6 7 <meta charset="utf-8"> 8 9 <title>clickme</title> 10 11 <script> 12 13 window.onload=function(){ 14 15 var div=document.getElementById("clickme"); 16 17 if(div.addEventListener){//如果瀏覽器支持該方法 18 19 div.addEventListener("click",handleClick,false); 20 21 //參數：事件名稱，程序名稱，是否向上傳遞的標誌 22 23 }else if(div.attachEvent){//瀏覽器不支持addaddEventListener換方法 24 25 div.attachEvent("onclick",hanleClick);//參數稍有不同且以onclick代click 26 27 } 28 29 }; 30 31 32 33 function handleClick(){ 34 35 var evt=window.event;//瀏覽器是否支持e 36 37 var target; 38 39 if(evt.target){//檢查瀏覽器是否支持 40 41 target=evt.target; 42 43 }else{ 44 45 target=evt.srcElement; 46 47 } 48 49 alert("You Clicked on "+target.id); 50 51 } 52 53 </script> 54 55 </head> 56 57 <body> 58 59 <div id="clickme">dianwo</div> 60 61 </body> 62 63 </html>
七、遞歸
1 <script> 2 3 function fibonacci(n){ 4 5 if(n==0||n==1){ 6 7 return 1; 8 9 }else{ 10 11 return (fibonacci(n-1)+fibonacci(n-2)); 12 13 } 14 15 } 16 17 for(var i=0;i<10;i++){ 18 19 console.log("The fibonacci of "+i+" is "+fibonacci(i)); 20 21 } 22 23 </script>
八、JSON
JavaScript不僅是一種Web編程語言，還正在逐漸成為一種常用的對象存儲和傳輸格式，JSON是JavaScript Object Notation的縮寫；
例1
1 var fidoString=‘{"name":"Fido","breed":"Mixed","weight":38}‘;//單引號為JSON語句，即對象字符串 2 3 var fido=JSON.parse(fidoString);//將字符串轉換為對象
例2：
1 var fido={ 2 3 name:Fido, 4 5 breed:"Mixed", 6 7 weight:38 8 9 }; 10 11 var fidoString=JSON.stringify(fido);//將對象轉換成字符串
九 、服務器端JavaScript
Node.js是當前流行的一種JavaScript服務器端技術，包含自己的運行環境和庫。也是單線程；
學習路徑：http://node.js.org/
十、正則表達式
“+”元字符規定其前導字符必須在目標對象中連續出現一次或多次。
“*”元字符規定其前導字符必須在目標對象中出現零次或連續多次。
“?”元字符規定其前導對象必須在目標對象中連續出現零次或一次。
\s：用於匹配單個空格符，包括tab鍵和換行符；
\S：用於匹配除單個空格符之外的所有字符；
\d：用於匹配從0到9的數字；
\w：用於匹配字母，數字或下劃線字符；
\W：用於匹配所有與\w不匹配的字符；
. ：用於匹配除換行符之外的所有字符。
“^”定位符規定匹配模式必須出現在目標字符串的開頭
“$”定位符規定匹配模式必須出現在目標對象的結尾
“\b”定位符規定匹配模式必須出現在目標字符串的開頭或結尾的兩個
“\B”定位符則規定匹配對象必須位於目標字符串的開頭和結尾兩個邊界之內，
即匹配對象既不能作為目標字符串的開頭，也不能作為目標字符串的結尾。
/[A-Z]/上述正則表達式將會與從A到Z範圍內任何一個大寫字母相匹配。
/[a-z]/上述正則表達式將會與從a到z範圍內任何一個小寫字母相匹配。
/[0-9]/ 上述正則表達式將會與從0到9範圍內任何一個數字相匹配。
/([a-z][A-Z][0-9])+/上述正則表達式將會與任何由字母和數字組成的字符串，如 “aB0” 等相匹配。
{n} n 是一個非負整數。匹配確定的 n 次。例如，‘o{2}‘ 不能匹配 "Bob" 中的 ‘o‘，但是能匹配 "food" 中的兩個 o。
{n,} n 是一個非負整數。至少匹配 n 次。例如，‘o{2,}‘ 不能匹配 "Bob" 中的 ‘o‘，但能匹配 "foooood" 中的所有 o。‘o{1,}‘ 等價於 ‘o+‘。‘o{0,}‘ 則等價於 ‘o*‘。
{n,m} m 和 n 均為非負整數，其中n <= m。最少匹配 n 次且最多匹配 m 次。例如，"o{1,3}" 將匹配 "fooooood" 中的前三個 o。‘o{0,1}‘ 等價於 ‘o?‘。請註意在逗號和兩個數之間不能有空格。
優先級如下：
1. 1．\ 轉義符
2. 2．(), (?, (?=), [] 圓括號和方括號
3. 3．*, +, ?, {n}, {n,}, {n,m} 限定符
4. 4．^, $, \anymetacharacter 位置和順序
5. 5．|“或”操作
JavaScript 1.2中帶有一個功能強大的RegExp()對象，可以用來進行正則表達式的匹配操作。其中的test()方法可以檢驗目標對象中是否包含匹配模式，並相應的返回true或false。
例：
1 var email = obj.email.value; 2 3 var pattern = 4 5 /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/; 6 7 flag = pattern.test(email); 8 9 if(flag) 10 11 { 12 13 alert(“Your email address is correct!”); 14 15 return true; 16 17 }
例:
1 在字符串中執行查找
exec 方法：exec(String source)
例如：
1 function isDigit(s){ 2 3 var reg = /^[0-9]{1,20}$/; 4 5 var result = reg.exec(s); 6 7 //如果格式正確，返回原字符串，否則返回null 8 9 alert(result); 10 11 }
2 在字符串中執行查找
match 方法：match(reg)
例如：
1 function matchDemo(source){ 2 3 var reg = /^[a-z]/; 4 5 var result = source.match(reg); 6 7 alert(result); 8 9 }
//註意與exec的區別
3 執行模式判定
test 方法：Boolean test(source)
例如：
1 function isDigit(s){ 2 3 var reg = /^[0-9]{1,20}$/; 4 5 var flag = reg.test(s); 6 7 //如果格式正確，返回true，否則返回false 8 9 if(flag){ 10 11 return true; 12 13 }else{ 14 15 return false; 16 17 } 18 19 }
4 執行字符串位置查詢
search 方法：int search(String reg)
例如：
1 function seachString(){ 2 3 var r, re; // 聲明變量 4 5 var s = "The rain in Spain falls mainly in the plain."; 6 7 re = /falls/; // 創建正則表達式模式 8 9 r = s.search(re); // 查找字符串 10 11 alert(r); // 返回 int 結果表示出現位置 12 13 }
5 執行字符串分割
split 方法：String[ ] split(String reg)
例如：
1 function splitString( ){ 2 3 var r, reg; // 聲明變量 4 5 reg = /abc/; // 創建正則表達式模式 6 7 var s = “IcansaymyabcIcansaymyabcIcan…"; 8 9 r = s.split(reg); // 分割字符串 10 11 for(var p in r){ // 返回 String 數組 12 13 alert(r[p]); 14 15 } 16 17 }
JavaScript學習筆記（八）—— 補