<!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. Linux Shell编程（9）——特殊变量类型

    局部变量局部变量只在代码块或一个函数里有效 (参考函数里的局部变量)环境变量这种变量会影响Shell的行为和用户接口 在大多数情况下,每个进程都会有一个"环境表", 它由一组由进程 ...

  2. HDU 2614 Beat 深搜DFS

    这道题目还是比较水的,但是题意理解确实费了半天劲,没办法 谁让自己是英渣呢! 题目大意: 猪脚要解决问题, 他有个习惯,每次只解决比之前解决过的问题的难度要大. 他给我们一个矩阵  矩阵的 i 行 j ...

  3. Xcode7真机调试iOS应用程序

    金田 近日苹果发布的新的Xcode7带来了许多特性,比如:swift语言比以前运行更快.功能更强.代码具有更高的可读性.Xcode的测试功能可以帮助用户记录应用程序的行为等,还有我们今天要讲到的Xco ...

  4. 字符串（多串后缀自动机）：HDU 4436 str2int

    str2int Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others)Total S ...

  5. 【动态规划】HDU 5791 Two

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5791 题目大意: A,B两个数列,问A的子集和B的子集相等的子集对数.子集内顺序按照数列顺序,相同的 ...

  6. 更新一波题解（最近做的三个dp题）

    很久没写题解了,去ec之前来填一填坑,希望能攒攒人品... 首先是去年上海F题..uvalive7143 题意: 给n个人分 m间房子,每个房间的容量是已知的,其中有k对双胞胎,双胞胎可以看作相同的人 ...

  7. VB.net 连接池

    上篇博客介绍了临时表的使用,以及它的生命周期和连接池的关系.那么为了能更好的把握临时表的产生和消亡,本篇博客就介绍Vb.net连接池.在打开和关闭数据库连接时的耗费的资源是非常高的.那么在程序需要频繁 ...

  8. [转]Android实现计时与倒计时(限时抢购)的几种方法

    在购物网站的促销活动中一般都有倒计时限制购物时间或者折扣的时间,这些都是如何实现的呢? 在一个安卓客户端项目中恰好遇到了类似的问题,一开始使用的是Timer与 TimerTask, 虽然此方法通用,但 ...

  9. 数据库系统——B+树索引

    原文来自于:http://dblab.cs.toronto.edu/courses/443/2013/05.btree-index.html 1. B+树索引概述 在上一篇文章中,我们讨论了关于ind ...

  10. [yueqian_scut]蓝牙防丢器原理、实现与Android BLE接口编程

    本文是对已实现的蓝牙防丢器项目的总结,阐述蓝牙防丢器的原理.实现与Android客户端的蓝牙BLE接口编程.在这里重点关注如何利用BLE接口来进行工程实现,对于BLE的协议.涉及到JNI的BLE接口内 ...