jQuery => 文書準備完了イベント

ドキュメント対応とは何ですか？どのように使用しますか？

jQueryコードはしばしばjQuery(function($) { ... });ラップされjQuery(function($) { ... });そのため、DOMのロードが完了した後にのみ実行されます。

<script type="text/javascript"> 
  jQuery(function($) {
    // this will set the div's text to "Hello".
    $("#myDiv").text("Hello");
  });
</script>

<div id="myDiv">Text</div>

jQuery（とJavaScriptは一般的に）ページにレンダリングされていないDOM要素を選択できないため、これは重要です。

<script type="text/javascript">
  // no element with id="myDiv" exists at this point, so $("#myDiv") is an
  // empty selection, and this will have no effect
  $("#myDiv").text("Hello");
</script>

<div id="myDiv">Text</div>

カスタムハンドラを.ready()メソッドに渡すことで、jQueryネームスペースのエイリアスを作成できます。これは、他のJSライブラリがjQueryと同じ短縮された$エイリアスを使用している場合に便利です。この競合を回避するには、 $.noConflict();呼び出す必要があります$.noConflict(); - これにより、（短い$エイリアスの代わりに）デフォルトのjQuery名前空間だけが使用されます。
.ready()ハンドラにカスタムハンドラを渡すことによって、 jQueryを使用するためにエイリアス名を選択することができます。

$.noConflict();

jQuery( document ).ready(function( $ ) {
   // Here we can use '$' as jQuery alias without it conflicting with other 
   // libraries that use the same namespace 
   $('body').append('<div>Hello</div>')
});

jQuery( document ).ready(function( jq ) {
   // Here we use a custom jQuery alias 'jq' 
   jq('body').append('<div>Hello</div>')
});

単にページの一番下にjQueryコードを置くのではなく、 $(document).ready関数を使用すると、すべてのHTML要素がレンダリングされ、Document Object Model（DOM）全体がJavaScriptコードを実行できる状態になります。

jQuery 2.2.3以前

これらはすべて同等です。ブロック内のコードは、ドキュメントの準備が整うと実行されます。

$(function() {
  // code
});

$().ready(function() {
  // code
});

$(document).ready(function() {
  // code
});

これらは等価であるため、最初は推奨される形式です。次は、同じ結果を生成する$ではなくjQueryキーワードを使用したバージョンです。

jQuery(function() {
  // code
});

jQuery 3.0

記法

jQuery 3.0以降、このフォームのみを推奨します。

jQuery(function($) {
  // Run when document is ready
  // $ (first argument) will be internal reference to jQuery
  // Never rely on $ being a reference to jQuery in the global namespace
});

その他のドキュメント対応ハンドラはjQuery 3.0では非推奨です。

非同期

jQuery 3.0以降、レディハンドラは常に非同期に呼び出されます。これは、以下のコードでは、文書が実行時に準備が整っているかどうかにかかわらず、常にログ '外部ハンドラ'が最初に表示されることを意味します。

$(function() {
  console.log("inside handler");
});
console.log("outside handler");

>外部ハンドラ
>内部ハンドラ

$（document）.ready（）と$（window）.load（）の違い

$(window).load()はjQueryバージョン1.8では廃止されました（ jQuery 3.0から完全に削除されました） 。このイベントについてのjQueryページには、非推奨の理由が記載されています

イメージと共に使用された場合のロードイベントの警告
開発者が.load()ショートカットを使用して解決しようとする一般的な課題は、画像（または画像のコレクション）が完全に読み込まれたときに関数を実行することです。注意すべきいくつかの既知の警告があります。これらは：
それは、ブラウザ間で一貫性も信頼性もなく動作しません
イメージsrcが以前と同じsrc設定されている場合、WebKitでは正しく起動しません
DOMツリーを正しく泡立てない
ブラウザのキャッシュに既に保存されている画像のために停止することができます

それでもなおload()を使用したい場合は、以下のように書かれています：

$(document).ready()は、完全なDOMが使用可能になるまで待っています.HTMLのすべての要素が解析され、ドキュメントに含まれています。ただし、イメージなどのリソースがこの時点で完全にロードされていない可能性があります。すべてのリソースがロードされるまで待つことが重要な場合は、 $(window).load() を実行し、このイベントの重大な制限を認識している場合は、代わりに以下を使用できます。

$(document).ready(function() {
  console.log($("#my_large_image").height()); // may be 0 because the image isn't available
});

$(window).load(function() {
  console.log($("#my_large_image").height()); // will be correct
});

イベントをアタッチし、ready（）内のDOMを操作する

$(document).ready()使用例：

イベントハンドラのアタッチ
jQueryイベントハンドラをアタッチする

$(document).ready(function() {
  $("button").click(function() {
    // Code for the click function
  });
});

ページ構造の作成後にjQueryコードを実行する

jQuery(function($) {
// set the value of an element.
   $("#myElement").val("Hello");
});

ロードされたDOM構造体を操作する
例：最初にページが読み込まれたときにdiv非表示にし、ボタンのクリックイベントで表示する

$(document).ready(function() {
  $("#toggleDiv").hide();
  $("button").click(function() {
    $("#toggleDiv").show();
  });
});

jQuery（fn）と前回のコード実行の違い

document-readyイベントを使用すると、最大300msの実行遅延を伴う小さなパフォーマンスの欠点があります。閉じた</body>タグの直前でコードを実行すると、同じ動作が実現することがあります。

<body>
  <span id="greeting"></span> world!
  <script>
    $("#greeting").text("Hello");
  </script>
</body>

同様の動作をしますが、ドキュメントレディイベントトリガーが次のように実行されるのを待たずにすぐに実行されます。

<head>
  <script>
    jQuery(function($) {
      $("#greeting").text("Hello");
    });
  </script>
</head>
<body>
  <span id="greeting"></span> world!
</body>

最初の例は、閉じる</body>タグの直前、具体的にはspanタグの後にスクリプトのページと配置に関する知識に依存していることを強調しています。

Modified text is an extract of the original Stack Overflow Documentation

ライセンスを受けた CC BY-SA 3.0

所属していない Stack Overflow

jQuery
文書準備完了イベント

サーチ…