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

フォーム内の 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);
                }
            }
        });
    });

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

复制代码代码如下:

   
   
   
   

   

       

            向上
            向下
       

        多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。<br>             多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。<br>             多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。<br>             多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。<br>             多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。<br>             多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。<br>             多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。<br>             多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。<br>             多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。多行文本框高度变化。<br>        
   

<スクリプトタイプ="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";
            });
            アラート(文字列);
        });
    })