jQueryを使ってみよう　その1

jQuery

「AIR Developer's Night」で、業界は既に物凄い勢いで走り始めてしまっているという事実を体感しｶﾞｸﾌﾞﾙの僕ですが、最近はActionScriptではなくて、JavaScriptばかり書いてます。お蔭様で（←これちょい皮肉含む）ようやくjQueryの素晴らしさが分かってきました。ということで、jQueryネタでも綴ってみようと思います。今回はjQueryの基本となる、DOMツリーへの各オブジェクトへの参照についてです。

まずはjQueryの公式サイトからjQueryをダウンロードします。圧縮版と非圧縮版がありますが、今回はどちらでも構いません。テスト環境で使用する場合や、jQueryがどのように実装されているのか興味がある方は非圧縮版を、本番サイトでは軽量の圧縮版を使用するといいかもしれません。

ダウンロードしたjsファイルを任意のディレクトリに保存し、そのファイルを以下のような感じで外部参照します。

<script type="text/javascript" src="jquery.js"></script>

今回はテスト用に次のようなHTMLを準備し、jQueryでのDOMオブジェクトへのアクセスについて簡単な確認をしたいと思います。

<div>
	<p>段落A1</p>
	<p class="myClass">段落A2</p>
	<p>段落A3</p>
</div>
<div>
	<p>段落B1</p>
	<p id="myID">段落B2</p>
	<p class="myClass">段落B3</p>
</div>


1.　$('p') 【p要素をすべて取得】

[取得できる要素]

<p>段落A1</p>
<p class="myClass">段落A2</p>
<p>段落A3</p> 
<p>段落B1</p>
<p>段落B2</p>
<p class="myClass">段落B3</p>


2.　$('p.myClass') 【myClassというクラス名のp要素をすべて取得】

[取得できる要素]

<p class="myClass">段落A2</p> 
<p class="myClass">段落B3</p>

[コメント]
要素名を記述せずに$('.myClass')と書けば、myClassが割当てられている全ての要素を取得します。今回のテストでは、myClassクラスをもつのはすべてp要素なので実行結果は同じです。


3.　$('p#myID') 【myIDというID名のp要素を取得】

[取得できる要素]

<p id="myID">段落B2</p>

[コメント]
これはjavaScriptのdocument.getElementById('myID')と同じですね。IDはドキュメント内でユニークであるべきなので、$('#myID')としても同じです。また試しにmyIDを複数の要素に割当ててみても、取得できる要素はDOM内でmyIDをもった最初の要素のみのようです。


4. $('p:nth-child(2)') 【p要素をもつすべての要素内の2番目の子要素を取得】

[取得できる要素]

<p class="myClass">段落A2</p>
<p id="myID">段落B2</p>

[コメント]
これはちょっとトリッキーです。最初にこれを見たとき、僕は「p要素の中にある2番目の子要素を取得するんだな」と思いましたが、そうではありません。スコープ(?)は指定した要素の親要素となります。上記の例で言うと、p要素をもつ親要素 = 2つのdiv要素が、視点の始まりとなります。その各々のdiv要素内にある子要素の中から2番目のものを取得してね、と解釈すると良いかもしれません。またn番目のnは、配列の参照で用いる0から始まる指数とは異なり、1から始まります。因みに0を指定すると、その親オブジェクト内にあるすべての子要素を取得するようです*1。

3番目まではCSSで頻繁に使うセレクターの記述方法なので問題ないのですが、最後の例はCSS3のセレクターの記法なんだそうですよ。ふーん。

ということで、いつもながらに冗長な説明になってしまったので、続きはまたにします。と思ったけど、大切なことを忘れてました。取得した要素はそのままだと、alert()文等で出力しても[object Object]としか表示されません。僕はこちらのサイトで使用している、取得したjQueryオブジェクトの中身を表示させるカスタム関数を、勝手にテスト用に利用させていただいてます。また出力内容は、alert()文の代わりに、console.log()を使用し、Firebugのコンソールで確認するのも便利かと思います。

*1:思いっきり間違った理解でした。後で書き直します。ごめんなさい。