jQueryは、その中でも、突出した人気を誇るライブラリです。今回はそのjQuery基本的な部分から書いてみます。
jQueryとは
jQueryは、FierfoxのJavaScriptエバンジェリストを務めていたJohn Resig が2006年1月に発表した軽量なjavaScriptライブラリです。jQueryは、そのキャッチフレーズ「write less, do more」の通り「少ないコードで、より多くのことを実行」できる優れたライブラリです。まず第一にその特徴は、軽量であること。現在（2010/4）のバージョン1.4.2でMinifiedとGzip圧縮されたサイズはわずか24KBとなります。
そして、もちろんブラウザに依存しないクロスブラウザな動作をしてくれます。このおかげで、無数のブラウザ依存コードへの対処に悩まされる苦労が激減します。
さらに、この軽量なjQuery本体の他に、jQueryの機能を更に拡張してくれる豊富な「プラグイン」と、「jQuery UI」の存在も魅力です。「プラグイン」は、自作できる拡張メソッドであり、世界中の多くの開発者によって作成されています。
「jQuery UI」は、公式な拡張ライブラリですが、多彩なビジュアルエフェクトやドラッグドロップ処理からアコーディオン、タブ、スライダー、日付ピッカー、カラーピッカー、ダイアログといった完成度の高いウィジェットなどが含まれています（参考：jQuery UI デモ）。
jQueryでできること
jQueryの、その小さなサイズの中には、実は簡単なエフェクトなどまでも含まれていて、フェイドインの処理も.fadeIn()という一つのメソッドで実行できるなど、簡単に高度な処理を実装できるようになります。たとえば、
$("#mydiv").fadeIn()
と書けば、これだけで、id名がmydivという名前の要素がフェイドインします。簡単ですね。
またjQueryがHTMLを操作するときに便利なのは、DOM要素の選択方法として、CSSのセレクタを使用したシンプルな方法が提供されていることです。
たとえば、id名が「my」という要素内の背景色を赤くしたい時、標準のDOMメソッドを利用する場合は、普通のJavaScriptではこう記述します。
document.getElementById("my").style.backgroundColor="red"
背景色を表す background-color が backgroundColor になっていますね。これはJavaScriptの書き方です。
これをjQueryなら、CSSを操作するために、CSSの仕様通りの名前を使い、次のように書くことができます。
[1] CSS風1
$("#my").css("background-color","red")
[2] CSS風2
$("#my").css( { "background-color":"red"} )
[3] JavaScript風
$("#my").css( { backgroundColor:"red"} )
いずれも、jQueryとして動作します。どうですか? CSSの書き方「background-color」が使えています。JavaScriptのCSSプロパティを知らなくても、CSSさえ知っていれば、jQueryを使うことができるのです。
ちなみに、この構文はいずれも、「$("#my")」の部分で、id名が「my」である要素を検索し、その要素へ、.cssメソッド内のCSS設定を適用するという意味です。
また、jQueryの大きな魅力のひとつは「メソッドチェーン」と呼ばれる、その記述方法にあります。たとえば、次のように書くと、id名が「test」の要素の背景色をredにして、「こんにちは」と書き出し、フェイドインします。
$("#test")
.css("background-color","red")
.html("こんにちは")
.fadeIn()
$("#my")の後ろへ .css() 以下「.」でメソッドを次々と接続することで、その命令を実行します。 文字通り、メソッド(命令)をつなぐ「メソッドチェーン」というわけです。
このように、メソッドを接続していくだけで、手軽にいろいろなことが実現できるのがjQueryの魅力です。
【関連ページ】
・jQueryのダウンロード
・jQueryの基本的な書き方
