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>