【jQuery】プログラミングサンプル集
jQueryを書くときに忘れやすいコードをまとめて紹介していきます。
※随時更新します。
イベント関係
チェックボックスの状態確認
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('サンプル');