jQueryを実行するためには、下記のように記述します。
|
1 2 3 |
$(function(){ //処理 }); |
認識しておくべきことは、上記の処理部分はDOMツリーが構築された時点で実行されるということです。つまりfunction(){}は、JavaScriptのDOMContentLoadedイベントが発火された時点で実行されます。DOMツリーに加えて更に画像や全てのスクリプトが読み込まれた後で処理をおこなうためには、また別の記述をしなくてはいけません（このページの最後で説明します）。
関連ページ
DOMContentLoadedイベントとloadイベントの違い[タイミング]
jQueryが開発されてきた経緯により、jQueryを実行するための記述には様々なパターンがあります（fnはfunction(){}の略）。
1. $(fn);
2. $().ready(fn);
3. $(document).ready(fn);
4. $(“selector”).ready(fn);
jQuery3.xのバージョンでは、1番シンプルな1番目の方法が推奨されています。
jQueryオブジェクトについて
$()はjQuery()関数の略です。jQuery()関数の引数として例えばElement（要素）オブジェクトやCSSセレクタを指定した場合には、jQueryオブジェクトを返します。そしてこのjQueryオブジェクトには様々なメソッドが用意されています。つまりjQueryでラップされたElementオブジェクト等の集合がjQueryオブジェクトであり、そのメソッドが利用できるようになるわけです。
関連ページ
getElementByIdについて[DOM][ノード][Element]
例えばreadyメソッドは、DOMが読み込まれた時点で発火します。DOMツリーが構築された時点でjQueryを実行するためには下記のように記述します。
|
1 2 3 |
$(document).ready(function(){ //処理 )}; |
document要素オブジェクトを引数に指定し、readyメソッドを実行しています。上述したようにDOMを読み込んだ時点で処理を行うようにしています。この記述は、先に説明したパターンの3番目の記述です。そしてこれを簡略化したのが1番目の記述です。
1番目の記述は、jQuery関数（$()関数）に引数として関数を渡しています。つまりjQuery関数の引数に関数を指定した場合は、DOMを読み込んだ時点でその関数が実行されます。
通常ウェブページの表示の流れとして、DOMツリーの構築が完了した後に、画像が読み込まれていきます。このように全ての読み込みが完了した時点で処理を行うためには、WindowオブジェクトをjQuery関数の引数に指定し、下記のように記述します。JavaScriptでいうloadイベントを実行しています。
|
1 2 3 |
$(window).on('load', function(){ //処理 }); |
下記のloadメソッドによる記述方法は、3.xではもう完全に利用できないので注意して下さい。
|
1 2 3 |
$(window).load(function(){ //処理 } |
参照ページ
jQuery Core 3.0 Upgrade Guide
Deprecated: document-ready handlers other than jQuery(function)
