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

» 2010年03月12日 00時00分 公開



「連載:jQuery逆引きリファレンス」のインデックス

連載目次


 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編で紹介の予定です。


Copyright© Digital Advantage Corp. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。