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 相关文章推荐
javascript 数组的方法集合
Jun 05 Javascript
IE FF OPERA都可用的弹出层实现代码
Sep 29 Javascript
使用jquery.qrcode生成彩色二维码实例
Aug 08 Javascript
jquery实现搜索框常见效果的方法
Jan 22 Javascript
JavaScript中消除闭包的一般方法介绍
Mar 16 Javascript
jquery实现跳到底部,回到顶部效果的简单实例(类似锚)
Jul 10 Javascript
JS 终止执行的实现方法
Nov 24 Javascript
原生js实现无限循环轮播图效果
Jan 20 Javascript
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
原生JS实现图片懒加载之页面性能优化
Apr 26 Javascript
简述vue-cli中chainWebpack的使用方法
Jul 30 Javascript
微信小程序sessionid不一致问题解决
Aug 30 Javascript
使用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
如何对PHP程序中的常见漏洞进行攻击
2006/10/09 PHP
首页四格,首页五格For6.0(GBK)(UTF-8)[12种组合][9-18][版主安装测试通过]
2007/09/24 PHP
php array_slice函数的使用以及参数详解
2008/08/30 PHP
使用bcompiler对PHP文件进行加密的代码
2010/08/29 PHP
php通过文件头检测文件类型通用代码类(zip,rar等)
2010/10/19 PHP
如何在php中正确的使用json
2013/08/06 PHP
PHP 实现页面静态化的几种方法
2017/07/23 PHP
PHP 并发场景的几种解决方案
2019/06/14 PHP
不同浏览器对回车提交表单的处理办法
2010/02/13 Javascript
基于jquery的无限级联下拉框js插件
2011/10/29 Javascript
用js传递value默认值的示例代码
2014/09/11 Javascript
jQuery团购倒计时特效实现方法
2015/05/07 Javascript
javascript实现动态标签云
2015/10/16 Javascript
简单实现JS计算器功能
2016/12/21 Javascript
jquery实现一个全局计时器(商城可用)
2017/06/30 jQuery
JS实现网页抢购功能(触发,终止脚本)
2017/11/27 Javascript
vue 使用自定义指令实现表单校验的方法
2018/08/28 Javascript
jQuery实现鼠标移入移出事件切换功能示例
2018/09/06 jQuery
Nodejs处理异常操作示例
2018/12/25 NodeJs
Vue快速实现通用表单验证的示例代码
2020/01/09 Javascript
Python编程之属性和方法实例详解
2015/05/19 Python
python清除指定目录内所有文件中script的方法
2015/06/30 Python
python机器学习理论与实战(四)逻辑回归
2018/01/19 Python
Python线程创建和终止实例代码
2018/01/20 Python
django表单中的按钮获取数据的实例分析
2020/07/31 Python
html5 Canvas画图教程(5)—canvas里画曲线之arc方法
2013/01/09 HTML / CSS
基于Html5实现的语音搜索功能
2019/05/13 HTML / CSS
几道PHP面试题
2013/04/14 面试题
什么是View State?
2013/01/27 面试题
应届毕业生个人求职自荐信
2014/01/06 职场文书
优秀毕业生自荐信
2014/06/10 职场文书
财务务虚会发言材料
2014/10/20 职场文书
护士辞职信怎么写
2015/02/27 职场文书
电视新闻稿
2015/07/17 职场文书
导游词之茶卡盐湖
2019/11/26 职场文书
vue动态绑定style样式
2022/04/20 Vue.js