初心者向けのjQuery入門講座|デザイナー向けのJavaScriptライブラリ
このエントリーをはてなブックマークに追加
索引
1章：jQuery入門
2章：jQuery基礎
3章：jQuery発展
番外編：研究

thisについて(1)

概要

イベントが発生した要素を指す

jQueryでは、メニューなど同じカテゴリの要素のうち、クリックされた要素だけ操作したい場合が良くあります。そのような時にthisを利用して対応します。thisはイベントで設定したfunction内で利用すると、イベントが発生した要素を指します。

thisが指すもの
イベントで設定したfunction内で利用した場合、イベントが発生した要素を指します。
このときthisは$( )内でクォートを付けないことに注意してください。

解説

thisを利用しない時の不都合

まずはthisを利用しない時に発生する不都合を確認します。サンプル（this1/01.html）のソースを開いて、jQuery部分が前回紹介したサンプル（sample/01.html）と同じ事を確認してください。異なるのはbody内のdiv要素が5つに増えた点だけです。 

<div>touch me.</div>
<div>touch me.</div>
<div>touch me.</div>
<div>touch me.</div>
<div>touch me.</div>

このサンプルで、どれか1つのdiv要素にマウスオーバーすると全てのdiv要素がオレンジ色になってしまいます。これはjQueryでマウスオーバーした時の処理（つまりoverFunc）で以下の様にdiv要素を操作しているためです。そのためdiv要素すべてが反応してしまうのです。 

function overFunc(){
	$("div").css("background-color", "#FC6");
}

もちろん、これでは都合が悪いので、マウスオーバーしたdiv要素だけを操作するようにしなければなりません。そこで利用するのがthisなのです。

thisを利用したサンプル

thisを利用するとイベントが発生した要素を操作できます。サンプル（this1/02.html）のソースを開いて、jQuery部分のoverFuncとoutFuncが以下の様に書き換えられていることを確認してください。 

function overFunc(){
	$(this).css("background-color", "#FC6");
}
function outFunc(){
	$(this).css("background-color", "#09C");
}

上記の様に$( )内にthisを利用することで、イベントが発生した要素を指します。このときthisにクォートは必要ないので、付けないように注意してください。結果としてthis/02.htmlでは、マウスオーバーしたdiv要素しかオレンジ色になりません。thisにクォートを付けない理由は次ページで説明します。

メモ

イベントに設定したfunction内で利用する時のみです

thisはイベント以外でも登場します。ですので「this = イベントが発生した要素」と覚えるのはやめましょう。今回のように 「this = イベントが発生した要素」が成立するのはイベントで設定したfunction内でthisを利用した時のみです。this/02.htmlでもhoverメソッドに設定したoverFuncとoutFunc内でthisを利用しました。

次回はthisを利用して「イベントが発生した要素の情報を取得」する方法を説明します。