このページでは、jQueryの基本である「イベント」と「this」の使い方と意味を解説する。
イベントとは?
指定した要素に何らかの動きを実行させる為の処理
基本的な書き方
$('セレクタ').//イベント名(function(){ //ここに命令する内容を書く });
「イベント名」の所に、自分が実行させたいイベントを書く。
clickイベント
指定した要素がクリックされた時に、動きを付けるイベントのこと
基本的な書き方
$('セレクタ').click(function(){ //クリックした時に動きをつける命令文を書く });
例:クリックイベントを使って「ボタン」をクリックした時に、文字を「ボタン」から「変えました」に変更させる
//HTML
<button>
<p>ボタン</p>
</button>
//jQuery
$('p').click(function(){
$('p').text('変えました')
});
これで「ボタン」をクリックすると、ボタンという文字が「変えました」になる。
thisとは
イベントが実行される時のみ要素に適用させる命令のこと
基本的な書き方
$('p').click(function(){ $(this).//pをクリックした時に実行させるメソッドを入力 });
例:クリックイベントとthisを使って、クリックしたボタンの文字を「変えました」に変更させる
//HTML <button><p>ボタン1</p></button> <button><p>ボタン2</p></button> <button><p>ボタン3</p></button> //jQuery $('p').click(function(){ $(this).text('変えました') });
これで、クリックしたボタンの文字が「変えました」になる。

thisを使った場合と使わない場合の違いがわかんないよ~!!

thisを使わなければ、クリックした時に全てのp要素(ボタン1~ボタン3が)「変えました」になるけど、
thisを使うことにより、クリックしたボタンのみ変えましたになるんだよ!
- ボタン1 ボタン2 ボタン3
- ボタン1をクリック
- ボタン1のみ変えましたになる。

なるほどねぇ!!これは便利!
私の顔もクリックイベントで新垣結衣に変えてよ!

君の顔じゃクリックイベントでも無理だよ

おいコラ
イベントとthisのまとめ
- イベントとは指定した要素に動きを実行させる処理のこと
- クリックイベントを使えば、クリックした時に要素に動きを付けられる
- thisとは、イベントが発生した時に要素の情報を取得する処理