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="width: 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

效果图:

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

你可能感兴趣的:(jquery)