关于表单的jQuery练习 

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
 2 "http://www.w3.org/TR/html4/strict.dtd">
 3 
 4 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
 5     <head>
 6         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 7         <title>获取和失去焦点</title>
 8         <meta name="author" content="Administrator" />
 9         <script type="text/javascript" src="script/jquery-1.12.2.js"></script>
10         <style type="text/css">
11             table {
12                 margin: auto;
13             }
14             table td {
15                 text-align: center;
16             }
17             fieldset {
18                 text-align: center;
19             }
20             div{
21                 margin: auto 40%;
22             }
23         </style>
24         <!-- Date: 2016-04-02 -->
25     </head>
26     <body>
27         <form action="#" method="post">
28             <div>
29                 <fieldset>
30                     <legend>
31                         个人基本信息
32                     </legend>
33                     <table>
34                         <tr>
35                             <td><label for="username">名称：</label></td>
36                             <td>
37                             <input type="text" id="username" />
38                             </td>
39                         </tr>
40                         <tr>
41                             <td><label for="pass">密码：</label></td>
42                             <td><input type="password" id="pass" /></td>
43                         </tr>
44                         <tr>
45                             <td><label for="msg">详细信息：</label></td>
46                             <td><textarea id="msg" rows="10" cols="22"></textarea></td>
47                         </tr>
48                         <tr>
49                             <td colspan="2">
50                                 <input type="button" id="big" value="放大" />
51                                 <input type="button" id="small" value="缩小" />
52                             </td>
53                         </tr>
54                     </table>
55                 </fieldset>
56             </div>
57         </form>
58         <script type="text/javascript">
59             $(function(){
60                 var $comment = $("#msg");
61                 $("#big").click(function() {
62                     if(!$comment.is(":animated")){
63                         if($comment.height()<500){
64                             $comment.animate({height:"+=50"},0);
65                         }
66                     }                
67                 });
68                 $("#small").click(function() {
69                     if(!$comment.is(":animated")){
70                         if($comment.height()>50){
71                             $comment.animate({height:"-=50"},0);
72                         }
73                     }        
74                 });
75             });
76         </script>
77     </body>
78 </html>

 

posted @ 2016-04-02 14:44  Arther_J  阅读(154)  评论(0)    收藏  举报