<!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. Light OJ 1021 - Painful Bases(状态压缩DP)

    题目大意: 给你一个base 进制的数字,把这个数字的每一位进行全排列,问有多少个数字是可以整除k的. 题目解析: #include<cstdio> #include<cstring ...

  2. POJ 2112 Optimal Milking（Floyd+多重匹配+二分枚举）

    题意:有K台挤奶机,C头奶牛,每个挤奶机每天只能为M头奶牛服务,下面给的K+C的矩阵,是形容相互之间的距离,求出来走最远的那头奶牛要走多远   输入数据: 第一行三个数 K, C, M  接下来是   ...

  3. Unix/Linux运维首选工具Xmanager Enterprise 3.0的使用教程

    管理Uinx和Linux服务器的兄弟们应该很熟悉Xmanager,一个窗口可以同时控制上百台Linux和Unix服务器,功能非常强大!^_^请看: manager是一个简单易用的高性能的运行在Wind ...

  4. 总结linux无线命令wpa

    关于wpa_supplicant: 用到wpa_cli命令 wpa_cli -iwlan0 add_network             // wlan0 是无线网络设备的名字,增加一个网络,会返回 ...

  5. poj3186 Treats for the Cows

    http://poj.org/problem?id=3186 Treats for the Cows Time Limit: 1000MS   Memory Limit: 65536K Total S ...

  6. One day

    1.c的格式化输入输出:  printf()和scanf()函数可以较好实现格式化输入输出,例子如下:  printf("%3d",3); //结果为__3 (_为空格)  pri ...

  7. wamp中的httpd.conf文件设置

    ServerName localhost 缺省情况下,并不需要指定这个ServerName参数,服务器将自动通过名字解析过程来获得自己的名字,但如果服务器的名字解析有问题(通常为反向解析不正确),或者 ...

  8. 双有序队列算法——处理哈夫曼K叉树的高效算法

    算法介绍: 哈夫曼树的思路及实现众所周知,大部分是用堆来维护和实现,这种思路比较清晰,在K比较小的时候处理较快(具体例子接下来再说),而且编程复杂度不是很高,利于应用.但是,其所用的数据结构是树,是在 ...

  9. 6种GET和POST请求发送方法

    我试过了畅言和多说两种社会化评论框,后来还是抛弃了畅言,不安全. 无论是畅言还是多说,我都需要从远程抓取文章的评论数,然后存入本地数据库.对于多说,请求的格式如下: // 获取评论次数,参数是文章ID ...

  10. B - The Suspects -poj 1611

    病毒扩散问题,SARS病毒最初感染了一个人就是0号可疑体,现在有N个学生,和M个团队,只要团队里面有一个是可疑体,那么整个团队都是可疑体,问最终有多少个人需要隔离... 再简单不过的并查集,只需要不断 ...