jQuery name 変更

jQuery の load メソッド: 部分 HTML の読み込みとコールバック関数

jQuery の load メソッド: 部分 HTML の読み込みとコールバック関数

この記事では、jQuery 1.9 以降で改善された `$.fn.load` メソッドについて詳しく解説します。具体的には、セレクタを使用して HTML の一部を読み込む方法と、読み込み完了後のコールバック関数を処理する方法について説明します。

jQuery 1.9 以降の `$.fn.load` メソッドの改善

  • `$.fn.load` メソッドは、jQuery 1.9 以降で改善され、セレクタを使用して HTML の一部を読み込むことができるようになりました。
  • 旧バージョンでは、`$.fn.load` メソッドは、対象ページの HTML コンテンツ全体を指定された要素に読み込んでいました。
  • 新バージョンでは、URL の後にスペースとセレクタを追加することで、読み込む HTML 要素を指定できます。

セレクタを使用した部分 HTML の読み込み

  • 構文: `$(selector).load(url スペース セレクタ, [data], [callback]);`
  • 例: `$("#result").load("test.html #content");` は、"test.html" ページ内の ID が "content" の要素を読み込み、ID が "result" の要素に挿入します。

<div id="result"></div>

<script>
  $(document).ready(function() {
    $("#result").load("test.html #content");
  });
</script>

読み込み完了後のコールバック関数の処理

  • `$.fn.load` メソッドの3番目の引数には、読み込み完了後に実行されるコールバック関数を指定できます。
  • コールバック関数は、読み込まれたコンテンツ、レスポンスステータス、XMLHttpRequest オブジェクトにアクセスできます。

<div id="result"></div>

<script>
  $(document).ready(function() {
    $("#result").load("test.html", function(response, status, xhr) {
      if (status == "error") {
        alert("読み込みに失敗しました: " + xhr.status + " " + xhr.statusText);
      }
    });
  });
</script>

注意事項

この記事のタイトルに「jQuery name 変更」という文言は含まれていません。これは、記事の内容が実際には jQuery 自体の名前変更ではなく、`$.fn.load` メソッドの改善について説明しているためです。

関連文献

Q&A

質問 回答
`$.fn.load` メソッドを使用して、読み込み完了時に特定の CSS クラスを追加するにはどうすればよいですか？ コールバック関数内で `addClass()` メソッドを使用できます。例: 

      $("#result").load("test.html", function() {
        $(this).addClass("loaded");
      });
`$.fn.load` メソッドを使用して、JSON データを読み込むことはできますか？ いいえ、`$.fn.load` メソッドは HTML コンテンツを読み込むために設計されています。JSON データを読み込むには、`$.getJSON()` メソッドを使用します。
`$.fn.load` メソッドの読み込み中に、ローディング画像を表示するにはどうすればよいですか？ `$.fn.load` メソッドの開始時と終了時に、それぞれローディング画像を表示/非表示にすることができます。 

      $("#result").html('<img src="loading.gif" alt="読み込み中...">');
      $("#result").load("test.html", function() {
        // ローディング画像を非表示にする
      });

その他の参考記事:jquery name 取得