このページの本文へ

0日目:jQueryプラグイン作成の基礎知識 (2/2)

2008年12月29日 08時00分更新

文●古籏一浩

  • この記事をはてなブックマークに追加
本文印刷

エレメントへのアクセス

 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)

前へ 1 2 次へ

この連載の記事

一覧へ

この記事の編集者は以下の記事をオススメしています