【短期集中連載】この冬作ろう！jQueryプラグイン講座
0日目：jQueryプラグイン作成の基礎知識
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）
この特集の記事
- 最終日：リンク先のサムネイルを自動的に表示しよう
- 4日目：写真の横にGoogleマップを表示しよう
- 3日目：単語に自動的にリンクを追加しよう
- 2日目：顔文字を顔画像に変換しよう
- 1日目：難しい漢字にふりがなをつけよう
- この特集の一覧へ
![Microsoft Windows7 Home Premium 64bit 日本語 DSP版 + メモリ [DVD-ROM]](http://ascii.jp/img/amazon_noimg70.gif "Microsoft Windows7 Home Premium 64bit 日本語 DSP版 + メモリ [DVD-ROM]")
