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. 以Server模式启动Derby服务竟然抛套接字权限异常

    以Server模式启动Derby服务竟然抛套接字权限异常:access denied ("java.net.SocketPermission" "localhost:15 ...

  2. linux下文件编码的查看与修改

    在Linux中查看文件编码可以通过vim编辑器来查看,在vim命令模式下输入如下命令即可: :set fileencoding //在vim中查看文件编码 如果你只是想查看其它编码格式的文件或者想解决 ...

  3. CSS3实现页面的平滑过渡

    这是文件的css,全部文件的话请到Github下载:点击这里 @charset "UTF-8"; @font-face {font-family: 'iconfont'; src: ...

  4. Golang哲学思想

    Golang是一门新语言,经过几年发展,慢慢地也已经被许多大公司认可.最大的特点是速度快,并发性好,与网络的功能结合好,是一门服务端语言,号称“网络时代的新语言”:另外还是一个编译型的Python.不 ...

  5. 嵌入式linux的学习之路[转]

    我认为的一条学习嵌入式Linux的路: 1)学习 Linux系统安装. 常用命令.应用程序安装. 2) 学习 Linux 下的 C 编程.这本书必学<UNIX 环境高级编程>.<UN ...

  6. Card Game Cheater---hdu1528（扑克建图求二分匹配）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1528 题意就是给有两个人有n张牌第二个人知道第一个人的牌的序列: 然后第二个人尽可能的让自己得更高的分 ...

  7. Data Flow ->> Multicast

    Multicast的中文意思是组播或者多播.那自然这个组件干的事情就是可以把一份数据库输入给多少接收组件作为输入.这里有篇别人的博文讲到了Multicast的主要作用和应用场景:http://www. ...

  8. git源码推荐

    http://git.oschina.net/explore/monthly http://git.oschina.net/juapk/spring-wind http://git.oschina.n ...

  9. Highgui.imwrite("/data/pic1111.png", mat)失败，且找不到报错

    ——> Highgui.imwrite("/data/pic1111.png", mat)失败,且找不到报错. ok -->直接使用以下代码,自己保存mat,从而可以跟 ...

  10. 标准类型内建函数 str()和 repr() (及 `` 运算符) 简单介绍

    内建函数 str() 和 repr() 或反引号运算符(``) 可以方便的以字符串的方式获取对象的内容.类型.数值属性等信息.str()函数得到的字符串可读性好, 而repr()函数得到的字符串通常可 ...