- 索引
- 1章:jQuery入門
-
- ├ jQueryのメリット
- ├ readyイベント
- ├ オブジェクトについて
- ├ メソッドについて
- ├ 情報の取得
- ├ イベント(1)
- ├ イベント(2)
- └ 初歩なサンプル
- 2章:jQuery基礎
-
- ├ thisについて(1)
- ├ thisについて(2)
- ├ jQueryとDOM要素
- ├ 簡単な演出
- ├ thisから辿る
- ├ 汎用的なアニメ(1)
- ├ 汎用的なアニメ(2)
- ├ アニメの停止
- ├ アニメを管理する仕組み
- └ 汎用的なアニメ(3)
- 3章:jQuery発展
-
- ├ イベントフロー(1)
- ├ イベントフロー(2)
- ├ イベントフロー(3)
- ├ 画像のプリロード
- ├ jQueryの高速化
- └ メソッドチェーン
- 番外編:研究
-
- ├ イベントを外す
- ├ cssアニメとの連携(1)
- ├ cssアニメとの連携(2)
- ├ cssアニメとの連携(3)
- ├ セレクタの自作(1)
- ├ セレクタの自作(2)
- ├ クロージャ(1)
- ├ クロージャ(2)
- └ クロージャ(3)
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要素しかオレンジ色になりません。
メモ
イベントに設定したfunction内で利用する時のみです
thisはイベント以外でも登場します。ですので「this = イベントが発生した要素」と覚えるのはやめましょう。今回のように 「this = イベントが発生した要素」が成立するのはイベントで設定したfunction内でthisを利用した時のみです。this/02.htmlでもhoverメソッドに設定したoverFuncとoutFunc内でthisを利用しました。
次回はthisを利用して「イベントが発生した要素の情報を取得」する方法を説明します。
次のページ: thisについて(2)