サイトロゴ

jQuery 中級者向け〜使い方をいろいろまとめ

著者画像
Toshihiko Arai
投稿日: 2024-07-24

初期化のライフサイクル（呼び出し順）

動作確認用ソースコード

以下は、jQueryおよび通常のJavaScriptで初期化イベントを呼び出した場合に、順番を確認できるソースコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>jQuery Initialization Debug</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    // jQueryのドキュメント読み込み完了時
    $(function() {
      console.log("$(function() {}) - DOMContentLoaded");
    });

    jQuery(function() {
      console.log("jQuery(function() {}) - DOMContentLoaded");
    });

    jQuery(document).ready(function() {
      console.log("jQuery(document).ready(function() {}) - DOMContentLoaded");
    });

    // jQueryの全リソース読み込み完了時
    $(window).on('load', function() {
      console.log("$(window).on('load', function() {}) - load");
    });

    // 通常のJavaScriptのドキュメント読み込み完了時
    document.addEventListener('DOMContentLoaded', function() {
      console.log("document.addEventListener('DOMContentLoaded', function() {}) - DOMContentLoaded");
    });

    // 通常のJavaScriptの全リソース読み込み完了時
    window.addEventListener('load', function() {
      console.log("window.addEventListener('load', function() {}) - load");
    });
  </script>
</head>
<body>
  <h1>jQuery Initialization Debug</h1>
  <img src="https://via.placeholder.com/150" alt="Placeholder Image">
</body>
</html>

実際に実行すると、以下のようにコンソールに出力されます。

document.addEventListener('DOMContentLoaded', function() {}) - DOMContentLoaded
test1.html:10 $(function() {}) - DOMContentLoaded
test1.html:14 jQuery(function() {}) - DOMContentLoaded
test1.html:18 jQuery(document).ready(function() {}) - DOMContentLoaded
test1.html:23 $(window).on('load', function() {}) - load
test1.html:33 window.addEventListener('load', function() {}) - load

以下は、jQueryの初期化と通常のJavaScriptでの初期化方法についてのライフサイクルおよび呼び出し順を解説します。

$(function(){})ドキュメントの準備が完了したら処理を実行

これら3つは同じタイミングで実行されます。実行タイミングは、ドキュメントのDOMが完全に読み込まれた後に処理を実行されます。つまり DOMContentLoadedイベントの後に実行されます。

$(function(){
  // 処理
});

jQuery(function(){
  // 処理
});

jQuery(document).ready(function(){
  // 処理
});

$(window).load(function(){}) すべてのリソースが読み込まれたら処理を実行

これは、すべてのリソース（画像やスタイルシートなど）が読み込まれた後に処理を実行します。loadイベントの後に実行されます。

$(window).load(function(){
  // 処理
});

document.addEventListener('DOMContentLoaded', function() {})ドキュメントの準備が完了したら処理を実行

こちらは、jQueryを使わない通常のJavaScriptです。この方法は、DOMContentLoadedイベントが発生した時点で実行されます。

document.addEventListener('DOMContentLoaded', function() {
  // 処理
});

window.addEventListener('load', function() {}) すべてのリソースが読み込まれたら処理を実行

この方法は、loadイベントが発生した時点で実行されます。

window.addEventListener('load', function() {
  // 処理
});

ライフサイクルと呼び出し順まとめ

  1. document.addEventListener('DOMContentLoaded', function() {}) - 通常のJavaScript
  2. $(function(){}) - jQuery（ドキュメントの準備が完了したら処理を実行）
  3. $(window).load(function(){}) - jQuery（すべてのリソースが読み込まれたら処理を実行）
  4. window.addEventListener('load', function() {}) - 通常のJavaScript

ということで、jQueryを使うにあたって②と③に注意しておけば良さそうです。

イベント関連

triggerでクリックイベントを発火する

triggerメソッドは、指定したイベントを対象の要素に発生させるために使用されます。つまりこのメソッドを使うと、例えばユーザーのクリック操作をシミュレートしてプログラミングから実行できます。

以下は、ボタンクリックイベントのトリガーの例です:

<button id="myButton">Click me</button>
<p id="message"></p>
$().ready(function() {
  // ボタンクリック時のイベントハンドラー
  $('#myButton').on('click', function() {
    $('#message').text('Button was clicked!');
  });

  // ボタンクリックイベントをプログラムで発生させる
  $('#myButton').trigger('click');
});

この例では、ページが読み込まれた時に、#myButtonのクリックイベントがプログラムで発生し、メッセージが表示されます。

triggerでパラメーターを渡す

実際のクリック操作とtriggerのどちらからイベントが発生したか判断したい場合があります。そんなときはフラグをパラメーターに渡すと便利です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>jQuery Initialization Debug</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
$().ready(function() {
  // ボタンクリック時のイベントハンドラー
  $('#myButton').on('click', function(event, triggerEvent = false) {
    const message = triggerEvent === true ? 'triggerから呼ばれました' : 'クリック操作で呼ばれました'
    alert(message);
  });

  // ボタンクリックイベントをプログラムで発生させる
  $('#myButton').trigger('click', [true]);
});
  </script>
</head>
<body>
  <button id="myButton">Click me</button>
  <p id="message"></p>
</body>
</html>

propでチェックボックスを操作する

propとは

propはjQueryのメソッドで、DOM要素のプロパティを設定または取得するために使用されます。propメソッドを使うと、HTML属性ではなく、DOM要素のプロパティに直接アクセスすることができます。

例えば、チェックボックスのチェック状態を操作する場合、以下のようにpropメソッドを使用します：

プロパティを設定する場合

// チェックボックスをチェック済みにする
$("#checkboxId").prop("checked", true);

// チェックボックスのチェックを外す
$("#checkboxId").prop("checked", false);

プロパティを取得する場合

// チェックボックスがチェックされているかどうかを取得
var isChecked = $("#checkboxId").prop("checked");
console.log(isChecked); // true または false が出力される

関連記事