jQueryの実行タイミングの操作

更新日:2015年8月23日

jQueryでプログラムを書いたものの、何故かうまいこと動かないってことありませんか?
通常jQueryのソースは<head>タグ内に記述するのが一般的ですが、それでは動かないことがあります。しかし<head>タグ内ではなく、<body>タグ内に記述すれば何故だかうまいこと動き出すということがあります。何故でしょう?

それはjQueryの実行タイミングが原因です。
HTMLファイルは上から順番に読み込まれる為、<head>タグ内ではHTMLより先にjQueryが読み込まれてしまうので動かないのです。

ではその解決方法ですが、jQueryで

$(function() {
	//実行する内容
});

と記述すればOKです。
これはHTMLを読み込んだ後に実行するという記述です。

それでも動かないよって場合は

$(window).load(function() {
	//実行する内容
});

と記述すれば動くでしょう。
これは全て読み込んだ後に実行するという記述です。

HTMLを読み込んだ後に実行したいことがほとんどだと思いますので、jQueryを書く際にはこれらは決まり事だと考えて、常に記述する習慣をつけた方がいいです。