jQueryでスクリプトを書くときにはほとんどの場合、まずhtmlが読み込まれたときに実行する命令であるready関数を記述し、その内側に命令を書いていきます。

命令には、その対象である「セレクター」と、何らかのきっかけとなる「イベント」があり、セレクターがイベントの発生を感知したタイミングで実行されます。

ほぼ全てこの形式になるのでjQueryの決まりごととして覚えましょう。

$(function() { //ready関数
	$(セレクター).イベント(function() {
		$(セレクター).命令;
	});
});

簡単に解説していきます。

1行目の$(function(){……})は、htmlが読み込まれたタイミングで実行されるready関数で、
$(document).ready(function(){……})の省略形です。

つまり、セレクターを$(document)としてWebページ全体（document）を対象にして、イベントはready（読み込みが終わったら実行しなさい）という命令です。

2行目の命令も同様の形式で、セレクターとイベントと命令を記述していきます。
例えば、「対象」が「クリック」されたときに「命令」を実行しなさい。という感じになります。
$(document).ready()とは違い、省略はできない形ですが形式は1行目と同じです。

3行目が実際の命令の内容になります。

ここで大切なのは、どんなイベント処理でもready関数は必須ということです。

ブラウザがスクリプトを読み込んだけれどページの読み込みがが完了していない場合に、命令の対象となる「セレクター」の存在を見つけられないからです。
そのため、スクリプト全体を$(function(){……})の内側に入れ、処理はページの読み込みが終わった後に実行するようにしましょう。