首页 > 代码库 > jquery 事件小事例

jquery 事件小事例

2024-07-09 18:12:52   220人阅读

用户名变灰

 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>

 


联系
我们