jQuery中Form相关知识汇总

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>