jquery 이벤트 사례

19900 단어 jquery
사용자 이름이 회색으로 변경됨
 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>

좋은 웹페이지 즐겨찾기