jQueryは非常にコンパクトで多機能なJavaScript/Ajaxライブラリです。サイズは16KB弱と非常にコンパクト。サイズが小さいだけでなく記述方法も短くすむのも利点の１つです。prototype.jsや他のライブラリでは繰り返し処理をしてイベントを設定したりするのですがjQueryは、その繰り返し処理を記述する必要が、ほとんどないため非常にコンパクトにスクリプトを記述することができるわけです。また、prototype.js同様に$()でオブジェクトにアクセスすることができます（$()によるアクセスはAdobe Spryでもサポートされています）。
まず、簡単なところでページが読み込まれたらアラートダイアログを表示させてみましょう。通常はwindow.onload = function() { alert(〜); }のように記述しますが、jQueryではonloadイベントではなくreadyイベントを指定します。適用するオブジェクトはwindowオブジェクトでもdocumentオブジェクトでも同様に動作します。ready()のパラメータには実行する関数名を指定します。以下のサンプルでは匿名関数／無名関数を使っています。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>サンプル</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript"><!--
$(document).ready(function(){
alert("読み込み完了");
});
// --></script>
</head>
<body>
<h1>jQuery : サンプル</h1>
</body>
</html>
イベントを設定できるのはwindowオブジェクトやdocumentオブジェクトだけではありません。ページ上のタグにも設定することができます。次にaタグにonClickイベントを追加してリンク文字がクリックされたらアラートダイアログを表示させてみます。タグを指定する場合も$(a)のようにパラメータにタグ名を記述します。他のライブラリでは全てのaタグを参照してイベントを設定していくのが普通ですが、jQueryの場合は$(a).イベント名(処理)だけでページ上にある全てのaタグにイベントを設定してくれます。このため、繰り返し処理を記述する必要がありません。もちろん、全てのaタグにイベントが設定されると困る場合もあるので、クラス名などを指定して特定の条件を満たす場合のみイベントを追加する記述方法もあります。以下のサンプルではリンクがクリックされるとClickという文字がアラートダイアログに表示されます。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>サンプル</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript"><!--
$(document).ready(function(){
$("a").click(function(){
alert("Click");
});
});
// --></script>
</head>
<body>
<h1>jQuery : サンプル</h1>
<a href="http://www.openspc2.org/">OpenSpace</a><br>
<a href="http://www.google.co.jp/">Google</a><br>
<a href="http://www.yahoo.co.jp/">Yahoo</a><br>
</body>
</html>
次に多く見られるリンク文字の上にマウスカーソルが乗ったら背景色を変化させてみます。jQueryではhoverイベントが該当します。hover()のパラメータは２つあり、最初がマウスが重なった時に呼び出される関数、二番目がマウスが離れた時に呼び出される関数になります。以下のサンプルのように匿名関数／無名関数を使って指定することもできます。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>サンプル</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript"><!--
$(document).ready(function(){
$("a").hover(function(){
this.style.backgroundColor = "orange";
},
function(){
this.style.backgroundColor = "white";
}
);
});
// --></script>
</head>
<body>
<h1>jQuery : サンプル</h1>
<a href="http://www.openspc2.org/">OpenSpace</a><br>
<a href="http://www.google.co.jp/">Google</a><br>
<a href="http://www.yahoo.co.jp/">Yahoo</a><br>
</body>
</html>
[
目次へ]
(2006.8.1)