このページでは、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とは、イベントが発生した時に要素の情報を取得する処理
