<!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. 数学（莫比乌斯函数）：BZOJ 2440 完全平方数

    Description 小 X 自幼就很喜欢数.但奇怪的是,他十分讨厌完全平方数.他觉得这些 数看起来很令人难受.由此,他也讨厌所有是完全平方数的正整数倍的数.然而 这丝毫不影响他对其他数的热爱. 这 ...

  2. 生成树的计数(基尔霍夫矩阵)：BZOJ 1002 [FJOI2007]轮状病毒

    1002: [FJOI2007]轮状病毒 Time Limit: 1 Sec  Memory Limit: 162 MBSubmit: 3928  Solved: 2154[Submit][Statu ...

  3. pgAdminIII使用图解

    原文地址:http://www.2cto.com/database/201312/267218.html pgAdmin III简介 要打开一个到服务的连接,在树中选择所需的服务,并双击它,或使用“工 ...

  4. [Locked] Find the Celebrity

    Find the Celebrity Suppose you are at a party with n people (labeled from 0 to n - 1) and among them ...

  5. lightoj 1407 2-sat

    这题的英语either...or....很蛋疼: m中,1:x与y至少一个出席:2:x出席,y随便,x不出席,y也不出席----这有个坑,可以推出y出席x也一定出席(这个关系必须要连上):3x与y至少 ...

  6. Directx 3D编程实例：绘制3DMesh

    最近朋友建议我写一些关于微软云技术的博客留给学校下一届的学生们看,怕下一届的MSTC断档.于是我也觉的有这个必要.写了几篇博客之后,我觉得也有必要把这一年的学习内容放在博客做个纪念,就这样写了本篇博客 ...

  7. loadView,viewDidLoad等几种方法的调用总结

    viewDidLoad 此方法只有当view从nib文件初始化的时候才被调用.viewDidLoad用于初始化,加载时用到的. loadView 此方法在控制器的view为nil的时候被调用.虽然经常 ...

  8. 关于DPM(Deformable Part Model)算法中模型结构的解释

    关于可变部件模型的描写叙述在作者[2010 PAMI]Object Detection with Discriminatively Trained Part Based Models的论文中已经有说明 ...

  9. leetcode第一刷_Interleaving String

    有关这样的字符串的题真是层出不穷啊,并且他们都有这样一个特点,就是递归的思路如此简单,但一定超时! 这个时候,dp就朝我们缓缓走来.递归超,dp搞!这道题的状态转移方程还是比較好写的,用ispart[ ...

  10. Swift开发之 使用系统的TabbarController

    使用系统的tabbar解决图片的问题. 用sb使用系统的tabbar,弄好后发现图片始终是蓝色的,并非原来的图片,后经上网查资料,问问同事,有了以下的这些代码,做个标记. AppDelegate中 f ...