jQueryは、短いコードでクロスブラウザ対応のスクリプトを記述できるJavaScriptのライブラリです。

jQueryのほとんどの機能はHTMLに対して処理するので、DOMがロードされて操作・解析が可能になったタイミングまで待ってから、スクリプトを実行させる必要があります。そのためには、ready()を使用します。省略も含めた記述方法を次に示します。

jQueryを$で書き換えた場合の記述方法

　■「jQuery」で記述した場合

jQuery(document).ready(function(){
    // 実行する処理
});

　■「$」で記述した場合

$(document).ready(function(){
    // 実行する処理
});

ready()を省略した場合の記述方法

　■readyを使用した場合

$(document).ready(function(){
    // 実行する処理
});

　■readyを省略した場合

(document).readyを省略できるので、ソースも短く楽に書くことができます。

$(function(){
    // 実行する処理
});

殆どの場合、readyイベントに設定するfunctionは無名関数を利用して直接設定します。これはfunctionが多いと混乱するためです。無名関数とはfunction名を指定しないfunctionを指します。

セレクタとjQueryオブジェクト

セレクタはcssの仕組みですが、構文「jQuery( )」、省略する場合は「$( )」のカッコ内で利用できます。また、$(セレクタ)をjQueryオブジェクトと呼びます。

$(function () {
    $("img").hide();
});

これで、セレクタ「”img”」のjQueryオブジェクト「 $(“img”)」が作成され、img要素をjQueryで操作できるようになります。「.hide()」は、メソッドを示します。オブジェクトとメソッド間は、ドットを挟んで記述し、後に( )が必要となります。
「readyイベント」と同じように見えますが、（）内にfunctionではなくセレクタを設定する点が異なります。
セレクタは、ページ内に１つしかない場合では、負荷の軽減のために、class属性よりもid属性を利用します。id属性の場合は、最初の1つを見つけたら以降のチェックはしないため負荷が軽いのです

メソッドチェーン

変数が多くなると管理しにくくなるので、2,3回だけの利用のために変数を用意するのも、負荷を軽減させる観点から良くありません。

そこで利用するのがメソッドチェーンです。これは以下の様に1つのjQueryオブジェクトに連続して、メソッドが利用できる構文です。連結できる数に上限はありません。

$(“セレクタ”).メソッド().メソッド().メソッド().…

※メソッドとメソッドの間のドットを忘れないようにします。

ただし、メソッドなら全て連結できるという分けではありません。返値でjQueryオブジェクトを返すメソッドの後にのみメソッドを連結できます。

今回は、セレクタにdocumentを設定し、htmlファイルの読み込みが完了したとき、実行するreadyイベントについて説明しました。

＜参考＞clickイベント

jQueryでは、他にもクリックなどによるイベントがあります。readyイベントと比較できるように省略構文は利用していません。クリックのイベントは、以下の様にclickイベントを利用します。 

jQuery(document).ready(function () {
    jQuery("div").click(function () {
        $("div").text("CLICK !");
    });
});

メソッドの構文と似ていますが、イベントに続く（）内にはfunctionを設定し、このfunctionに、イベントが発生したときに、実行したい処理を書きます。ここでは、divにtext(val)メソッドを利用してdivに文字を表示します。

次に示す省略構文は、単純にjQueryを$に置き換えるだけです。ただし、readyイベントのような省略はできません。 

$(function () {
    $("div").click(function () {
        $("div").text("CLICK !");
    });
});
  • headタグに囲まれていると、一行目に示す「function 」により「click」を囲まないと、clickイベントの処理が行われません。bodyタグに囲まれていると、一行目に示す「function 」は必要ありません。
  • 「script」タグとして、「function 」による定義が複数あっても、それぞれ、一回だけ、DOMがロードされて操作・解析が可能になったタイミングまで待ってから、スクリプトを実行します。各イベント処理の定義はこのタイミングで記憶され、再度「function 」による定義は読みません。