jQuery练习7焦点失去样式

 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.9.1.js"></script>
11   </head>
12   <body>
13     <table border="1" align="center">
14         <tr>
15             <th>用户名</th>
16             <td>
17                 <input type="text" value="输入用户名"/>
18             </td>
19         </tr>
20     </table>
21     <script type="text/javascript">
22         //为input元素添加样式
23         $("input").first().addClass("myClass");
24         //为input元素添加事件
25         $("input").first().focus(function(){
26             //清空原文本框中的值
27             $(this).val("");
28             //删除原样式
29             $(this).removeClass("myClass");
30         });
31     </script>    
32   </body>
33 </html>