jQuery Intro

2012.03.02

Seanです。

今回は、実際にjQueryの中身について書いていきます!
jQueryを書くときに必須と言ってもよい一文があります。
それは、

$(document).ready(function() {
//処理内容
});

これを省略して書くこともでき、

$(function() {
//処理内容
});

これは、ページ読み込み時にfunction内に記入した処理を実行する、ということです。
この一文があって初めて、ページのスライドショーもナビゲーションのアコーディオンもページ読み込み後すぐに動いてくれるというわけですね。

ちなみに、jQueryを使わずjavascriptで記入すると、

window.onload = function() {
//処理内容
}

となります。
では、実際にjQueryのreadyメソッドとjavascriptのonloadは全く同じ役割を果たすかというと必ずしもそうではありません。
jQueryのreadyメソッドではDOMツリー構築完了時点で処理が実行されるのに対し、javascriptのonloadはDOMツリー構築プラス画像等のすべてが読み込まれた後に、処理が実行されます。
なので、例えば、要素をページ読み込み完了後に非表示にするような記述をした場合、jQueryのreadyではしっかりと非表示になっても、javascriptのonloadでは画像の読み込み等まで完了してから実行されるため、非表示になるはずの要素が一瞬表示されてしまう、ということが発生したりします。

jQueryは便利ですね。Thank you and love you, jQuery.

jshcl

一覧へ