連載
» 2010年03月12日 00時00分 公開

連載:jQuery逆引きリファレンス:第5回 コア編 (4/13)

[山田祥寛(http://www.wings.msn.to/),著]



「連載:jQuery逆引きリファレンス」のインデックス

連載目次


 $()関数を利用することで、標準的な要素(DOM Element)オブジェクトをjQueryオブジェクトに変換することもできます。引数elemには、DOM Elementオブジェクトのほか、XML Documentオブジェクト、windowオブジェクトなどを指定することもできます。

 この$(elem)という構文は、いうなれば、標準的な要素オブジェクトに対して、jQueryの機能を付与するためのものであると考えればよいでしょう。

 具体的な例も見てみましょう。以下は、ページの背景色を赤に変化させるとともに、ボタンをクリックしたタイミングでボタンのテキストを変更し、同時にボタンを使用不可にするサンプルです。

<script type="text/javascript">

$(function() {

  // ページの背景色を赤色に (1)
 $(document.body).css('background-color', 'Red');

  // ボタンクリック時の挙動を定義 (2)
  $('input:button').click(
    function() {
     $(this). // クリックされた要素を……
       attr('disabled', 'disabled'). // 使用不可にし、
       val('クリックしました'); // テキストを変更
    }
  );
});

</script>

   ……中略……

<input type="button" value="クリックして!" />

リスト081 ページの背景色とボタンクリック時の挙動を定義(JqueryElem.html)
このHTMLを実際にブラウザで開く


ブラウザで開く


ボタンをクリック

リスト081の実行結果
ボタンをクリックすると、テキストが変わり、かつ、ボタンは使用不可に。

 (1)のようなケースでは、太字の部分を「$('html, body')」のように書き換えても動作は同じです。通常は、要素オブジェクトをわざわざ経由するのではなく、セレクタ式から直接にjQueryオブジェクトを生成した方がシンプルですし、コードの一貫性も保てるはずです。

 $(elem)の構文が重要になってくるのは、特に(2)のケースでしょう。

 イベント・リスナの中で、thisキーワードを使ってイベントの発生元にアクセスするケースはよくあることです。しかし、thisが指すのはあくまで標準的な要素オブジェクトであって、jQueryオブジェクトではありません。

 そこで$()関数を使って、thisキーワードの内容をjQueryオブジェクトに変換するのです。これによって、jQueryが提供する諸メソッドにもアクセスできるようになります。「this.attr(……」のように記述しても正しく動作しませんので、注意してください(attrは標準的な要素オブジェクトのメソッドではないからです)。

Copyright© Digital Advantage Corp. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。