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

thisについて(2)

概要

イベントが発生した要素の情報を取得する

コンテンツ作成において、どのボタンがクリックされたを知ることは重要です。ここではクリックされたボタンの情報を取得する方法を説明します。これは「サンプルページ」で作成するコンテンツにも必要な知識なので覚えるようにしてください。

解説

そのまま利用するthis

前回利用したthisは$( )内で利用しました。しかし今回紹介するテクニックはthisをそのまま利用します。
サンプル（this2/01.html）のソースを開いて、body内の構成を確認してください。以下の様にdiv要素が5つありますが、それぞれにid属性が設定され1〜5の値が割り振られています。 

<div id="1">click me.</div>
<div id="2">click me.</div>
<div id="3">click me.</div>
<div id="4">click me.</div>
<div id="5">click me.</div>

続いてjQueryを確認してください。以下の様にclickメソッドを利用（引数に無名関数を直接設定しています）してクリックされたらアラートで「this.id」の値を表示するようにしています。 

$("div").click(function(){
	alert(this.id);
});

結果として、div要素をクリックするとid属性の値がアラートで表示されます。このように「this.id」とすることで、イベントが発生した要素のid属性の値を取得できます。

thisの正体

前回のthisが$( )内で利用したのに対し、今回はそのまま利用しています。この違いを理解しておかないと混乱すると思うので、ここで説明しておきます。そもそもthisはjQueryの仕組みではなくjavaScriptの仕組みです。そのためthisが指すものはjavaScriptで操作できる「DOM要素」なのです。

thisの正体
thisの持つ情報はjavaScriptで操作できる「DOM要素」です。イベントで設定したfunction内で利用した場合はイベントが発生したDOM要素を指します。
DOM要素とは
DOMとはDocument Object Modelの略で、htmlやxmlの構造を操作する仕組みです。そしてDOMの操作される対象のことをDOM要素（またはエレメントノード）と呼びます。

そしてサンプルで利用した「id」もjQueryの仕組みではなく、javaScriptでid属性の値を取得するプロパティでDOM要素にしか利用できません。ですからthisに対して直接利用しなければならないのです。

本当にthisがDOM要素なのか確認するサンプルを用意しました。サンプル（this2/02.html）のソースを開いて、body内の構成はthis2/01.htmlと同じ事を確認してください。jQueryは以下の様に記述され、thisに対してjavaScriptのinnerHTMLプロパティを「xxxxx」に設定しています。 

$("div").click(function(){
	this.innerHTML = "xxxxx"
});

innerHTMLプロパティは要素のHTML情報を設定するプロパティなので、クリックされたdiv要素の内容が「xxxxx」に置き換わります。このようにjavaScriptのプロパティが利用できることからthisがDOM要素であることが確認できます。
追記：2014.11/25：これまではinnerHTMLではなくinterTextを利用していましたが、これはfirefoxなどで利用できないためinnerHTMLに変更しました。

前回はなぜ$( )内で利用したのか？

前回のサンプル（this1/02.html）で、thisを$( )内で利用したのはjQuery用のメソッドを利用するためです。実際にthis1/02.htmlでは以下の様にjQueryのcssメソッドを利用して背景色を変更しています。 

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

1章の「オブジェクトについて」で、$( )はセレクタを利用してjQueryオブジェクトを作成する仕組みと説明しましたが、DOM要素をjQueryオブジェクトに変換することもできます（thisはセレクタではありません）。
→参考：jQueryメソッドの上から2番目の構文です。

つまりイベントが発生した要素に対して、javaScriptのメソッドやプロパティを利用したい時はそのまま利用し、jQueryで操作したい時は$( )を利用してjQueryオブジェクトに変換してから利用するのです。

次回はjQueryオブジェクトとDOM要素について詳しく説明します。