jQuery API の ready( fn ) は、DOMの準備ができた時点でイベントハンドラを実行したいときに便利なメソッドだ。
DOMを全て読み込み、DOMの準備ができた時点で、ready( fn ) の引数に指定したイベントハンドラを実行することができる。
記述方法
jQuery( document ) . ready( イベンドハンドラ );
レディーイベントに、「イベンドハンドラ」をバインド。
実装例（サンプル）
実装例（サンプル）について
本来は、300px × 198px の画像だが、152px × 100px で表示している。
実装例（サンプル）のソースコード
JavaScript
<script>
<!--
jQuery( document ) . ready( function() {
if( jQuery( 'img.jquery-api-ready' ) . height() > 100 ) {
jQuery( 'img.jquery-api-ready' ) . addClass( 'jquery-api-ready-addClass' );
}
} );
// -->
</script>
<!--
jQuery( document ) . ready( function() {
if( jQuery( 'img.jquery-api-ready' ) . height() > 100 ) {
jQuery( 'img.jquery-api-ready' ) . addClass( 'jquery-api-ready-addClass' );
}
} );
// -->
</script>
CSS
<style>
<!--
.jquery-api-ready {
border: 1px solid gray;
}
.jquery-api-ready-addClass {
height: 100px !important;
}
-->
</style>
<!--
.jquery-api-ready {
border: 1px solid gray;
}
.jquery-api-ready-addClass {
height: 100px !important;
}
-->
</style>
HTML
<img src="1.jpg" class="jquery-api-ready" />
<img src="2.jpg" class="jquery-api-ready" />
<img src="3.jpg" class="jquery-api-ready" />
<img src="2.jpg" class="jquery-api-ready" />
<img src="3.jpg" class="jquery-api-ready" />
省略形
jQuery( document ) . ready( function() {
は、下記のように書いても同じ。
jQuery() . ready( function() {
jQuery( function() {