jQuery中Form相关知识汇总


Posted in Javascript onJanuary 06, 2015

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>
Javascript 相关文章推荐
JS控件的生命周期介绍
Oct 22 Javascript
Jquery判断$(&quot;#id&quot;)获取的对象是否存在的方法
Sep 25 Javascript
jQuery结合HTML5制作的爱心树表白动画
Feb 01 Javascript
jQuery预加载图片常用方法
Jun 15 Javascript
jQuery简单实现验证邮箱格式
Jul 15 Javascript
三种带箭头提示框总结实例
Jun 14 Javascript
javaScript中&quot;==&quot;和&quot;===&quot;的区别详解
Mar 16 Javascript
vue加载完成后的回调函数方法
Sep 07 Javascript
vue使用laydate时间插件的方法
Nov 14 Javascript
详解Vue.js自定义tipOnce指令用法实例
Dec 19 Javascript
vue动态绘制四分之三圆环图效果
Sep 03 Javascript
Jquery滑动门/tab切换实现方法完整示例
Jun 05 jQuery
使用VS开发 Node.js指南
Jan 06 #Javascript
jQuery实现的图片分组切换焦点图插件
Jan 06 #Javascript
JavaScript静态类型检查工具FLOW简介
Jan 06 #Javascript
jQuery中filter()方法用法实例
Jan 06 #Javascript
JavaScript修改浏览器tab标题小技巧
Jan 06 #Javascript
ECMAScript 6即将带给我们新的数组操作方法前瞻
Jan 06 #Javascript
jQuery中hasClass()方法用法实例
Jan 06 #Javascript
You might like
深入phpMyAdmin的安装与配置的详细步骤
2013/05/07 PHP
PHP系统命令函数使用分析
2013/07/05 PHP
浅析虚拟主机服务器php fsockopen函数被禁用的解决办法
2013/08/07 PHP
php将12小时制转换成24小时制的方法
2015/03/31 PHP
再Docker中架设完整的WordPress站点全攻略
2015/07/29 PHP
PHP实现git部署的方法教程
2017/12/19 PHP
PHP实现一维数组与二维数组去重功能示例
2018/05/24 PHP
JavaScript正则表达式中的ignoreCase属性使用详解
2015/06/16 Javascript
javascript实现确定和取消提示框效果
2015/07/10 Javascript
解决jQuery使用JSONP时产生的错误
2015/12/02 Javascript
JavaScript实现的MD5算法完整实例
2016/02/02 Javascript
JS JSOP跨域请求实例详解
2016/07/04 Javascript
全面了解javascript中的错误处理机制
2016/07/18 Javascript
javascript实现简易计算器
2017/02/01 Javascript
js鼠标移动时禁止选中文字
2017/02/19 Javascript
bootstrap treeview 扩展addNode方法动态添加子节点的方法
2017/11/21 Javascript
vuejs 切换导航条高亮(路由菜单高亮)的方法示例
2018/05/29 Javascript
如何使用proxy实现一个简单完整的MVVM库的示例代码
2019/09/17 Javascript
解决vue cli使用typescript后打包巨慢的问题
2019/09/30 Javascript
javascript浅层克隆、深度克隆对比及实例解析
2020/02/09 Javascript
vue如何搭建多页面多系统应用
2020/06/17 Javascript
[01:23]一分钟告诉你 DOTA2为什么叫信仰2
2014/06/20 DOTA
[04:52]第二届DOTA2亚洲邀请赛主赛事第一天比赛集锦:OG娜迦海妖放大配合谜团大中3人
2017/04/02 DOTA
Python实现冒泡,插入,选择排序简单实例
2014/08/18 Python
python回调函数用法实例分析
2015/05/09 Python
Python制作爬虫采集小说
2015/10/25 Python
Caffe均值文件mean.binaryproto转mean.npy的方法
2018/07/09 Python
canvas仿写贝塞尔曲线的示例代码
2017/12/29 HTML / CSS
软件测试工程师面试问题精选
2016/10/28 面试题
一年级语文教学反思
2014/02/13 职场文书
《春雨》教学反思
2014/04/24 职场文书
护士感人事迹
2014/05/01 职场文书
创业培训计划书
2014/05/03 职场文书
运动会口号霸气押韵
2015/12/24 职场文书
分析mysql中一条SQL查询语句是如何执行的
2021/06/21 MySQL
Spring中的@Transactional的工作原理
2022/06/05 Java/Android