jQueryのコードを記述するときの基本。
要点
- script要素内に記述する。
- ready( fn )やjQuery( callback )などを使い、DOMの準備ができた時点で実行させる様に記述することが多い。これにより、jQueryのコードの記述場所より後に、処理したいDOM要素があっても処理できる。
構文
jQuery( callback )
jQuery( callback )を使う方法。
<script>
jQuery( function() {
// ここに、DOMの準備ができた時点で実行させる処理を記述
} );
</script>
jQuery( function() {
// ここに、DOMの準備ができた時点で実行させる処理を記述
} );
</script>
もしくは、「jQuery」の部分を、「jQuery」のエイリアス（別名）である「$」に置き換え、
<script>
$( function() {
// ここに、DOMの準備ができた時点で実行させる処理を記述
} );
</script>
$( function() {
// ここに、DOMの準備ができた時点で実行させる処理を記述
} );
</script>
とすることもできる。この書き方が一般的だ。
上記は無名関数を使う方法だが、命名したユーザー定義関数を呼び出すこともできる。
<script>
jQuery( sampleFn );
function sampleFn() {
// ここに、DOMの準備ができた時点で実行させる処理を記述
}
</script>
jQuery( sampleFn );
function sampleFn() {
// ここに、DOMの準備ができた時点で実行させる処理を記述
}
</script>
<script>
$( sampleFn );
function sampleFn() {
// ここに、DOMの準備ができた時点で実行させる処理を記述
}
</script>
$( sampleFn );
function sampleFn() {
// ここに、DOMの準備ができた時点で実行させる処理を記述
}
</script>
ready( fn )
ready( fn )を使う方法。
<script>
jQuery( document ) . ready( function() {
// ここに、DOMの準備ができた時点で実行させる処理を記述
} );
</script>
jQuery( document ) . ready( function() {
// ここに、DOMの準備ができた時点で実行させる処理を記述
} );
</script>
もしくは、「jQuery」の部分を、「jQuery」のエイリアス（別名）である「$」に置き換え、
<script>
$( document ) . ready( function() {
// ここに、DOMの準備ができた時点で実行させる処理を記述
} );
</script>
$( document ) . ready( function() {
// ここに、DOMの準備ができた時点で実行させる処理を記述
} );
</script>
とすることもできる。
上記は無名関数を使う方法だが、命名したユーザー定義関数を呼び出すこともできる。
<script>
jQuery( document ) . ready( sampleFn );
function sampleFn() {
// ここに、DOMの準備ができた時点で実行させる処理を記述
}
</script>
jQuery( document ) . ready( sampleFn );
function sampleFn() {
// ここに、DOMの準備ができた時点で実行させる処理を記述
}
</script>
<script>
$( document ) . ready( sampleFn );
function sampleFn() {
// ここに、DOMの準備ができた時点で実行させる処理を記述
}
</script>
$( document ) . ready( sampleFn );
function sampleFn() {
// ここに、DOMの準備ができた時点で実行させる処理を記述
}
</script>