第5回 コア編：連載：jQuery逆引きリファレンス（4/13 ページ）
$()関数を利用することで、標準的な要素（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="クリックして！" />
このHTMLを実際にブラウザで開く
リスト081の実行結果（1）のようなケースでは、太字の部分を「$('html, body')」のように書き換えても動作は同じです。通常は、要素オブジェクトをわざわざ経由するのではなく、セレクタ式から直接にjQueryオブジェクトを生成した方がシンプルですし、コードの一貫性も保てるはずです。
$(elem)の構文が重要になってくるのは、特に（2）のケースでしょう。
イベント・リスナの中で、thisキーワードを使ってイベントの発生元にアクセスするケースはよくあることです。しかし、thisが指すのはあくまで標準的な要素オブジェクトであって、jQueryオブジェクトではありません。
そこで$()関数を使って、thisキーワードの内容をjQueryオブジェクトに変換するのです。これによって、jQueryが提供する諸メソッドにもアクセスできるようになります。「this.attr(……」のように記述しても正しく動作しませんので、注意してください（attrは標準的な要素オブジェクトのメソッドではないからです）。
Copyright© Digital Advantage Corp. All Rights Reserved.
ITmediaはアイティメディア株式会社の登録商標です。