Forms_jquery の jQuery オペレーション コードのコレクション

テキスト ボックスのフォーカス スタイルを変更します

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

>名前:
fieldset>



まず CSS でクラス名にフォーカスを当てたスタイルを追加します。
CSS コードは次のとおりです:

コードをコピー コードは次のとおりです: .focus {

border: 1px sold #f00;

background: #fcc;


次に、テキスト ボックスのフォーカスの取得イベントと喪失イベントを追加します

コードをコピー

コードは次のとおりです: $(function(){ $(":input ").focus(function(){

$(this).addClass("フォーカス");

}).blur(function(){
$(this).removeClass("フォーカス") ;
});
});


コメント ボックスの最小高さと最大高さを設定します:

コードをコピー

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

拡大

/span>

複数行のテキスト ボックスの高さの変更 textarea> <br>

1.コメント ボックスが 500 ピクセル未満の場合は、元の高さに 50 ピクセルが追加されます。
2. [縮小] ボタンをクリックした後、コメント ボックスの高さが 50 ピクセルを超える場合は、コメント ボックスの高さが 50 ピクセルずつ縮小されます。元の高さ;




コードをコピー

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

$(function(){ var $comment = $('#comment'); //コメントボックスを取得します$( '.bigger').click(function(){ if(!$comment.is(" :animated")){ //アニメーションするかどうかを決定します if($comment.height() $comment.animate({height : " =50"}, 400);

}

}
})
$('.smaller').click(function( ){
if(!$comment.is(":animated")){ //決定アニメーションかどうか
if($comment.height() > 50){
$comment.animate( {height : "-=50"}, 400);
}
}
})
})


スクロール バーの高さの変更
その他の制御 行テキスト ボックスのスクロール バーの変更:




コードをコピー

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

$(function( ){ var $comment = $('#comment') ; $('.up').click(function(){ if($comment.is(":animated")) { $comment.animate({scrollTop : "-=50 "}, 400); }

})

$('.down').click(function(){
if($comment.is(":animated")){
$comment.animate({scrollTop : " =50"}, 400);
})
})


チェックボックスの応用
基本応用: すべて選択チェックボックス、選択を反転、すべての操作の選択を解除します。




コードをコピー

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

好きなスポーツは何ですか?

サッカー
バスケットボール
バドミントン
ポンテニス ボール




//すべて選択
$("#CheckedAll").click(function(){
$('[name=items]:checkbox').attr( 'checked',true);
//チェックなし
$("#CheckedNo").click(function(){
$('[name=items]: チェックボックス').attr('checked',false);
//選択を反転
$("#CheckedNo").click(function(){
$('[name =items]:checkbox').each(function(){
this.checked = !this.checked;
}));
//送信ボタン
$("#send") .click(function(){
var str = "選択した内容は次のとおりです: n";
$('[name=items]:checkbox:checked').each(function(){
str = $(this).val() 'rn'})
alert( str);
);