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 })