jQuery学习笔记(5)--表单域获得焦点和失去焦点样式变化

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head runat="server">
 3     <title></title>
 4     <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
 5     <style type="text/css">
 6         
 7         <%-- IE6不支持这种方法--%>
 8         <%--input:focus, textarea:focus
 9         {
10             border: 1px solid #f00;
11             background:#fcc;
12         }--%>
13         
14         .focus
15         {
16             border: 1px solid gray;
17             background:gray;
18         }
19         
20         
21     </style>
22     <script type="text/javascript">
23 
24         $(function () {
25             $(":input").focus(function () {
26                 $(this).addClass("focus");
27             }).blur(function () {
28                 $(this).removeClass("focus");
29             });
30 
31         });
32 
33     </script>
34 </head>
35 <body>
36     <form id="form1" runat="server" method="post">
37     <div style=" 300px; border: 1px solid black">
38         <fieldset>
39             <legend>个人基本信息</legend>
40             <div>
41                 <label for="username">
42                     名称:</label>
43                 <input id="username" type="text" />
44             </div>
45             <div>
46                 <label for="pass">
47                     密码:</label>
48                 <input id="pass" type="password" />
49             </div>
50             <div>
51                 <label for="msg">
52                     详细信息:</label>
53                 <textarea id="msg" rows="5" cols="10"></textarea>
54             </div>
55         </fieldset>
56     </div>
57     </form>
58 </body>
59 </html>
View Code
效果图: