jQuery Archive

最近 jQuery のプラグインを作っていて、DOM 要素毎にデータを一時的に保持できる機能を持ったメソッド jQuery.data() がかなり便利であることに気がつきました。

例として検索フォームなどでよく使われている、フォームの入力フィールドにあらかじめ説明を入れておき、フォーカス時に消すプラグイン（にするほどのものじゃないけど）のソースを以下に載せます。

(function($) {
  $.fn.previewInput = function(previewValue) {
    if((typeof previewValue != 'string') || (previewValue.length == 0)) return;

    return this.each(function() {
      if(this.value == undefined) return;

      // 元の文字色を保存しておく
      $.data(this, 'previewInput', $(this).css('color'));

      // call, focus, blur 時に文字色を変更する
      $(this).attr('value', previewValue)
      .css('color', '#999999')
      .blur(function() {
        if($(this).val().length == 0) {
          $(this).val(previewValue).css('color', '#999999');
        }
      }).focus(function() {
        if($(this).val() == previewValue) {
          $(this).val('').css('color', $.data(this, 'previewInput'));
        }
      });
    });
  };
})(jQuery);

そこで、この data() メソッドがどういう仕組みでデータを保存しているのか疑問に思ったので、Firebug で調べてみました。

DOM の該当要素に、jQuery オブジェクトの一意の名前である「”jQuery” + timestamp 値」のプロパティを作成し、そこに ID(uuid) がセットされています。
その ID と jQuery 内の配列 cache の添え字が紐付いており、データを設定 / 取得することができるようになっていることが分かりました。

紹介したプラグインもそうですが、イベント処理で変更前の状態を保持しておく場所等で有効活用できそうですね。

参考リンク

• jquery.jsを読み解く：第3回　jQueryライブラリ（470行目～769行目）｜gihyo.jp … 技術評論社
• jQuery.dataの使い方 : tech.kayac.com - KAYAC engineers’ blog
• jQueryのdata()を勉強したけど構造がイメージできずに撃沈気味… | THE HAM MEDIA

テーブルの背景色を 1 行置きに変更して、より見やすくする表示方法をみかけます。
HTML タグ内の tr タグに class 属性をつけていく方法でも良いのですが、行数が多くなるととても面倒ですので、最近では JavaScript で実装するケースが多いと思います。

今回はそれを jQuery を使って実現してみます。

まず、テーブルに class 属性を付けておきます。今回のクラス名は “stripe” としました。

jQuery を使わずにやってみる

jQuery を使う前に、まず jQuery を使わない場合を見てみましょう。
おそらく、下記のようなスクリプトになると思います。

window.onload = function() {
  var tbl = document.getElementsByTagName("table");
  for (var i = 0; i < tbl.length; i++) {
    if (tbl[i].className == "stripe") {
      stripeTable(tbl[i]);
    }
  }
}

function stripeTable(t) {
  for (var i = 0; i < t.rows.length; i++) {
    if ( i % 2 == 0) { t.rows[i].className = "even" }
  }
}

jQuery を使うとどうなるか？

まず、jQuery では window.onload の代わりに $() を使います。
window.onload ではページ内のすべてのファイルの読み込みが完了してから実行されますが、 $() では DOM 解析が完了した時点で実行できるのが特徴です。

では、先ほどのスクリプトを jQuery を使って書いてみます。

$(function() {
	$(".stripe tr:even").addClass("even");
});

たったこれだけです！
$ 関数の中では、stripe クラスを持つ要素内の tr 要素のうち、偶数番目の要素に even クラスを追加するということをしています。

jQuery を使い始めてまだ日が浅いですが、jQuery はすごく便利だなぁと実感しています。

>>作成したサンプルはこちら

参考サイト

• jQuery リファレンス
• jQuery 開発者向けメモ
• jQuery を使って Ajax 開発を単純化する