jQuery_jqueryのFormに関する知識まとめ-jsチュートリアル-php.cn

jQuery_jqueryのFormに関する知識まとめ

WBOY

リリース： 2016-05-16 16:21:56

オリジナル

1002 人が閲覧しました

フォーム内の 1 行のテキストがフォーカスを取得したり、フォーカスを失ったりします

コードをコピーしますコードは次のとおりです:

<フォームアクション="#" メソッド="ポスト" id="regForm">
<フィールドセット>
基本的な個人情報
名前:

パスワード:

詳細情報:
＆lt; textarea id = "msg"＆gt;＆lt;/textarea＆gt;

<スクリプトタイプ="text/javascript">
/**
* 1. 単一行のテキストボックス --- フォーカスの取得とフォーカスの解除
**/
$(関数() {
$(":input").focus(function () {
$(this).addClass("focus");
}).blur(function () {
$(this).removeClass("focus");
})
})

複数行テキストの高さを変更します

コードをコピー

コードは次のとおりです:

<フォーム>

            放大
            缩小

<スクリプトタイプ="text/javascript">
    /**
* 複数行テキストボックスの高さ調整
**/
    $(関数() {
        var $comment = $('#comment');
        $('.bigger').click(function () {
            if(!$comment.is(":animated")) {
                if($comment.height()                     //$comment.height($comment.height() 50);//バージョン1
                    $comment.animate({高さ: " =50"}, 400);
                }
            }
        });
        $('.smaller').click(function () {
            if(!$comment.is(":animated")) {
                if($comment.height() > 50) {
                    //$comment.height($comment.height() - 50);
                    $comment.animate({高さ: "-=50"}, 400);
                }
            }
        });
    });

修正多行文本の滚動条高さ

复制代码代码如下:

            向上
            向下

<スクリプトタイプ="text/javascript">
    /**
* 複数行のテキストボックスのスクロールバーの高さ調整
**/
    $(関数() {
        var $comment = $('#comment');
        $('.up').click(function () {
            if(!$comment.is(":animated")) {
                if($comment.height()                     $comment.animate({scrollTop: " =50"}, 400);
                }
            }
        });
        $('.down').click(function () {
            if(!$comment.is(":animated")) {
                if($comment.height() > 50) {
                    $comment.animate({scrollTop: "-=50"}, 400);
                }
            }
        });
    });

复选框应用

复制代码代码如下:

<フォーム>
    你愛し好の运動ですか?

    足球
    篮球
    羽毛球
    乒乓球





<スクリプトタイプ="text/javascript">
    /**
* チェックボックスアプリケーション
**/
    $(関数() {
        $("#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 = "你选中的是: rn";
            $('[name=items]:checkbox:checked').each(function () {
                str = $(this).val() "rn";
            });
            アラート(文字列);
        });
    })