【Javascript】jQueryの魔法

jQueryの特徴

jQueryは、最近急速に人気を増してきているJavaScriptライブラリです。 短いコードで多くの処理を安全で簡単に実行できる優れたライブラリのひとつです。

jQueryは、きわめて簡潔な表現で多彩な機能を実現することに成功しています。 もし、DIVで"testClass"というクラス名のついた要素だけを選んで、文字色を赤にしようとしたら、 一般的なJavaScriptでは、いろいろな書き方はありますが、たとえば、次のような書き方になります。

<div class="testClass">DIVでtestClassです</div>
<div class="testClass">DIVでtestClassです</div>
<div class="testClass">DIVでtestClassです</div>
<div class="noTestClass">DIVでnoTestClassです</div>
<p class="testClass">PでtestClassです</p>
<script type="text/javascript">
   var divs= document.getElementsByTagName("DIV");   for(var i=0;i<divs.length;i++){     if((         divs[i].getAttribute("className")||         divs[i].getAttribute("class")       )=="testClass"){       divs[i].style.color="red";     }   } 
</script>

→サンプル

まず、DIVタグを検索し、それを順番にforで回しながら、クラス名(class、IEならclassName)が"testClass"である要素を判定してから「style.color="red"」を 適用しています。

これをjQueryで書くとこうなります。

<script src="./jquery.js" type="text/javascript">
<div class="testClass">DIVでtestClassです</div>
<div class="testClass">DIVでtestClassです</div>
<div class="testClass">DIVでtestClassです</div>
<div class="noTestClass">DIVでnoTestClassです</div>
<p class="testClass">PでtestClassです</p>
<script type="text/javascript">

  $("DIV.testClass").css("color","red");

</script>

→サンプル

前者ではブラウザ分岐まで含めて何行程もあった処理が、わずか1行で済んでしまっています。これが、jQueryです。

$("DIV.testClass")は、おなじみのCSSセレクタ文字列を利用したDOM要素検索(注1)になっています。

そのメソッド.css("color","red")の引数もCSSの書き方を知っている方ならほぼ、直感的に記述できる書き方が採用されています。 (注1 : ただし、後述しますが、戻り値はDOM要素ではなくjQueryオブジェクトですので$("DIV.testClass").innerHTMLの ような使い方はしません。)

もちろん、これだけならCSSで書けば済むわけですが、jQueryの魔法は、ここからです。

魔法のメソッドチェーン

jQueryは、JavaScriptですから、CSSだけではできないいろいろなプログラム処理を行うことができます。 これらの検索したDOM要素の文字列にさらに処理を加える場合には、たとえば、次のようにします。

  $("DIV.testClass").css("color","red")
                    .html("DIVでtestClassを発見しました")
                    .animate({fontSize: "2em"},2000 );

→サンプル

これで、検索したDOM要素のコンテンツの 中身の

• 文字色を赤にして、
• HTMLを "DIVでtestClassを発見しました" に置き換えて、
• さらに、フォントサイズを 2秒 かけて "2em" まで拡大します。

そして、jQueryの面白いところは、たとえば、次のようにメソッドの順番を取り替えても動作することです。

  $("DIV.testClass").animate({fontSize: "2em"},2000 )
                    .css("color","red")
                    .html("DIVでtestClassを発見しました");

→サンプル

これは、それぞれのjQueryオブジェクトのメソッドの戻り値の多くがjQueryオブジェクトになっているからです。 つまり、使いたいメソッドを「.」でつないでいくだけで、まるでレゴを組み立てるようにプログラムが書きあがるというわけです。

これは、メソッドチェーンと呼ばれている仕組みです。

これにより、検索済みの要素に対するさまざまなメソッド処理を行うたびに、その頭に divs.メソッド名1();divs.メソッド名2(); ... などと繰り返し記述する必要もなくなり、 きわめて短いコードで、多くの処理を簡潔に記述できるようになります。

次はjQueryの入手と設置方法です。