第5回 コア編：連載：jQuery逆引きリファレンス（2/13 ページ）

[山田祥寛（http://www.wings.msn.to/），著]

連載目次

　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>

リスト079 id="news"である<ul>要素配下の<li>要素をフェードアウト（JquerySelector.html）
このHTMLを実際にブラウザで開く

ブラウザで開く

3秒かけて消えていく

リスト079の実行結果
$()関数で取得した<li>要素だけをフェードアウト

　もっとも、この例では引数contextを利用するよりも、セレクタ式ですべてを記述した方がコードはシンプルです。具体的には、リスト079の太字部分は、以下のようなコードで置き換えが可能です。

$('li', document.getElementById('news')).

　　　

$('#news li').

　引数contextを利用するのは、（現在の文書でない）ほかのドキュメント・ツリーから要素を絞り込みたいようなケースでの利用にとどめ*、まずはセレクタ式での記述を検討すべきでしょう。

* この具体的な例については、後日、Ajax編で紹介の予定です。