jQueryの最大の特徴は、$()関数とセレクタ式の組み合わせで文書を検索し、特定の要素セットを取り出すことができる点にあります。セレクタ式を利用することで、複雑な条件も、ごく直感的な式で記述することができます。
また、$()関数の戻り値であるjQueryオブジェクトによって、jQueryのさまざまな機能を呼び出せるという点からも、jQueryプログラミングの基点であるといってもよいでしょう。
$()関数の記述例については、これまでにもたくさん見てきました。特にセレクタ式のさまざまなパターンについては、セレクタ編を参照いただくとして、ここでは$()関数のもう1つの構文を見ておくことにしましょう。
これまでは主に、文書全体から要素を検索してきましたが、$()関数では、第2引数contextにjQueryオブジェクトやDOM Elementオブジェクトを渡すことで、特定のドキュメント・ツリーの配下から要素を検索することもできます。
具体的な例を見てみましょう。以下は、id="news"である<ul>要素の配下から<li>要素を取得し、これをフェードアウトするサンプルです。
<script type="text/javascript">
$(function() {
// id="news"である要素配下から<li>要素を取得
$('li', document.getElementById('news')).
fadeOut(3000);
});
</script>
……中略……
<ul id="news">
<li><img src="http://www.wings.msn.to/books/978-4-7980-2401-1/978-4-7980-2401-1_logo.jpg" alt="ASP.NET MVC実践プログラミング" /></li>
<li><img src="http://www.wings.msn.to/books/978-4-7981-1957-1/978-4-7981-1957-1_logo.jpg" alt="10日でおぼえるASP.NET入門教室" /></li>
<li><img src="http://www.wings.msn.to/books/978-4-8399-2708-0/978-4-8399-2708-0_logo.jpg" alt="JavaScriptマスターブック" /></li>
</ul>
<ul id="best">
<li><img src="http://www.wings.msn.to/books/4-7981-1257-2/4-7981-1257-2_logo.jpg" alt="独習ASP.NET2.0" /></li>
<li><img src="http://www.wings.msn.to/books/978-4-7981-1363-0/978-4-7981-1363-0_logo.jpg" alt="10日でおぼえるSQLServer 2005入門教室" /></li>
<li><img src="http://www.wings.msn.to/books/4-7980-1363-3/4-7980-1363-3_logo.jpg" alt="Pocket詳解ASP.NET辞典" /></li>
</ul>
もっとも、この例では引数contextを利用するよりも、セレクタ式ですべてを記述した方がコードはシンプルです。具体的には、リスト079の太字部分は、以下のようなコードで置き換えが可能です。
$('li', document.getElementById('news')).
$('#news li').
引数contextを利用するのは、(現在の文書でない)ほかのドキュメント・ツリーから要素を絞り込みたいようなケースでの利用にとどめ*、まずはセレクタ式での記述を検討すべきでしょう。
* この具体的な例については、後日、Ajax編で紹介の予定です。
Copyright© Digital Advantage Corp. All Rights Reserved.