ps：小聲比比，為什么一周多沒更，因為js真的好難啊。 上一周做了一整周的jsp+sevlet+mysql做了一個MVC模式的最基本的新聞系統源碼會有空搞出來的 好累 好多的。
三大事件
（鼠標事件、鍵盤事件、html事件）
鼠標事件
click：單擊
dblclick：雙擊
mousedown：鼠標按下
mouseup：鼠標抬起
mouseover：鼠標懸浮
mouseout：鼠標離開
mousemove：鼠標移動
mouseenter：鼠標進入
mouseleave：鼠標離開
1 <button onclick="myClick()">鼠標單擊</button> 2 <button ondblclick="myDBClick()">鼠標雙擊</button> 3 <button onmousedown="myMouseDown()" onmouseup="myMouseUp()">鼠標按下和抬起</button> 4 <button onmouseover="myMouseOver()" onmouseout="myMouseOut()">鼠標懸浮和離開</button> 5 <button onmousemove="myMouseMove()">鼠標移動</button> 6 <button onmouseenter="myMouseEnter()" onmouseleave="myMouseLeave()">鼠標進入和離開</button>
鍵盤事件
keydown：按鍵按下
keyup：按鍵抬起
keypress：按鍵按下抬起
<body> <input id="name" type="text" onkeydown="myKeyDown(this.id)" onkeyup="myKeyUp(this.id)"> </body>
1 <script> 2 /*輸出輸入的字符*/ 3 function myKeyDown(id) { 4 console.log(document.getElementById(id).value); 5 } 6 /*按鍵結束，字體轉換為大寫*/ 7 function myKeyUp(id) { 8 var text = document.getElementById(id).value; 9 document.getElementById(id).value = text.toUpperCase(); 10 } 11 </script>
HTML事件
load：文檔加載完成
select：被選中的時候
change：內容被改變
focus：得到光標
resize：窗口尺寸變化
scroll：滾動條移動
<body onload="loaded()"> <div style="height: 3000px" ></div> <input type="text" id="name" onselect="mySelect(this.id)"> <input type="text" id="name2" onchange="myChange(this.id)"> <input type="text" id="name3" onfocus="myFocus()"> </body>
1 <script> 2 window.onload = function () { 3 console.log("文檔加載完畢！"); 4 }; 5 /*window.onunload = function () { 6 alert("文檔被關閉！"); 7 };*/ 8 /*打印選中的文本*/ 9 function mySelect(id) { 10 var text = document.getElementById(id).value; 11 console.log(text); 12 } 13 /*內容被改變時*/ 14 function myChange(id) { 15 var text = document.getElementById(id).value; 16 console.log(text); 17 } 18 /*得到光標*/ 19 function myFocus() { 20 console.log("得到光標！"); 21 } 22 /*窗口尺寸變化*/ 23 window.onresize = function () { 24 console.log("窗口變化！") 25 }; 26 /*滾動條移動*/ 27 window.onscroll = function () { 28 console.log("滾動"); 29 } 30 </script>
注冊實現（關聯正則表達式）：
1.驗證賬號，密碼，再次輸入密碼。
1 function validateUsername() { 2 //通過ID獲取頁面中輸入的username 3 var va = document.getElementById("username").value; 4 //自己賦值的正則表達式 5 var judge = /^[a-zA-Z0-9]{6,12}$/; 6 //判斷是否符合 7 if (!judge.test(va)) { 8 //不符合就在行后輸出一個錯誤提示； 9 //利用innerHtml改變頁面中userNameError內的值 10 document.getElementById("userNameError").innerHTML = "請輸入正確的賬號"; 11 //更改樣式 12 userNameError.style.border = "1px red soild"; 13 } else { 14 //正確則不需要填值，所以設置為空就行 15 document.getElementById("userNameError").innerHTML = ""; 16 userNameError.style.border = ""; 17 } 18 }
2.當你點擊提交的時候，如果有錯誤，肯定不能提交上去，所以我們不能讓提交事件發生，此時 我們就添加了一個validate()方法；
它的原理就是講submit中返回值false時就是提交不成功，所以只要有一次出錯，flag（error）就為true此時提交將無法使用。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <script> 8 function validateUsername() { 9 var va = document.getElementById("username").value; 10 var judge = /^[a-zA-Z0-9]{6,12}$/; 11 if (!judge.test(va)) { 12 document.getElementById("userNameError").innerHTML = "請輸入正確的賬號"; 13 userNameError.style.border = "1px red soild"; 14 } else { 15 document.getElementById("userNameError").innerHTML = ""; 16 userNameError.style.border = ""; 17 } 18 } 19 20 function validatePassword() { 21 var va = document.getElementById("pwd1").value; 22 var judge = /^[a-zA-Z0-9]{6,12}$/; 23 if (!judge.test(va)) { 24 document.getElementById("passwordError").innerHTML = "請輸入正確的密碼"; 25 passwordError.style.border = "1px red soild"; 26 } else { 27 document.getElementById("passwordError").innerHTML = ""; 28 passwordError.style.border = ""; 29 } 30 } 31 32 function validatePwd() { 33 var pwd1 = document.getElementById("pwd1").value; 34 var pwd2 = document.getElementById("pwd2").value; 35 if (pwd1 != pwd2) { 36 document.getElementById("pwdError").innerHTML = "兩次密碼不一致"; 37 pwdError.style.border = "1px red soild"; 38 } else { 39 document.getElementById("pwdError").innerHTML = ""; 40 pwdError.style.border = ""; 41 } 42 } 43 function validate() { 44 var isError=false; 45 var va = document.getElementById("username").value; 46 var pwd1 = document.getElementById("pwd1").value; 47 var pwd2 = document.getElementById("pwd2").value; 48 var judge = /[a-zA-Z0-9]{6,12}/; 49 if (!judge.test(va)) { 50 document.getElementById("userNameError").innerHTML = "請輸入正確的賬號"; 51 userNameError.style.border = "1px red soild"; 52 isError=true; 53 } else { 54 document.getElementById("userNameError").innerHTML = ""; 55 userNameError.style.border = ""; 56 } 57 if (!judge.test(pwd1)) { 58 document.getElementById("passwordError").innerHTML = "請輸入正確的密碼"; 59 passwordError.style.border = "1px red soild"; 60 isError=true; 61 } else { 62 document.getElementById("passwordError").innerHTML = ""; 63 passwordError.style.border = ""; 64 } 65 if (pwd1 != pwd2) { 66 document.getElementById("pwdError").innerHTML = "兩次密碼不一致"; 67 pwdError.style.border = "1px red soild"; 68 isError=true; 69 } else { 70 document.getElementById("pwdError").innerHTML = ""; 71 pwdError.style.border = ""; 72 } 73 74 if (isError) { 75 return false; 76 } 77 } 78 79 </script> 80 <body> 81 <form onsubmit="return validate()"> 82 <table> 83 <tr> 84 <td>賬號:</td> 85 <td><input type="text" name="username" id="username" placeholder="請設置賬號6-12位" onblur="validateUsername()"/></td> 86 <td> 87 <select name="select" id="select"> 88 <option value="0">163.com</option> 89 <option value="1">qq.com</option> 90 <option value="2">126.com</option> 91 </select> 92 <span id="userNameError" style="color:red;"></span> 93 </td> 94 </tr> 95 <tr> 96 <td>密碼:</td> 97 <td><input type="password" name="pwd1" id="pwd1" placeholder="請設置登錄密碼6-12位" onblur="validatePassword()"/></td> 98 <td><span id="passwordError" style="color:red;"></span></td> 99 </tr> 100 <tr> 101 <td>再次輸入:</td> 102 <td><input type="password" name="pwd2" id="pwd2" onblur="validatePwd()"/></td> 103 <td><span id="pwdError" style="color:red;"></span></td> 104 </tr> 105 </table> 106 <input type="submit"></input> 107 </form> 108 </body> 109 </html>
js 的RegExp的三個方法：
1. test() 方法
test() 方法用來檢測一個字符串是否匹配某個正則表達式，如果匹配成功，返回 true ，否則返回 false。
語法：
RegExpObject.test(string) //必需參數。要檢測的字符串。
2. exec() 方法
exec() 方法用來檢索字符串中與正則表達式匹配的值。
exec() 方法返回一個數組，其中存放匹配的結果。如果未找到匹配的值，則返回 null。
語法：
RegExpObject.exec(string)//必需參數。要檢索的字符串。
與 test() 方法相比，exec() 方法更加強大，功能也更加復雜。
當 exec() 找到了匹配的文本時，會返回一個結果數組。否則，返回 null。此數組的第 0 個元素是與正則表達式相匹配的文本，第 1 個元素是與 RegExpObject 的第 1 個子表達式相匹配的文本（如果有的話），第 2 個元素是與 RegExpObject 的第 2 個子表達式相匹配的文本（如果有的話），以此類推。
除了數組元素和 length 屬性之外，exec() 方法還返回兩個屬性。index 屬性聲明的是匹配文本的第一個字符的位置。input 屬性則存放的是被檢索的字符串 string。
但是，當 RegExpObject 是一個全局正則表達式（帶有 g 修飾符）時，exec() 的行為就稍微復雜一些，它會在 RegExpObject 的 lastIndex 屬性指定的字符處開始檢索字符串 string。當 exec() 找到了與表達式相匹配的文本時，在匹配后，它將把 RegExpObject 的 lastIndex 屬性設置為匹配文本的最后一個字符的下一個位置。
也就是說，可以通過反復調用 exec() 方法來遍歷字符串中的所有匹配文本。當 exec() 再也找不到匹配的文本時，它將返回 null，並把 lastIndex 屬性重置為 0。
1 var str = "Itxueyuan's domain is www.itxueyuan.org. Welcome to itxueyuan !"; 2 var pattern = new RegExp("itxueyuan", "ig"); 3 var i=1; 4 var result; 5 while(result=pattern.exec(str)){ 6 alert( 7 "第 "+i+" 次匹配的字符串："+result[0]+"\n"+ 8 "所匹配的字符的起始位置："+result.index+"\n"+ 9 "第 "+(++i)+" 次匹配的的起始位置："+pattern.lastIndex 10 ); 11 }
3.compile() 方法
compile() 方法可以在腳本執行過程中編譯正則表達式，也可以改變已有表達式。
語法：
RegExpObject.compile(regexp,modifier)
參數說明：
regexp //正則表達式;
modifier //規定匹配的類型。"g" 用於全局匹配，"i" 用於區分大小寫，"gi" 用於全局區分大小寫的匹配。
例如，在字符串中全局搜索 “man”，並用 “person” 替換。然后通過 compile() 方法，改變正則表達式，用 “person” 替換 “man” 或 “woman”，：
1 var str="Every man in the world! Every woman on earth!"; 2 patt=/man/g; 3 str2=str.replace(patt,"person"); 4 document.write(str2+"<br />"); 5 6 patt=/(wo)?man/g; 7 patt.compile(patt); 8 str2=str.replace(patt,"person"); 9 document.write(str2);
jQuery 取選中的radio的值方法
var val=$(‘input:radio[name=“sex”]:checked’).val();
附三種方法都可以：
$('input:radio:checked').val()；
$("input[type='radio']:checked").val();
$("input[name='rd']:checked").val();