jQuery 最初の一歩

公開日: カテゴリー: JavaScript タグ:

普段JavaScriptを利用する際、概ねフレームワークにはprototype.jsを利用するのですが、ちょっと思い立ってjQueyも使ってみようと勉強してみた最初の第一歩ついて簡単にまとめておきます。

jQueryの特徴は操作対象となる要素などを一旦jQueryオブジェクトに格納し、そのオブジェクトに対して用意されたメソッドから操作するという設計思想になっているようです。

なのであるidの要素の中身を書き換える処理はもちろん、イベント制御にも $() または jQuery() を利用します。例えば以下のような感じです（サンプルなのでJavaScriptのコードをHTML内に埋め込んでます）。

<!DOCTYPE html PUBLIC "-//W4C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>jQuery サンプル</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$( function () {
    $("p").text("置き換え後のテキストです。");
});
</script>
</head>
<body>
<h1>jQuery サンプル</h1>
<p id="line01">このテキストは置き換わります。</p>
<p id="line02">このテキストも置き換わります。</p>
</body>
</html>

p要素を全て「置き換え後のテキストです。」に置き換えるサンプルですが、jQueryの特徴がよく表れています。

一つが繰り返しのための記述が(ほぼ)不要な点。$("p")でp要素全てを対象化でき、またtext()メソッドも対象にした全ての要素を一括で処理してくれています。

また、このサンプルではonLoadのタイミングですが、イベントの記述も $() を利用して記述できるので、jQueryを利用する際のルールが単純で理解が容易なのも魅力的です。

同じ処理をprototype.jsで記述すると以下のようになります。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>prototype.jp サンプル</title>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">
Event.observe( window, 'load', function () {
    $$("p").each( function (line) {
        line.innerHTML = "置き換え後のテキストです。";
    });
});
</script>
</head>
<body>
<h1>prototype.jpサンプル</h1>
<p id="line01">このテキストは置き換わります。</p>
<p id="line02">このテキストも置き換わります。</p>
</body>
</html>

単純なサンプルなのでそれほど大きな差があるわけではないのですが、それでもonLoadイベントを設定するためのEvent.observe()や、複数のp要素に対して処理するために繰り返しのeach()を必要としたり、要点を見るとやはり差があります。また、ケースによって$()や$$()などを使い分ける必要があり面倒かもしれません。

逆にショートカットによるコード記述量の縮小とクラス拡張（または既存クラス強化）を旨とするprototype.jsでは、フレームワークなしのJavaScriptをprototype.jsによって機能強化した感覚で記述できるので、何をするにしてもjQueryオブジェクトを経由させるゆえに感じやすい別物っぽさはprototype.jsではほとんど感じません。