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]+" "+ 8 "所匹配的字符的起始位置："+result.index+" "+ 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();