<!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编程（3）——运行shell脚本

    写完一个脚本,你能够运行它用命令:sh scriptname, [5] 另外也也可以用bash scriptname. 来执行(不推荐使用:sh <scriptname, 因为这样会禁止脚本从标 ...

  2. Linux企业级开发技术（1）——epoll企业级开发之简介

    Epoll是当前在 Linux 下开发大规模并发网络程序的热门人选, Epoll 在 Linux2.6 内核中正式引入.和 select 相似,是高效 I/O 多路复用技术. 其实在 Linux 下设 ...

  3. 奔跑的xiaodao

    http://acm.hrbust.edu.cn/index.php?m=ProblemSet&a=showProblem&problem_id=2086 很明显的一个二分题目.因为要 ...

  4. HTML5 骨架

    html: <!DOCTYPE html> <html lang="zh-CN"> <head> <title>HTML5 骨架&l ...

  5. js点击弹出div层

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. C#中格式化数据的输出

    格式项都采用如下形式: {index[,alignment][:formatString]} 其中"index"指索引占位符,这个肯定都知道: ",alignment&q ...

  7. Firemonkey的旁门左道[五]

    这次讲讲绘制的几种模式吧,不过还是比较浅显,刚接触不久,还实在没这个实力道出个所以来. FMX下,我们可以切换GDI,D2D,GPU这三种模式, 只要通过全局变量就可以轻松搞定. 如何设置 Globa ...

  8. 第四节：教你如何快速让浏览器兼容ES6特性

    写在正文前,本来这一节的内容应该放在第二节更合适,因为当时就有同学问ES6的兼容性如何,如何在浏览器兼容ES6的特性,这节前端君会介绍一个抱砖引玉的操作案例. 为什么ES6会有兼容性问题? 由于广大用 ...

  9. 学习JAVA第一部分总结

    把自己这几天的学习情况记录下来. 第一章,认识JAVA,了解JAVA的运行机制,虚拟机. 第二章,了解java的注释,标识符,关键字.. 第三章,基本的数据类型,byte short int long ...

  10. Asp.Net中的session配置

    一.InProc模式(缺省模式) <sessionState mode="InProc" timeout="20"></sessionStat ...