特集：ASP.NET＋jQuery ASP.NETプログラマーのためのjQuery入門 山田 祥寛（http://www.wings.msn.to/） 2009/02/27
Page1 Page2 Page3 Page4 Page5

jQuery 基本のキ

　VS 2008環境でjQueryを利用する準備が整ったところで、ここからは具体的にjQueryを使ったプログラミングを見ていくことにしよう。

　最初に、次のスクリプトとその実行結果をご覧いただきたい。これは、「id属性が“list”である要素配下から、class属性が“new”である<img>要素を取り出し、そのサイズを4000ミリ秒かけて変化させる」コードである。

<ul id="list">   <li><img src="http://www.wings.msn.to/books/978-4-8399-2438-6/978-4-8399-2438-6_logo.jpg" alt="ASP.NET AJAXプログラミング" class="new" /></li>   <li><img src="http://www.wings.msn.to/books/4-7980-1363-3/4-7980-1363-3_logo.jpg" alt="Pocket詳解ASP.NET辞典" class="new" /></li>   <li><img src="http://www.wings.msn.to/books/978-4-7980-1616-0/978-4-7980-1616-0_logo.jpg" alt="今日からつかえるASP.NET 2.0サンプル集" /></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>   <li><img src="http://www.wings.msn.to/books/978-4-7981-1427-9/978-4-7981-1427-9_logo.jpg" alt="Visual Studio 2005でいってみよう〜ASP.NET 2.0編" /></li> </ul> <script src="jquery.js" type="text/javascript"></script> <script type="text/javascript">   $('#list img.new').animate({width:120, height:50}, 4000); </script>

リスト1 id属性が「list」である要素配下からclass属性が"new"である<img>要素を取り出し、そのサイズを4000ミリ秒かけて変化させるためのJavaScript（basic.aspx）

　実行結果は次のようになる（実際には画像が徐々に大きくなる）。

4秒後

図4 条件に合致した画像だけを120×50のサイズに拡大する

　ある要素配下から特定の要素を取り出し、それをアニメーションさせる、といった処理を、jQueryではわずか1行で書けてしまうのだ。

$('#list img.new').animate({width:120, height:50}, 4000);

　ここでポイントとなるのは太字の部分――「$()」関数だ。この$()関数は、文書内の要素を検索／取得するための関数で、jQueryが提供する最も基本的で、かつ特徴的な機能でもある。

　jQueryプログラミングのほとんどは、この$()関数の呼び出しから始まるといってもよく、そうした意味で、$()関数を理解することはjQueryを理解することであるといっても過言ではない。$()関数のポイントは、大きく次の2点だ。

（1）条件をCSSセレクタで記述できる

　jQueryでは、目的の要素を特定するための条件式をCSSセレクタで指定できる。CSSセレクタとは、CSS（Cascading StyleSheet）でスタイルを適用する対象を表すための記法のこと。これは、CSSに慣れたWeb開発者であれば、ごく親しみやすい記法であるはずだ。また、要素特定の表現力にも優れているため、複雑な条件であってもごくシンプルなコードで目的の要素を特定することが可能だ。

　以下に、$()関数で利用できるセレクタ構文の中でも、特に重要と思われるものをまとめておく。

セレクタ 概要 記述例 記述例の意味 * すべての要素 $('*') すべての要素 element 対応するすべての要素elementを取得 $('strong') すべての<strong>要素 #id 指定したid値を持つ要素を取得 $('#cal') id="cal"である要素 .class 指定したクラス名classを持つ要素を取得 $('.menu') class="menu"である要素 element.class 指定したクラス名classを持つ要素elementを取得 $('ul.menu') class="menu"である<ul>要素 ancestor descendant 要素ancestor配下のすべての子孫要素descendantを取得 $('table#cal input') id="cal"である<table>要素配下のすべての<input>要素 parent > child 要素parent直下の子要素childを取得 $('#result > p') id="result"である要素直下の<p>要素 [attr=value] 属性attrの値がvalueである要素を取得 $('a[href="Default.aspx"]') href属性の値がDefault.aspxである<a>要素

表2 $()関数で利用可能なセレクタ構文

　ただし、ここで挙げたセレクタ構文も、全体からすればごく一部にすぎない。詳細については、jQuery本家サイトに用意されているドキュメントも併せて参照することをお勧めしたい。

（2）複数の要素すべてに対して処理を適用する

　セレクタの条件によっては、$()関数は単一の要素を抽出するとは限らない。例えば、リスト1の例を見ても、条件に合致する<img>要素は複数存在する。しかし、jQueryは、

取り出された要素すべてに対して、後続の処理を適用

してくれる。つまり、アプリケーション開発者は、取り出された要素が単一／複数いずれであるかを意識する必要もないし、複数要素を処理するために、いちいち繰り返し処理を記述する必要もないというわけだ。

　ちなみに、リスト1では$()関数で取得した要素に対して、アニメーション効果を適用するためにanimateメソッドを呼び出しているが、その構文は次のとおりだ。

animate(prop, speed)   prop：最終的な要素の状態（「スタイル名：値」のハッシュ形式）   speed：アニメーションにかける時間（ミリ秒）

animateメソッドの構文

　リスト1では、4000ミリ秒後に、画像（<img>タグ）が120×50の大きさになるように指定しているが、もちろん、引数propを変更することで背景色や枠線の色を変更したり、（テキストであれば）フォントやテキスト色／サイズを変更したり、といった効果を実現することも簡単だ。設定値や処理対象の要素を変えて、いろいろ試してほしい。

［参考］$()関数とjQueryオブジェクト 　$()関数の戻り値は、jQuery独自で提供されている「jQueryオブジェクト」である。時として、標準的なDOM（Document Object Model）のElementオブジェクトや、その集合であるNodeListオブジェクトのように見えることもあるが、あくまでこれらとは別物であるので注意すること。 　例えば、jQueryオブジェクトからinnerHTMLプロパティやappendChildメソッドのようなDOM標準のメンバを呼び出したくなることがあるかもしれないが、これは不可である（例えば、要素を追加したいならば、appendChildメソッドの代わりに、jQueryオブジェクト専用のappendメソッドを呼び出す必要がある）。 　jQueryオブジェクトでは、標準的なDOM操作を（多くの場合は、より高度に）サポートしている。jQueryで利用可能なメソッドについては、本家サイトのドキュメントも併せて参照いただきたい。

■標準的なDOMとの比較

　リスト1の例を見るだけでも、jQueryが「Write Less, Do More」であるといわれるゆえんは感じていただけたのではないかと思う。しかし、実際、どれだけ便利になったのか、実感がわきにくいという読者もいるだろう。

　そこで、ここでちょっと脇道にそれて、リスト1の内容（太字部分のみ）を標準的なDOMで書き換えてみよう。

var list = document.getElementById('list'); var imgs = list.getElementsByTagName('img'); for (var i = 0; i < imgs.length; i++) {   var img = imgs.item(i);   if (img.className == 'new') {     $(img).animate({ width: 120, height: 50 }, 4000);   } }

リスト2 リスト1を標準的なDOMで書き換えたコード（BasicDom.aspx）

　サイズ変更（animateメソッドによるアニメーション処理）の部分だけはjQueryの機能を拝借したが、それでもたった1行で書けていたコードが8行にまで膨らんでしまった。標準的なDOMを利用する場合、

1. document.getElementByIdメソッドでidが「list」の要素を取得
2. その配下から<img>タグ（複数個の可能性あり）を取得
3. さらに、そのclass属性を確認し、値が「new」であるものだけを処理

という手順を順に記述しなければならないからだ（わずかに目的の要素を取り出すだけでも、これだけコードが膨らんでしまうわけだから、アニメーション処理までを一からコーディングすれば、どれだけコード量が増加するかは推して知るべしだろう）。

　この一事だけを見ても、いかにjQuery（の$()関数）が便利であるかを実感できるだろう。

■補足：$()関数のさまざまな構文

　リスト2の以下の部分に注目してほしい。

$(img).animate({ width: 120, height: 50 }, 4000);

　$()関数の役割は、セレクタ構文で特定の要素を抽出するばかりではない。このコードのように、標準的なDOM ElementオブジェクトをjQueryオブジェクトに変換するような用途でも利用できる。

　当然ではあるが、animateメソッドはjQueryオブジェクトのメンバとして提供されているメソッドであるため、DOM Elementオブジェクトから直接的に、

img.animate({ width: 120, height: 50 }, 4000); // 誤り

のように、animateメソッドを呼び出すことはできないので、注意されたい。

　また、$()関数を利用することで、HTML文字列から新しいjQueryオブジェクトを生成することもできる。

$('<img src="http://www.wings.msn.to/image/wings.jpg" />').prependTo('body');

　このコードでは、$()関数で新たな<img>要素を作成したうえで、これをprependToメソッドで指定された要素（ここでは<body>要素）配下の先頭要素として追加しているわけだ。

　繰り返しになるが、$()関数はjQueryのキモともいえる関数である。本稿で基本を理解したら、公式ドキュメントも熟読して、確実に使いこなせるようにしておきたい。

INDEX
	ASP.NET＋jQuery
	ASP.NETプログラマーのためのjQuery入門
	1．Visual Studio 2008でjQueryを利用するための準備
	2．jQuery 基本のキ／標準的なDOMとの比較／補足：$()関数のさまざまな構文
	3．メソッド・チェーン
	4．jQueryにおけるイベント処理
	5．jQueryベースのライブラリ「jQuery UI」を活用しよう

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）