jQuery チートシート

$('#myElement') // IDが "myElement" の要素を選択

$('.highlight') // "highlight" クラスを持つ要素を選択

$('p') // すべての <p> 要素を選択

$('*') // ページ上のすべての要素を選択

$('div, span, p.myClass') // <div>, <span>, "myClass" クラスを持つ <p> 要素を選択

$('ul li') // <ul> 要素内にあるすべての <li> 要素を選択

$('ul > li') // <ul> 要素の直接の子である <li> 要素を選択

$('h2 + p') // <h2> 要素の直後にある <p> 要素を選択

$('#start ~ div') // ID "start" の要素の後にあるすべての兄弟 <div> 要素を選択

$('[href]') // href属性を持つ要素を選択

$('[type="text"]') // type属性が "text" の要素を選択

$('input[type!="button"]') // type属性が "button" でない <input> 要素を選択

$('[href^="https://"]') // href属性が "https://" で始まる要素を選択

$('[src$=".png"]') // src属性が ".png" で終わる要素を選択

$('[class*="test"]') // class属性に "test" を含む要素を選択

$('[data-options~="urgent"]') // data-options属性に "urgent" を含む要素を選択

$('[lang|="en"]') // lang属性が "en" または "en-..." の要素を選択

$('li:first') // 最初の <li> 要素を選択

$('li:last') // 最後の <li> 要素を選択

$('li:eq(2)') // 3番目の <li> 要素を選択

$('tr:even') // 偶数番目のテーブル行を選択

$('tr:odd') // 奇数番目のテーブル行を選択

$('li:gt(1)') // 2番目より後の <li> 要素を選択 (インデックス 2, 3, ...)

$('li:lt(2)') // 2番目より前の <li> 要素を選択 (インデックス 0, 1)

$('input:not(:checked)') // チェックされていない <input> 要素を選択

$('div:has(p)') // <p> 要素を含む <div> 要素を選択

$('p:contains("重要")') // "重要" というテキストを含む <p> 要素を選択

$('td:empty') // 空のテーブルセルを選択

$('td:parent') // 空ではないテーブルセルを選択

$(':header') // すべてのヘッダー要素を選択

$('div:animated') // アニメーション中のすべてのdiv要素を選択

$(':focus') // フォーカスされている要素を選択

$(':root') // ルート要素を選択

$('#mySection:target') // URLが `...#mySection` の場合にID "mySection" の要素を選択

$('p:lang(ja)') // lang属性が "ja" (または "ja-JP" など) の <p> 要素を選択

$(':input') // フォーム内のすべての入力要素を選択

$(':text') // すべてのテキスト入力フィールドを選択

$(':password') // すべてのパスワード入力フィールドを選択

$(':radio') // すべてのラジオボタンを選択

$(':checkbox') // すべてのチェックボックスを選択

$(':submit') // すべての送信ボタンを選択

$(':image') // すべての画像入力要素を選択

$(':reset') // すべてのリセットボタンを選択

$(':button') // すべての汎用ボタンを選択

$(':file') // すべてのファイル選択フィールドを選択

$('form :hidden') // フォーム内のすべての非表示要素を選択

$('div:visible') // 表示されているすべての <div> 要素を選択

$('input:enabled') // 有効なすべての <input> 要素を選択

$('input:disabled') // 無効なすべての <input> 要素を選択

$('input:checked') // チェックされているすべての <input> 要素を選択

$('select option:selected') // 選択されているすべての <option> 要素を選択

// 取得
var content = $('#myDiv').html();
// 設定
$('#myDiv').html('<p>新しいコンテンツ</p>');

// 取得
var text = $('#myDiv').text();
// 設定
$('#myDiv').text('新しいテキスト');

// 取得 (テキスト入力)
var name = $('#nameInput').val();
// 設定 (テキスト入力)
$('#nameInput').val('山田太郎');
// 取得 (セレクトボックス - 単一選択)
var selectedOption = $('#mySelect').val();
// 取得 (セレクトボックス - 複数選択)
var selectedOptions = $('#myMultiSelect').val(); // 配列が返る
// 設定 (ラジオボタン)
$('input[name="gender"][value="male"]').val(['male']); // もしくは .prop('checked', true)
// 設定 (チェックボックス)
$('#hobbies').val(['music', 'sports']); // 配列で複数指定

$('#myList').append('<li>新しい項目</li>');

$('<li>新しい項目</li>').appendTo('#myList');

$('#myList').prepend('<li>最初の項目</li>');

$('<li>最初の項目</li>').prependTo('#myList');

$('#myElement').after('<p>この要素の後に追加</p>');

$('<p>追加要素</p>').insertAfter('#myElement');

$('#myElement').before('<p>この要素の前に追加</p>');

$('<p>追加要素</p>').insertBefore('#myElement');

$('p').wrap('<div class="wrapper"></div>'); // 各p要素をdivで囲む

$('p').wrapAll('<div class="container"></div>'); // すべてのp要素を一つのdivで囲む

$('p').wrapInner('<strong></strong>'); // 各p要素のテキストをstrongで囲む

$('#myElement').remove(); // 要素を完全に削除
$('li').remove('.old'); // "old"クラスを持つli要素のみ削除

var detachedElement = $('#myElement').detach();
// ... 何らかの処理 ...
$('body').append(detachedElement); // 後で再挿入

$('#myContainer').empty(); // コンテナの中身を空にする

$('p.wrapped').unwrap(); // "wrapped"クラスを持つp要素の親要素を削除

$('h2').replaceWith('<h3>新しい見出し</h3>');

$('<p>置き換え後のコンテンツ</p>').replaceAll('.old-content');

// 要素のみコピー
var cloned = $('#original').clone();
// データとイベントハンドラもコピー
var clonedWithEvents = $('#original').clone(true);
// 子孫要素のデータとイベントハンドラもコピー
var deepCloned = $('#original').clone(true, true);

$('#container').append(cloned);

var linkUrl = $('a').attr('href');

$('img').attr('src', 'new_image.jpg');
$('a').attr('target', '_blank');

$('img').attr({
  src: 'another_image.png',
  alt: '代替テキスト',
  title: '画像タイトル'
});

$('a').attr('href', function(i, currentHref) {
  return currentHref + '?param=' + (i + 1);
});

$('img').removeAttr('alt');

var isChecked = $('#myCheckbox').prop('checked'); // true または false
var tagName = $('#myDiv')[0].tagName; // jQueryオブジェクトではなくDOM要素のプロパティとして取得も可
var tagNameProp = $('#myDiv').prop('tagName'); // 'DIV' (大文字)

$('#myCheckbox').prop('checked', true);
$('#myInput').prop('disabled', true);
$('#mySelect').prop('selectedIndex', 2); // 3番目のオプションを選択

$('input[type="checkbox"]').prop({
  checked: true,
  disabled: false
});

$('input[type="checkbox"]').prop('checked', function(i, currentValue) {
  return i % 2 === 0; // 偶数番目のチェックボックスをチェックする
});

// 通常は使用を避ける
// $('#myCheckbox').removeProp('checked'); // 推奨されない

// 代わりに false を設定する
$('#myCheckbox').prop('checked', false);

$('#myElement').addClass('highlight');
$('p').addClass('text-bold important');

$('li').addClass(function(index) {
  return 'item-' + index;
});

$('#myElement').removeClass('highlight');
$('p').removeClass('text-bold important');
$('div').removeClass(); // すべてのクラスを削除

$('li.old').removeClass(function(index, currentClass) {
  if (currentClass.includes('special')) {
    return 'special'; // 'special' クラスのみ削除
  }
});

$('#myElement').toggleClass('active'); // 'active' クラスを切り替え
$('button').toggleClass('is-primary', userIsAdmin); // userIsAdminがtrueなら 'is-primary' を追加、falseなら削除

$('div').toggleClass(function(index, css) {
  return index % 2 == 0 ? 'even' : 'odd';
});

if ($('#myElement').hasClass('active')) {
  console.log('要素はアクティブです');
}

var color = $('#myElement').css('color');
var fontSize = $('p').css('font-size');

$('#myElement').css('color', 'red');
$('p').css('font-size', '16px');
$('div').css('background-color', '#f0f0f0');

$('li').css('padding-left', function(index) {
  return (index * 10) + 'px';
});

$('#myElement').css({
  color: 'blue',
  fontWeight: 'bold', // キャメルケース
  'margin-top': '20px' // ハイフン区切りも可
});

$('#hiddenElement').show(); // 即時表示
$('#fadingElement').show('slow'); // ゆっくり表示
$('#slidingElement').show(1000, function() { // 1秒かけて表示し、完了後に関数を実行
  console.log('表示完了');
});

$('#visibleElement').hide(); // 即時非表示
$('#fadingElement').hide('fast'); // 速く非表示
$('#slidingElement').hide(500, 'linear', function() { // 0.5秒かけて線形に非表示
  console.log('非表示完了');
});

$('#toggleElement').toggle(); // 表示/非表示を切り替え
$('#toggleElement').toggle('slow'); // ゆっくり切り替え

var shouldShow = true;
$('#myElement').toggle(shouldShow); // shouldShowがtrueなら表示、falseなら非表示

// 取得
var w = $('#myDiv').width();
// 設定
$('#myDiv').width(200); // 200pxに設定
$('#myDiv').width('50%'); // 50%に設定

// 取得
var h = $('#myDiv').height();
// 設定
$('#myDiv').height(150); // 150pxに設定

var innerW = $('#myDiv').innerWidth();

var innerH = $('#myDiv').innerHeight();

var outerW = $('#myDiv').outerWidth(); // padding + border を含む幅
var outerW_margin = $('#myDiv').outerWidth(true); // padding + border + margin を含む幅

var outerH = $('#myDiv').outerHeight(); // padding + border を含む高さ
var outerH_margin = $('#myDiv').outerHeight(true); // padding + border + margin を含む高さ

// 取得
var pos = $('#myElement').offset();
console.log('Top: ' + pos.top + ', Left: ' + pos.left);

// 設定 (通常は CSS で position: absolute/relative を指定してから行う)
// $('#myElement').offset({ top: 100, left: 50 });

var pos = $('#myElement').position();
console.log('Relative Top: ' + pos.top + ', Relative Left: ' + pos.left);

// 取得
var scrollPos = $(window).scrollTop(); // ウィンドウのスクロール位置
var divScrollPos = $('#scrollableDiv').scrollTop(); // div要素のスクロール位置

// 設定
$(window).scrollTop(0); // ページのトップにスクロール
$('#scrollableDiv').scrollTop(100); // divを100pxスクロール

// 取得
var scrollPos = $(window).scrollLeft();
var divScrollPos = $('#scrollableDiv').scrollLeft();

// 設定
$('#scrollableDiv').scrollLeft(50);

// 通常のイベント登録
$('#myButton').on('click', function(event) {
  console.log('ボタンがクリックされました！');
  console.log('イベントデータ:', event.data); // undefined (データ未指定)
});

// 複数イベントを登録
$('#myInput').on('focus blur', function(event) {
  console.log('入力フィールドのイベント:', event.type); // 'focus' or 'blur'
});

// イベントデリゲーション (ul要素に登録し、li要素のクリックを処理)
$('#myList').on('click', 'li', function() {
  $(this).toggleClass('selected');
});

// データ付きイベント登録
$('#myButton').on('click', { user: 'Admin' }, function(event) {
  console.log(event.data.user + 'がクリックしました'); // 'Adminがクリックしました'
});

// クリックイベントハンドラを削除
$('#myButton').off('click');

// デリゲーションされたクリックイベントハンドラを削除
$('#myList').off('click', 'li');

// 特定の関数ハンドラを削除
function myClickHandler() { console.log('クリック！'); }
$('#myButton').on('click', myClickHandler);
$('#myButton').off('click', myClickHandler); // 特定の関数のみ削除

// すべてのイベントハンドラを削除
$('#myElement').off();

$('#initButton').one('click', function() {
  console.log('この処理は一度だけ実行されます。');
  // このハンドラはクリック後に自動で解除される
});

// クリックイベントを発火
$('#myButton').trigger('click');

// カスタムイベントを発火し、データを渡す
$('#myElement').on('customEvent', function(event, param1, param2) {
  console.log('カスタムイベント受信:', param1, param2);
});
$('#myElement').trigger('customEvent', ['データ1', { key: '値' }]);

// クリックハンドラのみ実行 (デフォルトの動作なし)
var result = $('#myForm').triggerHandler('submit'); // フォームは送信されない
// result にはハンドラの戻り値が入る (なければ undefined)

$('#myInput').triggerHandler('focus'); // フォーカスは当たらないが、focusハンドラは実行される

$('#btn').click(function() { /* ... */ });

$('#item').dblclick(function() { /* ... */ });

$('#menu').hover(function() { $(this).addClass('hover'); }, function() { $(this).removeClass('hover'); });

$(document).mousedown(function(e) { console.log(e.button); });

$('#draggable').mouseup(function() { /* ... */ });

$(window).mousemove(function(e) { $('#coords').text(e.pageX + ', ' + e.pageY); });

$('.tooltipTarget').mouseenter(function() { /* ツールチップ表示 */ });

$('.tooltipTarget').mouseleave(function() { /* ツールチップ非表示 */ });

$('#parent').mouseover(function() { console.log('Mouse over parent'); });

$('#parent').mouseout(function() { console.log('Mouse out parent'); });

$('#inputField').keydown(function(e) { if(e.key === 'Enter') { /* ... */ } });

$('#inputField').keyup(function() { /* 入力内容検証 */ });

// keydown/keyupの使用を推奨
$('#inputField').keypress(function(e) { console.log(String.fromCharCode(e.which)); });

$('input').focus(function() { $(this).addClass('focused'); });

$('input').blur(function() { $(this).removeClass('focused'); /* バリデーションなど */ });

$('#formContainer').focusin(function() { console.log('Form element focused'); });

$('#formContainer').focusout(function() { console.log('Form element lost focus'); });

$('#mySelect').change(function() { console.log('選択肢変更:', $(this).val()); });

$('textarea').select(function() { console.log('テキストが選択されました'); });

$('#myForm').submit(function(e) { e.preventDefault(); /* Ajax送信など */ });

$(window).scroll(function() { /* スクロール位置に応じた処理 */ });

$(window).resize(function() { /* レイアウト調整 */ });

// ウィンドウ読み込み完了 (jQuery 3.0+)
$(window).on('load', function() { console.log('Window loaded'); });
// 画像読み込み完了
$('img.lazy').on('load', function() { $(this).fadeIn(); }).each(function() { if(this.complete) $(this).trigger('load'); });

// 非推奨
// $(window).unload(function() { alert('Bye!'); });

$(window).on('beforeunload', function() {
  return 'ページを離れてもよろしいですか？'; // ブラウザ標準の確認ダイアログが表示される
});

$('img').on('error', function() {
  $(this).attr('src', 'fallback.png'); // 代替画像表示
});

console.log('Event type: ' + event.type);

console.log('Target element: ', event.target);

$('#list').on('click', 'li', function(event) {
  console.log('Target (li): ', event.target);
  console.log('Current Target (ul): ', event.currentTarget);
});

$('#list').on('click', 'li', function(event) {
  console.log('Delegate Target (ul): ', event.delegateTarget);
});

$('#item').on('mouseout', function(event) {
  console.log('Mouse moved to: ', event.relatedTarget);
});

$(document).on('mousemove', function(event) {
  console.log('Mouse position: ' + event.pageX + ', ' + event.pageY);
});

$(document).on('click', function(event) {
  console.log('Clicked at viewport coords: ' + event.clientX + ', ' + event.clientY);
});

$('#input').on('keydown', function(event) {
  console.log('Key code (which): ' + event.which);
});
$(document).on('mousedown', function(event) {
  console.log('Mouse button (which): ' + event.which);
});

$('#input').on('keydown', function(event) {
  console.log('Key pressed: ' + event.key);
});

$('#input').on('keydown', function(event) {
  console.log('Physical key code: ' + event.code);
});

$('#btn').on('click', { id: 123 }, function(event) {
  console.log('Data: ', event.data); // { id: 123 }
});

$('a.ajaxLink').on('click', function(event) {
  event.preventDefault(); // ページ遷移を止める
  // Ajax処理など
});

$('#child').on('click', function(event) {
  event.stopPropagation(); // 親要素のクリックイベントは発火しない
  console.log('Child clicked');
});
$('#parent').on('click', function() {
  console.log('Parent clicked'); // 上でstopPropagationされているとここは実行されない
});

$('#btn').on('click', function(event) {
  console.log('Handler 1');
  event.stopImmediatePropagation();
});
$('#btn').on('click', function(event) {
  // 上でstopImmediatePropagationが呼ばれたため、これは実行されない
  console.log('Handler 2');
});

$('#btn').on('click.myNamespace', function(event) {
  console.log('Namespace: ' + event.namespace); // 'myNamespace'
});
$('#btn').trigger('click.myNamespace');

$(document).on('click', function(event) {
  console.log('Event timestamp: ' + event.timeStamp);
});

$('#btn').on('myEvent', function() { return 'Success'; });
var result = $('#btn').triggerHandler('myEvent');
console.log(result); // 'Success'

$('#myElement').fadeIn('slow');

$('#myElement').fadeOut(1000); // 1秒かけてフェードアウト

$('#myElement').fadeToggle('fast');

$('#myElement').fadeTo('slow', 0.5); // ゆっくり半透明に
$('#myElement').fadeTo(500, 1.0); // 0.5秒かけて完全に不透明に

$('#details').slideDown();

$('#details').slideUp('slow');

$('#toggleButton').click(function() {
  $('#details').slideToggle(500); // 0.5秒かけて切り替え
});

// 幅と不透明度をアニメーション
$('#box').animate({
  width: '200px',
  opacity: 0.5
}, 1000, 'linear', function() {
  console.log('アニメーション完了');
});

// 相対的な値でアニメーション (現在の値から増減)
$('#box').animate({
  left: '+=50px', // 左に50px移動
  height: '-=10px' // 高さを10px減らす
}, 'fast');

// 'show', 'hide', 'toggle' を値として使用 (プロパティ固有のアニメーション)
$('#box').animate({
  height: 'toggle' // 高さをアニメーションで表示/非表示切り替え
}, 500);

$('#box').animate({
  left: '300px',
  top: '100px'
}, {
  duration: 1500,
  easing: 'swing',
  queue: false, // キューに入れないで即時実行
  step: function(now, fx) { // アニメーションの各ステップで実行
    // fx.prop でプロパティ名 ('left' or 'top')
    // now で現在の値
    console.log(fx.prop + ': ' + now);
  },
  complete: function() { // アニメーション完了時 (callback と同じ)
    console.log('アニメーション完了 (complete)');
  },
  done: function() { // アニメーション成功時 (complete と似ているが Deferred ベース)
    console.log('アニメーション成功 (done)');
  }
});

// 現在のアニメーションだけ停止 (キューは残る)
$('#box').stop();

// 現在のアニメーションを停止し、キューもクリア
$('#box').stop(true);

// 現在のアニメーションを即座に完了させ、キューもクリア
$('#box').stop(true, true);

// デフォルトキュー ('fx') のアニメーションをすべて完了
$('#box').finish();

// カスタムキューのアニメーションを完了
// $('#box').finish('myQueue');

$('#box')
  .slideUp(300)
  .delay(800) // 800ms 待機
  .fadeIn(400);

// キューの内容を確認 (デバッグ用)
console.log($('#box').queue());

// キューに関数を追加
$('#box').queue(function(next) {
  console.log('キュー内のカスタム関数実行');
  $(this).css('background-color', 'yellow');
  next(); // 次のキュー項目を実行するために必要
});

$('#box').animate({ left: '+=100px' }); // このアニメーションは上の関数の後に実行される

$('#box').queue('myQueue', function(next) {
  console.log('カスタムキュー関数 1');
  setTimeout(next, 1000); // 1秒後に次のキューを実行
});
$('#box').queue('myQueue', function(next) {
  console.log('カスタムキュー関数 2');
  next();
});

// キューを開始
$('#box').dequeue('myQueue');

$('#box').animate({height: 300}, 2000);
$('#box').animate({width: 300}, 2000);

// アニメーション開始直後にキューをクリア
setTimeout(function() {
  $('#box').clearQueue(); // heightアニメーションは実行されるが、widthアニメーションはキャンセルされる
}, 100);

• url: リクエストURL (settingsオブジェクト内でも指定可)。
• method/type: HTTPメソッド (‘GET’, ‘POST’, ‘PUT’, ‘DELETE’ など)。デフォルトは ‘GET’。
• dataType: サーバーから期待するデータの種類 (‘xml’, ‘json’, ‘script’, ‘html’, ‘text’)。指定しない場合、jQueryはMIMEタイプに基づいて推測します。
• data: サーバーに送信するデータ。オブジェクト、文字列、配列を指定可能。GETリクエストではURLパラメータに、POSTリクエストではリクエストボディに含まれます。
• contentType: サーバーにデータを送信する際のコンテントタイプ。デフォルトは ‘application/x-www-form-urlencoded; charset=UTF-8’。JSONを送信する場合は ‘application/json’ を指定し、data を JSON.stringify() で文字列化する必要があります。
• processData: data をクエリ文字列に加工するかどうか (デフォルト: true)。ファイルを送信する場合などは false に設定します。
• cache: ブラウザによるAjaxレスポンスのキャッシュを許可するかどうか (デフォルト: true、ただし dataType が ‘script’ または ‘jsonp’ の場合は false)。
• timeout: リクエストのタイムアウト時間 (ミリ秒)。
• async: リクエストを非同期で行うか (デフォルト: true)。同期リクエスト (false) はブラウザをブロックするため非推奨。
• headers: リクエストヘッダーのキー/値ペアのオブジェクト。
• beforeSend(jqXHR, settings): リクエスト送信前に実行される関数。false を返すとリクエストをキャンセル。
• success(data, textStatus, jqXHR): リクエスト成功時に実行される関数。
• error(jqXHR, textStatus, errorThrown): リクエスト失敗時に実行される関数。
• complete(jqXHR, textStatus): リクエスト完了時 (成功・失敗問わず) に実行される関数。

// GETリクエスト (JSON取得)
$.ajax({
  url: '/api/users',
  method: 'GET', // または type: 'GET'
  dataType: 'json',
  timeout: 5000, // 5秒でタイムアウト
  success: function(data, textStatus, jqXHR) {
    console.log('取得成功:', data);
    // data を使って表示を更新
  },
  error: function(jqXHR, textStatus, errorThrown) {
    console.error('取得失敗:', textStatus, errorThrown);
  },
  complete: function(jqXHR, textStatus) {
    console.log('リクエスト完了:', textStatus);
  }
});

// POSTリクエスト (フォームデータ送信)
$.ajax({
  url: '/api/submit-form',
  method: 'POST',
  data: {
    name: $('#name').val(),
    email: $('#email').val()
  },
  dataType: 'json', // サーバーからの応答をJSONとして期待
  beforeSend: function() {
    $('#loadingIndicator').show(); // 送信前にローディング表示
  },
  success: function(response) {
    console.log('送信成功:', response);
    alert(response.message);
  },
  error: function() {
    alert('送信に失敗しました。');
  },
  complete: function() {
    $('#loadingIndicator').hide(); // 完了時にローディング非表示
  }
});

// POSTリクエスト (JSONデータ送信)
$.ajax({
  url: '/api/update-config',
  method: 'POST',
  contentType: 'application/json', // コンテントタイプをJSONに指定
  data: JSON.stringify({ // JavaScriptオブジェクトをJSON文字列に変換
    theme: 'dark',
    notifications: true
  }),
  success: function(res) { console.log('設定更新:', res); }
});

// 基本的なGET
$.get('/api/items', function(data) {
  console.log('Items loaded:', data);
});

// データ付きGET ( /api/search?q=jquery⟨=ja )
$.get('/api/search', { q: 'jquery', lang: 'ja' }, function(results) {
  console.log('Search results:', results);
}, 'json'); // dataTypeを 'json' に指定

// データをPOST
$.post('/api/users/create', { name: 'Test User', role: 'guest' }, function(response) {
  console.log('User created:', response);
  if(response.success) {
    // 成功処理
  }
}, 'json');

$.getJSON('/api/config', { section: 'ui' }, function(config) {
  console.log('UI Config:', config);
  $('body').css('background-color', config.backgroundColor);
});

$.getScript('/js/my-plugin.js', function() {
  console.log('Plugin loaded and executed.');
  // プラグインの機能を利用開始
  $('#myElement').myPlugin();
});

// #contentDiv に /partial.html の内容全体を読み込む
$('#contentDiv').load('/partial.html');

// #targetDiv に /page.html の #main 要素の内容を読み込む
$('#targetDiv').load('/page.html #main', function(response, status, xhr) {
  if (status == "error") {
    var msg = "読み込みエラー: ";
    $('#targetDiv').html(msg + xhr.status + " " + xhr.statusText);
  }
});

// POSTリクエストでデータを送り、結果を読み込む
$('#result').load('/api/calculate', { value1: 10, value2: 20 });

$(document).ajaxStart(function() { $('#globalLoader').show(); });

$(document).ajaxStop(function() { $('#globalLoader').hide(); });

$(document).ajaxSend(function(evt, xhr, opts) { console.log('Sending request to:', opts.url); });

$(document).ajaxSuccess(function(evt, xhr, opts, data) { console.log('Success:', opts.url, data); });

$(document).ajaxError(function(evt, xhr, opts, error) { console.error('Error:', opts.url, xhr.status, error); });

$(document).ajaxComplete(function(evt, xhr, opts) { console.log('Completed:', opts.url, xhr.status); });

var formData = $('#myForm').serialize();
console.log(formData); // 例: "name=Taro&email=taro%40example.com&hobbies=reading"

// $.post と組み合わせて使用
$.post('/submit', $('#myForm').serialize(), function(response) {
  // ...
});

var formDataArray = $('#myForm').serializeArray();
console.log(formDataArray);
/* 例:
[
  { name: "name", value: "Taro" },
  { name: "email", value: "taro@example.com" },
  { name: "hobbies", value: "reading" } // チェックボックスなどは複数出現可能性あり
]
*/

// 必要に応じてオブジェクトに変換可能
var formDataObject = {};
$.each(formDataArray, function(i, field){
  formDataObject[field.name] = field.value;
});
console.log(formDataObject);

var params = { width:1680, height:1050, tags: ['web', 'dev'] };
var queryString = $.param(params);
console.log(queryString); // "width=1680&height=1050&tags%5B%5D=web&tags%5B%5D=dev" (デフォルト)

var traditionalString = $.param(params, true);
console.log(traditionalString); // "width=1680&height=1050&tags=web&tags=dev" (traditional=true)

// 配列のループ
var arr = ['a', 'b', 'c'];
$.each(arr, function(index, value) {
  console.log('Index: ' + index + ', Value: ' + value);
});

// オブジェクトのループ
var obj = { name: 'John', age: 30, city: 'New York' };
$.each(obj, function(key, value) {
  console.log('Key: ' + key + ', Value: ' + value);
  if (key === 'age') {
    console.log('Age found, stopping loop.');
    return false; // ループ中断
  }
});

// 配列の要素を2倍にする
var numbers = [1, 2, 3];
var doubled = $.map(numbers, function(value, index) {
  return value * 2;
});
console.log(doubled); // [2, 4, 6]

// オブジェクトの値を抽出
var obj = { a: 1, b: 2, c: 3 };
var values = $.map(obj, function(value, key) {
  return value;
});
console.log(values); // [1, 2, 3]

// 特定の条件でフィルタリング（nullを返す）
var mixed = [0, 1, null, 2, undefined, 3];
var filtered = $.map(mixed, function(value, index) {
  return (value === null || value === undefined) ? null : value * 10;
});
console.log(filtered); // [0, 10, 20, 30]

var numbers = [1, 5, 2, 8, 3, 10];

// 5より大きい数を抽出
var greaterThanFive = $.grep(numbers, function(element, index) {
  return element > 5;
});
console.log(greaterThanFive); // [8, 10]

// 偶数を除外 (奇数を抽出)
var oddNumbers = $.grep(numbers, function(element, index) {
  return element % 2 === 0; // 条件は「偶数である」
}, true); // invert=true なので、偶数でないものを返す
console.log(oddNumbers); // [1, 5, 3]

var defaults = { setting1: true, setting2: 'default' };
var options = { setting2: 'custom', setting3: 123 };

// options を defaults にマージ (defaults が変更される)
$.extend(defaults, options);
console.log(defaults); // { setting1: true, setting2: 'custom', setting3: 123 }

// 新しいオブジェクトにマージ
var obj1 = { a: 1, b: { c: 2 } };
var obj2 = { b: { d: 3 }, e: 4 };
var mergedShallow = $.extend({}, obj1, obj2);
console.log(mergedShallow); // { a: 1, b: { d: 3 }, e: 4 } (bが上書きされる)
var mergedDeep = $.extend(true, {}, obj1, obj2);
console.log(mergedDeep); // { a: 1, b: { c: 2, d: 3 }, e: 4 } (bが再帰的にマージされる)

// jQuery自体にメソッドを追加 (プラグイン作成で利用)
$.extend({
  myUtility: function() { console.log('My Utility!'); }
});
$.myUtility(); // 'My Utility!'

var arr = ['apple', 'banana', 'cherry'];
console.log( $.inArray('banana', arr) ); // 1
console.log( $.inArray('grape', arr) ); // -1
console.log( $.inArray('apple', arr, 1) ); // -1 (インデックス1以降で検索)

var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];
var mergedArray = $.merge(arr1, arr2);
console.log(mergedArray); // [1, 2, 3, 4, 5, 6]
console.log(arr1); // [1, 2, 3, 4, 5, 6] (arr1自体が変更されている)

var nodeList = document.getElementsByTagName('p'); // NodeList (配列ライク)
var realArray = $.makeArray(nodeList);
realArray.forEach(function(p) { // 配列メソッドが使える
  console.log(p.textContent);
});

function myFunction() {
  var argsArray = $.makeArray(arguments);
  console.log(argsArray);
}
myFunction(1, 'a', true); // [1, "a", true]

var divs = $('div').get(); // DOM要素の配列を取得
var ps = $('p').get();
var combined = divs.concat(ps).concat(divs); // 重複を含む配列
var uniqueSorted = $.uniqueSort(combined);
console.log(uniqueSorted.length); // 重複が削除されソートされた要素数

$.isArray([]); // true
$.isArray({}); // false

$.isFunction(function() {}); // true
$.isFunction(/regex/); // false

$.isNumeric(123); // true
$.isNumeric('-1.23'); // true
$.isNumeric('abc'); // false
$.isNumeric(Infinity); // false
$.isNumeric(NaN); // false

$.isEmptyObject({}); // true
$.isEmptyObject({ a: 1 }); // false
$.isEmptyObject(new Object()); // true

$.isPlainObject({}); // true
$.isPlainObject(new Object()); // true
$.isPlainObject({ a: 1 }); // true
$.isPlainObject(window); // false
$.isPlainObject(document.body); // false
$.isPlainObject(new Date()); // false
$.isPlainObject([]); // false

$.isWindow(window); // true
$.isWindow(this); // グローバルスコープなら true
$.isWindow({}); // false

// AjaxでXMLを取得した場合など
$.ajax({
  url: 'data.xml',
  dataType: 'xml',
  success: function(xmlDoc) {
    console.log($.isXMLDoc(xmlDoc)); // true
    console.log($.isXMLDoc(xmlDoc.documentElement)); // true
  }
});

$.type({}); // "object"
$.type([]); // "array"
$.type(function(){}); // "function"
$.type("hello"); // "string"
$.type(123); // "number"
$.type(true); // "boolean"
$.type(new Date()); // "date"
$.type(/a/); // "regexp"
$.type(null); // "null"
$.type(undefined); // "undefined"

var text = "   lots of spaces   \n";
var trimmed = $.trim(text);
console.log('"' + trimmed + '"'); // "lots of spaces"

var myApp = {
  name: 'My Application',
  handleClick: function(event) {
    console.log('Clicked in: ' + this.name); // this が myApp を指すようにしたい
  }
};

// 通常のイベントハンドラでは this はボタン要素を指す
// $('#myButton').on('click', myApp.handleClick);

// $.proxy を使って this を myApp に束縛する
$('#myButton').on('click', $.proxy(myApp.handleClick, myApp));

// 第2形式
$('#myOtherButton').on('click', $.proxy(myApp, 'handleClick'));

var containerDiv = $('#container')[0]; // DOM要素を取得
var innerP = $('#innerElement')[0];   // DOM要素を取得
var outerP = $('#outerElement')[0];   // DOM要素を取得

console.log( $.contains(containerDiv, innerP) ); // true (含まれている)
console.log( $.contains(containerDiv, outerP) ); // false (含まれていない)
console.log( $.contains(document.documentElement, containerDiv) ); // true (通常は含まれる)
console.log( $.contains(containerDiv, containerDiv) ); // false (自分自身は含まないと判定)

var timestamp = $.now();
console.log(timestamp); // 例: 1678886400000

var htmlString = '<p>Hello</p><div>World</div>';
var domNodes = $.parseHTML(htmlString);

$.each(domNodes, function(i, node) {
  $('body').append(node); // パースしたノードをドキュメントに追加
});

var htmlWithScript = '<p>Text</p><script>alert("Hi!");</script>';
var nodesWithScript = $.parseHTML(htmlWithScript, document, true); // keepScripts=true
console.log(nodesWithScript.length); // 2 (p要素とscript要素)
// スクリプトは含まれるが実行されない

// jQuery 3.0 以降では JSON.parse() を使う
var jsonString = '{"name":"John", "age":30}';
// var obj = $.parseJSON(jsonString); // 廃止
var obj = JSON.parse(jsonString);
console.log(obj.name); // John

var xmlString = '<items><item id="1">Apple</item></items>';
try {
  var xmlDoc = $.parseXML(xmlString);
  var itemName = $(xmlDoc).find('item').text();
  console.log(itemName); // Apple
} catch (e) {
  console.error("XML Parse Error:", e);
}

function doSomething(callback) {
  // コールバックが指定されていなければ、$.noop を使う
  var cb = $.isFunction(callback) ? callback : $.noop;
  console.log('処理を実行...');
  cb(); // エラーにならずに実行できる
}

doSomething(); // 何も起こらない
doSomething(function() { console.log('完了！'); }); // '完了！' が表示される

// 2つのAjaxリクエストが完了するのを待つ
var request1 = $.ajax('/api/data1');
var request2 = $.ajax('/api/data2');

$.when(request1, request2).done(function(response1, response2) {
  // response1 と response2 はそれぞれのAjaxの成功時のデータ (配列形式)
  var data1 = response1[0];
  var data2 = response2[0];
  console.log('Data 1:', data1);
  console.log('Data 2:', data2);
  console.log('両方のリクエストが成功しました！');
}).fail(function() {
  console.error('少なくとも1つのリクエストが失敗しました。');
}).always(function() {
  console.log('すべてのリクエストが完了しました（成功または失敗）。');
});

// 通常の値やPromiseも混ぜられる
var deferred = $.Deferred();
setTimeout(function() { deferred.resolve('完了'); }, 1000);

$.when($.get('/api/user'), deferred.promise(), '静的な値')
 .done(function(userResponse, deferredResult, staticValue) {
   console.log('User:', userResponse[0]);
   console.log('Deferred:', deferredResult);
   console.log('Static:', staticValue);
 });