form中的单行文本获取和失去焦点

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

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

    <title></title>

    <style type="text/css">

        input:focus, textarea:focus {

            border: 1px solid#f00;

            background: #fcc;

        }

        .focus {

            border: 1px solid#f00;

            background: #fcc;

        }

    </style>

</head>

<body>

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

    <fieldset>

        <legend>个人基本信息</legend>

        <div>

            <label for="username">名称:</label>

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

        </div>

        <div>

            <label for="pass">密码:</label>

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

        </div>

        <div>

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

            <textarea id="msg"></textarea>

        </div>

    </fieldset>

</form>

</body>

<script type="text/javascript">

    /**

     * 1.单行文本框---得到焦点和失去焦点

     * */

    $(function () {

        $(":input").focus(function () {

            $(this).addClass("focus");

        }).blur(function () {

            $(this).removeClass("focus");

        })

    })

</script>

</html>

更改多行文本的高度

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

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

    <title></title>

    <style type="text/css">

        * { margin:0; padding:0;font:normal 12px/17px Arial; }

        .msg {width:300px; margin:100px; }

        .msg_caption { width:100%; overflow:hidden; margin-bottom:1px;}

        .msg_caption span { display:block; float:left; margin:0 2px; padding:4px 10px; background:#898989; cursor:pointer;color:white; }

        .msg textarea{ width:300px; height:80px;height:100px;border:1px solid #000;}

    </style>

</head>

<body>

<form>

    <div class="msg">

        <div class="msg_caption">

            <span class="bigger">放大</span>

            <span class="smaller">缩小</span>

        </div>

        <textarea id="comment" rows="8" cols="20">多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。

            多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。

        </textarea>

    </div>

</form>

</body>

<script type="text/javascript">

    /**

     * 多行文本框的高度调整

     * */

    $(function () {

        var $comment = $('#comment');

        $('.bigger').click(function () {

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

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

                    //$comment.height($comment.height() + 50);//版本1

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

                }

            }

        });

        $('.smaller').click(function () {

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

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

                    //$comment.height($comment.height() - 50);

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

                }

            }

        });

    });

</script>

</html>

更改多行文本的滚动条高度

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

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

    <title></title>

    <style type="text/css">

        * { margin:0; padding:0;font:normal 12px/17px Arial; }

        .msg {width:300px; margin:100px; }

        .msg_caption { width:100%; overflow:hidden; margin-bottom:1px;}

        .msg_caption span { display:block; float:left; margin:0 2px; padding:4px 10px; background:#898989; cursor:pointer;color:white; }

        .msg textarea{ width:300px; height:80px;height:100px;border:1px solid #000;}

    </style>

</head>

<body>

<form>

    <div class="msg">

        <div class="msg_caption">

            <span class="up">向上</span>

            <span class="down">向下</span>

        </div>

        <textarea id="comment" rows="8" cols="20">多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。

            多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。

            多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。

            多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。

            多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。

            多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。

            多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。

            多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。

            多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。

        </textarea>

    </div>

</form>

</body>

<script type="text/javascript">

    /**

     * 多行文本框的滚动条高度调整

     * */

    $(function () {

        var $comment = $('#comment');

        $('.up').click(function () {

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

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

                    $comment.animate({scrollTop: "+=50"}, 400);

                }

            }

        });

        $('.down').click(function () {

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

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

                    $comment.animate({scrollTop: "-=50"}, 400);

                }

            }

        });

    });

</script>

</html>

复选框应用

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

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

    <title></title>

    <style type="text/css">

        input:focus, textarea:focus {

            border: 1px solid#f00;

            background: #fcc;

        }

        .focus {

            border: 1px solid#f00;

            background: #fcc;

        }

    </style>

</head>

<body>

<form>

    你爱好的运动是?<br/>

    <input type="checkbox" name="items" value="足球"/>足球

    <input type="checkbox" name="items" value="篮球"/>篮球

    <input type="checkbox" name="items" value="羽毛球"/>羽毛球

    <input type="checkbox" name="items" value="乒乓球"/>乒乓球

    <input type="button" id="checkedAll" value="全  选"/>

    <input type="button" id="checkedNo" value="全不选"/>

    <input type="button" id="checkedRev" value="反  选"/>

    <input type="button" id="send" value="提交"/>

</form>

</body>

<script type="text/javascript">

    /**

     * 复选框应用

     * */

    $(function () {

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

            $('[name=items]:checkbox').attr('checked', true);

        });

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

            $('[name=items]:checkbox').attr('checked', false);

        });

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

            $('[name=items]:checkbox').each(function () {

                this.checked = !this.checked;

            });

        });

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

            var str = "你选中的是: \r\n";

            $('[name=items]:checkbox:checked').each(function () {

                str += $(this).val() + "\r\n";

            });

            alert(str);

        });

    })

</script>

</html>

jQuery基础知识--Form基础的更多相关文章

  1. jQuery基础知识--Form基础(续)

    下拉框应用 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF ...

  2. Linux基础知识与基础命令

    Linux基础知识与基础命令 系统目录 Linux只有一个根目录,没有盘符的概念,文件目录是一个倒立的树形结构. 常用的目录功能 bin 与程序相关的文件 boot 与系统启动相关 cdrom 与Li ...

  3. java线程基础知识----线程基础知识

    不知道从什么时候开始,学习知识变成了一个短期记忆的过程,总是容易忘记自己当初学懂的知识(fuck!),不知道是自己没有经常使用还是当初理解的不够深入.今天准备再对java的线程进行一下系统的学习,希望 ...

  4. day63:Linux:nginx基础知识&nginx基础模块

    目录 1.nginx基础知识 1.1 什么是nginx 1.2 nginx应用场景 1.3 nginx组成结构 1.4 nginx安装部署 1.5 nginx目录结构 1.6 nginx配置文件 1. ...

  5. 这些C++基础知识的基础知识你都学会了吗？

    一.C++基础知识 新的数据类型 C语言中的数据类型  C++中新的数据类型 思考:新的数据类型有什么好处?请看下面的代码:  可以见得:新的类型使整个程序更加简洁,程序变得易读易懂!这个就是bool ...

  6. Ceph基础知识和基础架构认识

    1  Ceph基础介绍 Ceph是一个可靠地.自动重均衡.自动恢复的分布式存储系统,根据场景划分可以将Ceph分为三大块,分别是对象存储.块设备存储和文件系统服务.在虚拟化领域里,比较常用到的是Cep ...

  7. Ceph 基础知识和基础架构认识

    1  Ceph基础介绍 Ceph是一个可靠地.自动重均衡.自动恢复的分布式存储系统,根据场景划分可以将Ceph分为三大块,分别是对象存储.块设备存储和文件系统服务.在虚拟化领域里,比较常用到的是Cep ...

  8. 算法导论 - 基础知识 - 算法基础（插入排序&归并排序）

    在<算法导论>一书中,插入排序作为一个例子是第一个出现在该书中的算法. 插入排序: 对于少量元素的排序,它是一个有效的算法. 插入排序的工作方式像许多人排序一手扑克牌.开始时,我们手中牌为 ...

  9. web前端基础知识- Django基础

    上面我们已经知道Python的WEB框架有Django.Tornado.Flask 等多种,Django相较与其他WEB框架其优势为:大而全,框架本身集成了ORM.模型绑定.模板引擎.缓存.Sessi ...

随机推荐

  1. Debian - 设置MYSQL开机启动

    设置MYSQL 首先拷贝mysql.server到/etc/init.d目录下命名为mysql # cp /自己的安装目录/mysql/share/mysql/mysql.server /etc/in ...

  2. SPRING IN ACTION 第4版笔记-第十章Hitting the database with spring and jdbc-001-Spring对原始JDBC的封装

    1.spring扩展的jdbc异常 2.Template的运行机制 Spring separates the fixed and variable parts of the data-access p ...

  3. MyBatis学习总结_12_Mybatis+Mysql分页查询

    package cn.tsjinrong.fastfile.util; /** * @ClassName: Page * @Description: TODO(分页组件的父类,用来封装分页的 通用内容 ...

  4. 关于Netty4.x中文教程系列更新进度的说明和道歉

    最近一些事情.貌似发现很久没更新教程了.这里和大家说一声对不起.教程5的前半部分差不多年前就写好了.但是由于年前我在的项目组项目进度比较紧张.一直在加班.教程的后半部分就一直没有写.年后由于一些公司人 ...

  5. 解决NetworkOnMainThreadException

    今天在Android 访问 WebService 的时候遇到,错误Caused by: android.os.NetworkOnMainThreadException,查了下原因上在4.0之后在主线程 ...

  6. Hadoop HDFS文件系统通过java FileSystem 实现上传下载等

    package linlintest; import java.io.File; import java.io.FileOutputStream; import java.io.IOException ...

  7. oracle层次查询的陷阱

    今天开发组同事找到我,说一个简单的层次查询非常慢,业务就是有一个存设备表连接关系的表,从node1连入,从node2连出,现在要找出node2的连出顺序,sql类似于: SELECT LEVEL ID ...

  8. Ubuntu下安装Git以及Git帮助手册【转】

    转自:http://milkythinking.com/blog/2011/04/17/install_git_and_manual/ Git简介 Git是一个分布式版本控制系统,对应的是SVN.CV ...

  9. centos6.5 中文

    之前在网上查了不少资料,很多网友在网上都说,在shell命令下输入:     # vi  /etc/sysconfig/i18n     然后修改LANG="en_US.UTF-8" ...

  10. javascript 一个关于时间排序的算法（一个页面多个倒计时排序）

    上周要做一个活动页面 秒杀列表页 需要一个时间的算法排序 自己琢磨了半天想了各种算法也没搞出来,后来问了下一个后台的php同学 他写了个算法给我看了下 ,刚开始看的时候觉得这就是个纯算法,不能转化成页 ...