首页 > 代码库 > jquery 事件小事例
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>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。