【jQuery】間違えやすい「$(this)」と「this」の使い方とは？

jQuery でプログラムを書いている際に「$(this)」と「this」の使い方で一瞬戸惑うことがありませんか？

基本的に「this」のほうは［DOMエレメント］で、イベントハンドラの「this」はそのイベントが発生した要素になり、「each」のコールバック関数内の「this」は順番の回ってきた該当する要素になります。

そして、「$(this)」はこの要素を$関数に渡して、［jQueryオブジェクト］化しているというワケ。

• 「$(this)」はjQueryオブジェクト。
• 「this」はDOMエレメント。

…このように使い分けることになります。

一例として、「a要素のhref属性を取得して何らかの処理を行う」とき、jQueryの「$(this)」を使うときと、単に「this」を使うときとでは、以下のような違いが生まれます。

$(function{
$('a').each(function() {
	var sample = $(this).attr('href');
	// ここに処理を書く
});
});

上記が［jQueryオブジェクト］ヴァージョン。
下記が［DOMエレメント］ヴァージョンになります。

$(function{
	$('a').each(function() {
	var sample = this.href;
	// ここに処理を書く
});
});
});

それぞれの違いを比べると、「$(this)」はa要素のjQueryオブジェクトとして作用するので、「$(this).jQueryメソッド」でメソッドが呼び出されることになります。
一方、「this」はa要素そのものを示すので、「this.href」などとして属性値を取得することができます。

初心者のjQueryプログラマーの方はお間違えのないように！