<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

 "http://www.w3.org/TR/html4/strict.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">

     <head>

         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

         <title>获取和失去焦点</title>

         <meta name="author" content="Administrator" />

         <script type="text/javascript" src="script/jquery-1.12.2.js"></script>

         <style type="text/css">

             table {

                 margin: auto;

             }

             table td {

                 text-align: center;

             }

             fieldset {

                 text-align: center;

             }

             div{

                 margin: auto 40%;

             }

         </style>

         <!-- Date: 2016-04-02 -->

     </head>

     <body>

         <form action="#" method="post">

             <div>

                 <fieldset>

                     <legend>

                         个人基本信息

                     </legend>

                     <table>

                         <tr>

                             <td><label for="username">名称：</label></td>

                             <td>

                             <input type="text" id="username" />

                             </td>

                         </tr>

                         <tr>

                             <td><label for="pass">密码：</label></td>

                             <td><input type="password" id="pass" /></td>

                         </tr>

                         <tr>

                             <td><label for="msg">详细信息：</label></td>

                             <td><textarea id="msg" rows="10" cols="22"></textarea></td>

                         </tr>

                         <tr>

                             <td colspan="2">

                                 <input type="button" id="big" value="放大" />

                                 <input type="button" id="small" value="缩小" />

                             </td>

                         </tr>

                     </table>

                 </fieldset>

             </div>

         </form>

         <script type="text/javascript">

             $(function(){

                 var $comment = $("#msg");

                 $("#big").click(function() {

                     if(!$comment.is(":animated")){

                         if($comment.height()<500){

                             $comment.animate({height:"+=50"},0);

                         }

                     }

                 });

                 $("#small").click(function() {

                     if(!$comment.is(":animated")){

                         if($comment.height()>50){

                             $comment.animate({height:"-=50"},0);

                         }

                     }

                 });

             });

         </script>

     </body>

 </html>

关于表单的jQuery练习的更多相关文章

  1. Jquery easyui 重置按钮，easyui 清空表单，Jquery easyui 重置表单

    Jquery easyui 重置按钮,easyui 清空表单,Jquery easyui 重置表单 >>>>>>>>>>>>&g ...

  2. 15 款优化表单的 jQuery 插件

    网页上的表单提供给用户的一种交互的方式,用户输入数据,提交到服务器,等待后续的处理.这些表单在我们浏览的网页中随处可见,也容易被我们忽略. 比如,“联系我们”页面会提供一个表单给用户填写他们的信息和想 ...

  3. Form表单利用Jquery Validate验证以及ajax提交

    #表单利用Jquery验证验证以及ajax提交 概述>详细讲解表单利用Jquery >验证验证以及ajax提交的过程,以及Validate的自定义提示语,非空判断,输入字段的远程ajax验 ...

  4. 表单验证——jquery validate使用说明【另一个教程】

    [参考:http://www.tuicool.com/articles/y6fyme] jQuery Validate jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证 ...

  5. jQuery 表单验证 jquery.validator.js

    前端开发中经常会碰到表单的制作,其中必备的功能就是提交前的一些简单的验证,非空啊.手机号码啊.E-mail等等等等,这里是一个 jQuery 的表单验证插件,蛮好用的,收录一下. 下面是验证的效果图: ...

  6. aspx中的表单验证 jquery.validate.js 的使用 以及 jquery.validate相关扩展验证(Jquery表单提交验证插件)

    这一期我们先讲在aspx中使用 jquery.validate插件进行表单的验证, 关于MVC中使用 validate我们在下一期中再讲     上面是效果,下面来说使用步骤 jQuery.Valid ...

  7. JQuery 表单验证--jquery validation

    jquery validation,表单验证控件 官方地址 :http://jqueryvalidation.org/ jquery表单验证 默认值校验规则 jquery表单验证 默认的提示 < ...

  8. Form表单插件jquery.form.js

    常常使用到这个插件,但是老忘记怎么使用,现在对大家写的进行一定的整合. 使用插件实例: 一般的使用方法 <!-- 引入jquery文件 --> <script src="h ...

  9. 表单与JQuery

    表单: Html标签注意: 1.提交action 2.提交按钮:类型一定为type="submit" ,不然无反应 3. Jquery: 个人认为属于JS 1.一般不用表单提交 2 ...

  10. jquery提交form表单插件jquery.form.js

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 字符串（后缀自动机）：USACO Dec10 恐吓信

    [题目描述] FJ刚刚和邻居发生了一场可怕的争吵,他咽不下这口气,决定佚名发给他的邻居一封脏话连篇的信.他有无限张完全相同的已经打印好的信件,都包含 N个字母(1<=N<=50,000). ...

  2. 搜索(三分)：HDU 3400 Line belt

    Line belt Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total S ...

  3. 动态规划——A 最大子段和

    A - 最大子段和 Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submit St ...

  4. [JAVA关键字] static & final

    JAVA十分常见的关键字static & final 总的来说final表示常量,即不可更改的:而static表示静态,即全局的 1. final 类:不能被继承 2. final 方法:能被 ...

  5. Selenium firefox 版本问题

    问题:Unable to connect to host 127.0.0.1 on port 7055 after 45000 ms 原因: selenium-server-standalone-x. ...

  6. Let it Bead

    http://poj.org/problem?id=2409 // File Name: poj2409.cpp // Author: bo_jwolf // Created Time: 2013年1 ...

  7. greenplum和postgresql

    想着要不要写,两个原因"懒"和"空".其实懒和空也是有联系的,不是因为懒的写,而是因为对PostgreSQL和Npgsql的知识了解匮乏,也就懒得写.好了,开头 ...

  8. tyvj1728 普通平衡树

    为了彻底理解树状数组,试着用树状数组做了下普通平衡树 而树状数组只能离线做,或者保证值的大小在数组可承受的范围内也是可以的,因为要求离线是因为必须事前对所有数离散化. 然后我们看刘汝佳蓝书上的图 利用 ...

  9. 代码对齐 分类： C#小技巧 2014-04-17 14:45 166人阅读 评论(0) 收藏

    开发项目时,为了是代码层次清晰.美观,常常需要调整多行,使之对齐.在网上也看到一些方法,感觉不好用,偶尔发现一个小技巧. (1)多行代码同时右移 同时选中几行,按"Tab"键,就会 ...

  10. 在 foreach 里使用引用要注意的陷阱(转)

    从一道面试题开始 在开始本节内容前,我们先来看看一道还算比较常见的PHP面试题: 1 $arr = array('1','2','3'); 2   3 foreach($arr as &$v) ...