PG WORKS

PHPやLinux(サーバー)などのノウハウや、便利なツールを紹介していきます。

【jQuery】プログラミングサンプル集

jQueryを書くときに忘れやすいコードをまとめて紹介していきます。
※随時更新します。

最新のCDNは、前回アップした記事の「jQuery読み込み」を参照

zen6a.hateblo.jp

イベント関係

zen6a.hateblo.jp

チェックボックスの状態確認

if($("#id").prop('checked')) {
/*チェック済み*/
}else{
/*チェックなし*/
}

該当のチェックボックスにチェックをつける

$('#id').prop('checked',true);

/*チェックをはずすとき*/
$('#id').prop('checked',false);

チェックボックスにチェックが入ったものだけを取得し配列に格納

var ids = [];
$( '#checkbox:checked' ).each( function() {
  ids.push( $( this ).val() );
});

セレクトボックスを選択する

/*optionのvalueが1になっている項目に選択*/
$('#id').val(1);

セレクトボックスの選択をはずす

$('#id' option').attr('selected', false);

ID名の取得

$('#id').attr('id');

クラス名の取得

$('#id').attr('class');

クラス名の判定

$('#id').hasclass('class名');

表示/非表示の交互に切り替え

$('#id').toggle();

form値を取得してajaxでPOST

var formdata = $('#formname').serialize();
$.ajax({
    url: url,
    type:'POST',
    dataType: 'text',
    data : formdata,
}).done(function(data) {
/*成功時の処理*/
}).fail(function(XMLHttpRequest, textStatus, errorThrown) {
/*失敗時の処理*/
})

form値を追加

var formdata = $(form).serializeArray();
formdata.push({param1: 'value1', param2: 'value2'});
$.ajax({
    url: url,
    type:'POST',
    dataType: 'text',
    data : formdata,
}).done(function(data) {
/*成功時の処理*/
}).fail(function(XMLHttpRequest, textStatus, errorThrown) {
/*失敗時の処理*/
})

.onイベントの使い方(動的に追加したものも判定

$(document).on('click', '#button', function(){
/*ここに処理記述*/
});

コンソールにログを出力

console.log('サンプル');

デバックダイアログを表示

alert('サンプル');