エレメントへのアクセス
jQueryでは「$()」を使ってページ内のエレメント(HTMLタグ)にアクセスします。$()の中にはCSSと同じセレクタを指定します。たとえばページ内にあるID名が「ascii」のエレメントを指定するには以下のようにします。
【HTML】
<div id="ascii">ASCII.jp</div>
【jQueryでの指定】
$("#ascii")
CSSでも特定のID名を持つエレメントを指定する場合に「#」を使いますが、まったく同じです。複数のID名をまとめて指定する場合には、「$("#ascii,#mworks")」のように「,」で区切ります。これもCSSの指定と同じです。
同様に、特定のスタイルシートクラス名を持つエレメントの場合は以下のようにします。
【HTML】
<div class="ascii">ASCII.jp</div>
【jQueryでの指定】
$(".ascii")
これもCSSでのクラス指定と同じです。他にもCSSと同じような指定ができますので、jQueryのドキュメントなどをチェックしておきましょう。
ここで指定された複数のエレメントが、プラグインに1つずつ渡されることになります。プラグイン側では、渡されたエレメントごとに個別に処理をすることになります。
メソッドチェーン
jQueryではメソッドを実行した際に返されるデータ形式が「jQueryオブジェクト」になっています。これにより、メソッドチェーンとして連続して命令を実行できます。たとえば、エレメントの内容を「アスキー」に書き換え、文字の色を赤色にするには以下のように書くことができます。
$("#ascii").html("アスキー").css("color","red");
このように連続して書いていけるので、不要な変数もなく、「あれして、これして……」という感覚で指定できるのです。
メソッドチェーンを実現するにはメソッドの戻り値をjQueryオブジェクトにしておく必要があります。つまり、処理したエレメントをまるごと返すことでメソッドチェーンを実現できます。もし、プラグイン側でjQueryオブジェクトを返さなかった場合には、そのメソッド以降では正しくメソッドが機能しなくなります。
今日は、プラグインを作成する前のウォーミングアップとして、jQueryの特徴的なところをざっと紹介しました。明日からは実際にプラグインを作成していきます。どうぞお楽しみに。
■もっと勉強したい人のためのオススメBOOK(Amazon.co.jp)