jquery 事件小事例

浏览数：22 / 时间：2015年06月09日

用户名变灰

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 2 <html>
 3   <head>
 4     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 5     <style type="text/css">
 6         .myClass{
 7             color:#c0c0c0
 8         }
 9     </style>
10   <script type="text/javascript" src="../js/jquery-1.6.js"></script></head>
11   <body>
12     <table border="1" align="center">
13         <tr>
14             <th>用户名</th>
15             <td>
16                 <input type="text" value="输入用户名"/>
17             </td>
18         </tr>
19     </table>
20     <script type="text/javascript">
21     $(function(){
22         $("input").addClass("myClass");
23         $("input").focus(function(){
24             $(this).removeClass("myClass");
25             $(this).val("");
26         })
27     });
28     </script>    
29   </body>
30 </html>

坦克上下左右移动

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 2 <html>
 3   <head>
 4     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 5     <script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
 6   </head>
 7   <body>
 8     <img src="../images/zgl.jpg"/>
 9     <script type="text/javascript">
10         //初始化
11         $(function(){
12             //定位图片
13             var $img = $("img");
14             //将图片定位于指定的位置
15             $img.offset({top:200,left:400});
16             $img.width(100);
17             $img.height(200);
18             //为图片添加事件
19             $(document).keydown(function(){
20                 //获取按钮的code码
21                 var code = event.keyCode;
22                 //判断
23                 if(code == 38){//上
24                     $img.offset({top:y-=15});
25                 }else if(code == 40){//下
26                     $img.offset({top:y+=15});
27                 }else if(code == 37 ){//左
28                     $img.offset({left:x-=15});
29                 }else if(code == 39){//右
30                     $img.offset({left:x+=15});
31                 }
32             });
33         });
34         //全局变量
35         var y = 200;
36         var x = 400;
37     </script>
38   </body>
39 </html>