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>
时间： 2024-10-31 05:58:03