処理のタイミングを決めるイベントについて

jQueryを使ったコードは、セレクターで特定の
HTML要素を指定して、CSSやHTMLを変更・追加・削除をします。
これまでは、HTMLファイルをブラウザで開いたときに処理が
実行されるものでした。

ですが、世に溢れているウェブサイトを眺めていると
こちらが何かをしたときに、何らかのアクションを
ブラウザが返すという物があります。

簡単に言うと、
何かをきっかけにして、HTML、CSSが変更されていることが
分かります。その何かが実行されるきっかけのことを
イベントといいます。

HTMLが読み込まれたタイミングで実行するready()

「処理が実行される」タイミングは、クリックや、マウスオーバーを
したときだけではないです。「ブラウザーが、Webページの読込みを完了した」と
いうのもイベントです。

今までのサンプルコードでも出てきています。

$(document).ready(function(){
//HTMLが読み込まれた実行する処理
});
こんな表記です。

$(function(){
//HTMLが読み込まれた実行する処理
});

と書いてあるのもあります。どちらも処理は一緒です。

ready()は「HTMLファイルの読み込みが完了」というイベントを
拾ってくる命令です。ready()の左側に、セレクター$(document)と
書いて、WEBページ全体(document)を対象にしています。

今まで、サンプルコードにお決まりように書いていたのには
意味があります。$(function(){...}は
「WEBページ全体の読み込みが完了し、準備が
できたら{...}の処理を実行する」という命令を
表しています。

ready(...)の括弧にはfunction(){...}と書き、その内側に
実行したい実際の処理を書きます。括弧内にfunction(){...}と
書くのは、イベントを感知して処理をするときの決まりです。

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

他のイベント処理でもready()は必要です！

ready()はイベントを感知する命令ですが、他のイベントを
感知したい場合にも、$(function(){...}の内側に処理の内容を記述します。

例を挙げると「img要素がクリックされたら処理を行う」という
スクリプトです。下記のclick()は「特定の要素がクリックされたら」と
いうイベントを感知する命令です。

<script>
$("img").click(function(){
    img要素がクリックされたときに実行したい処理を書く。
});
</script>

上記のscript要素をhead要素内に書いた場合、ブラウザは
ページの読み込みが終わっていません。なので、
img要素をブラウザがまだ認識できていません。そこで
下記のようにスクリプト全体を$(function(){...})の内側に
入れます。

<script>
$(function(){
    $("img").click(function(){
        img要素がクリックされたときに実行したい処理を書く。
    });
});
</script>

上記のようにすることで、ブラウザーはscript要素の記述場所に
関係なくimg要素を認識でき、処理はページの読み込みが完了した後に
実行されます。

$(function(){...})を使えば、img要素がクリックされたタイミングで
実行したい処理を指定できます。jQueryを使うときには、
$(function(){...})の内側に処理を記述することを忘れないように
しましょう。