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. 配置IIS应用程序池

    IIS 6的核心在于工作进程隔离模式,而应用程序池则是定义工作进程如何进行工作,因此,可以说应用程序池是整个IIS 6的核心. 和IIS 5中只能使用单个应用程序池不同,工作在工作进程隔离模式的IIS ...

  2. hadoop jobhistory解析工具汇总

    1. White Elephant是LinkedIn开源的一套Hadoop 作业日志收集器和展示器,使用mapreduce作业解析jobhistory日志,得到每个用户使用的资源情况,并通过网页展示. ...

  3. JSTL Tag学习笔记(二)之<fmt: />

    JSTL的formatting tags可以用来格式化和显示文本.日期.时间.数字.如果在JSP页面中要用到该库提供的tag的话,需要引入如下taglib: <%@ taglib prefix= ...

  4. TestDirector安装配置

    一.介绍 TestDirector是全球最大的软件测试工具提供商,公司生产企业级测试管理工具,也是业界第一个基于Web的测试管理系统,它可以在公司内部或外部进行全球范围内测试的管理.通过在一个整体的应 ...

  5. Qt中的键盘事件，以及焦点的设置（比较详细）

    Qt键盘事件属于Qt事件系统,所以事件系统中所有规则对按键事件都有效.下面关注点在按键特有的部分: focus 一个拥有焦点(focus)的QWidget才可以接受键盘事件.有输入焦点的窗口是活动窗口 ...

  6. http://www.ibm.com/developerworks/cn/java/j-lo-junit-src/

    http://www.ibm.com/developerworks/cn/java/j-lo-junit-src/

  7. Linear Regression

    大学时候学物理实验的时候接触过线性回归,现在忘记了...还得重新拾起来.学习不扎实耽误了多少时光... sigh Suppose that you time a program as a functi ...

  8. notepad++使用技巧及插件汇总

    NppAutoIndent 自动缩进CCompletion 自动补全.TextFX 插件nppFTP 运行程序 ============================================ ...

  9. USACO Section 2.4: Fractions to Decimals

    乍看题目感觉有难度,实际分析后其实是道简单题 /* ID: yingzho1 LANG: C++ TASK: fracdec */ #include <iostream> #include ...

  10. Android开发环境的安装 Eclipse

    Android开发环境的安装 1 IDE Android可以使用开发的IDE有Eclipse 或者 Android Studio.Android Studio还处于v 0.1.x版本,是early a ...