1.例子说明
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title></title> 6 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> 7 <script type="text/javascript"> 8 $(function(){ 9 $("#sub").bind("click",function(event){ 10 var username = $("#username").val(); //获取元素的值 11 if(username==""){ //判断值是否为空 12 $("#msg").html("<p>文本框的值不能为空.</p>"); //提示信息 13 event.preventDefault(); //阻止默认行为 ( 表单提交 ) 14 } 15 else if(username==$("#username").val()){ 16 $("#msg").html("<p>username="+username+"</p>"); //提示信息 17 // event.preventDefault(); //阻止默认行为 ( 表单提交 ) 18 } 19 }) 20 }) 21 </script> 22 </head> 23 <body> 24 <form action="4-4-3-1.html"> 25 用户名：<input type="text" id="username" /> 26 <br/> 27 <input type="submit" value="提交" id="sub"/> 28 </form> 29 30 <div id="msg"></div> 31 </body> 32 </html>
（1）获取元素的值----10行
（2）html中输出元素的值----16行
（3）event.preventDefault(); //阻止默认行为 ( 表单提交 )如果注释掉此句，点击提交按钮由<form action="4-4-3-1.html">可知会转到4-4-3-1.html页面
2事件对象的属性
2.1event.type
1 $(function(){ 2 $("a").click(function(event) { 3 alert(event.type);//获取事件类型 4 return false;//阻止链接跳转 5 }); 6 })
事件类型是click
2.2.event.target
1 $(function(){ 2 $("a[href=http://google.com]").click(function(event) { 3 alert(event.target.href);//获取触发事件的<a>元素的href属性值 4 return false;//阻止链接跳转 5 }); 6 })
event.target.href是http://google.com
2.3.event.pageX,pageY
1 $(function(){ 2 $("a").click(function(event) { 3 alert("Current mouse position: " + event.pageX + ", " + event.pageY );//获取鼠标当前相对于页面的坐标 4 return false;//阻止链接跳转 5 }); 6 })
2.4.event.which
1 $(function(){ 2 $("a").mousedown(function(e){ 3 alert(e.which) // 1 = 鼠标左键 left; 2 = 鼠标中键; 3 = 鼠标右键 4 return false;//阻止链接跳转 5 }) 6 })
2.5.event.metaKey,event.ctrlKey
1 $(function(){ 2 $("input").keyup(function(e){ 3 alert(e.metaKey +" "+e.ctrlKey ); 4 $(this).blur(); 5 }) 6 })