CodeZine(コードジン)

特集ページ一覧

jQuery入門(その1)

DOM操作とjQueryのコア機能

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2009/03/31 14:00

ダウンロード サンプルソース (12.6 MB)

目次

ラップセット

 $("#gdEntries>tbody>tr:even")の結果はjQueryラップセットオブジェクトとなります。これは配列のような構造で、マッチした全要素が含まれる配列とlengthプロパティを持っています。このラップセットに含まれるDOM要素を次のように直接参照することができます。

var res = $("#gdEntries>tbody>tr:even");

var len = res.length; // match count. 0 = no matches
var el = res[0];      // first element
el = res.get(0);      // same but 'official' syntax

 jQueryコンストラクタは常にオブジェクトの結果を返すので、たとえセレクタでマッチするものが何も見つからなくてもオブジェクトを返します。.lengthプロパティを調べれば、選択によってマッチするものが返されたかどうか判定できます。

 マッチするもののセットが得られたら、手動でforループを使って、それらを反復処理することができます。あるいは、ラップセット関数.each()を使って、そのリストを反復処理することもできます。.each()の良い点は、選択したDOM要素にthisポインタを割り当てることです。つまり、次のようにすることができます。

$("#gdEntries tbody tr:even").each( 
   function(index) {
      alert(this.id + " at index: " + index);    
});

ラップセット関数

 手動による反復処理が便利なこともありますが、ラップセットの要素に対して1つ以上のjQuery関数を使う方が一般的です。jQueryセレクタは、jQuery()関数または$()関数で作成したものにマッチする全要素(この場合、選択した各行)に対して.addClass()関数と.css()関数の両方を適用します。jQuery関数については、APIリファレンスページで調べることができます。また、この印刷可能なjQueryクイックリファレンスシートで調べることもできます。

関数チェイニング

 jQueryでは、大部分の関数呼び出しで柔軟なインタフェースを使用できます。つまり、多数のjQuery関数呼び出しをつなげて1つのコマンドにすることができます。次の例は前にも出てきたものですが、

$("#gdEntries tbody tr")
    .not(":first,:last")
    .filter(":odd") 
    .addClass("gridalternate")
    .css("border","solid 1px lightgrey");

 大部分のjQuery関数がマッチセットを結果として返すので、この構文チェイニングはうまく働きます。例えば、.addClass.cssも、それらの対象となった元のマッチセットを返します。それに対し、.not.filterなどの関数は、元のマッチセットに変更を加えて、新たなマッチセットを返します。また、.end()関数を使用すると、フィルタを除去して、チェインの先頭で指定した元のマッチセットに戻すことができます。

 チェイニングはコードをコンパクトに保つことのできる優れた方法ですが、これを使用するかどうかは各自の判断によります。もしそうしたければ、次のようにもっと伝統的なコードを書くこともできます。

var matches = $("#gdEntries>tbody>tr");
matches.addClass("gridheader");
matches.removeClass("gridhighlight");

 チェインにしたステートメントはデバッグするのが難しいこともあります。最後に1つの結果値が得られるだけだからです。それに対し、明示的なメソッドを使用すると、各ステップの終わりに変更内容を確認できるので、デバッグには便利です。私の場合は、デバッグのときはコマンドを分解し、デバッグが終わったら再びチェインするという手法をよく用いています。

 ただし、すべてのjQuery関数をチェインにできるわけではありません。.val().text().html()といった関数は文字列値を返します。.width().height()は数値を返します。.position()は位置オブジェクトを返します。jQuery関数リストをよく見れば、大部分の関数がどのような型の結果を返すのかわかるはずです。多くの場合、voidの結果を返すと思われる関数はマッチセットを返します。それ以外の関数はすべて値かデータを返します。

イベント処理

 イベント処理はjQueryの最も優れた面の1つです。jQueryではイベント処理が簡単になり、しかもブラウザ間での一貫性が確保されるからです。jQueryには、マッチセットの要素に対してイベントハンドラをまとめてアタッチ/デタッチする高レベルの.bind()関数と.unbind()関数があります。そのため、前出の例で行にアタッチされたクリックハンドラのように、イベントを一度に多数のオブジェクトにアタッチすることが簡単にできます。さらに、クリックイベント、キーストロークイベント、マウスイベントなどの一般的なイベントには、.click().mousedown()change().keydown()といった具合に、たいてい専用のハンドラ関数があります。jQueryのイベントハンドラはパラメータとして関数を受け取ります。jQueryはこれらのハンドラを追跡して、後でアンバインドできるようにします。コーディングではこれほど簡単にはいきません。イベントハンドラに一意の名前を付けるオプションもあるので、それらを一貫したやり方で削除することができます。

$("#gdEntries tr")
   .bind("click.MyHandler",function(e) {...});
   ...
$("#gdEntries tr")
   .unbind("click.MyHandler");

 この例でイベント名の後ろに付けた名前によって、個別のイベントハンドラを一意に識別できます。それに対し、デフォルトの動作では、.bind()または種々のコンビニエンスハンドラ(.click()など)でイベントに対して割り当てられたイベントハンドラがすべて削除されます。

 jQueryには次のものも含まれています。

  • .one() ― イベントを一度だけ発生させ、それからハンドラをデタッチします。
  • .toggle() ― クリックのたびに交互に切り替えます。
  • .trigger() ― 要素に対するイベントをコードによってトリガできます。

 イベントハンドラに関するjQueryの共通モデルには次の機能が含まれています。

  • thisポインタは常にイベントが発生した要素になります。
  • jQueryは常にパラメータとしてイベントオブジェクトを渡します。
  • イベントオブジェクトはブラウザ横断的に正規化されます

  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:japan.internet.com翻訳記事

もっと読む

著者プロフィール

  • japan.internet.com(ジャパンインターネットコム)

    japan.internet.com は、1999年9月にオープンした、日本初のネットビジネス専門ニュースサイト。月間2億以上のページビューを誇る米国 Jupitermedia Corporation (Nasdaq: JUPM) のニュースサイト internet.com や EarthWeb.c...

  • Rick Strahl(Rick Strahl)

    ハワイのマウイ島にあるWest Wind Technologies社の社長。同社はWebおよび分散アプリケーションの開発とツールを専門にしており、Windowsサーバー製品、. NET、Visual Studio、およびVisual FoxProに主軸を置いている。RickはWest Wind We...

あなたにオススメ

All contents copyright © 2005-2022 Shoeisha Co., Ltd. All rights reserved. ver.1.5