第5回 コア編：連載：jQuery逆引きリファレンス（4/13 ページ）

[山田祥寛（http://www.wings.msn.to/），著]

連載目次

　$()関数を利用することで、標準的な要素（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は標準的な要素オブジェクトのメソッドではないからです）。