【jQuery基礎編2】基本イベントclickとthisの意味と使い方

JavaScript

このページでは、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. ボタン1 ボタン2 ボタン3
  2. ボタン1をクリック
  3. ボタン1のみ変えましたになる。

 

なるほどねぇ!!これは便利!

私の顔もクリックイベントで新垣結衣に変えてよ!

 

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

 

おいコラ

 

イベントとthisのまとめ

 

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

 

勉強会で聞いた!評判のプログラミングスクール3選
ポテパンキャンプ

【特長】
3ヶ月のスクール代を全額キャッシュバック!
実質無料で学べるプログラミングスクールです。

【こんな人にオススメ】
・Railsチュートリアルをやり切った
・お金はないがやる気はある
・Ruby/Railsを中心に学びたい
・初心者の域を脱したい

TECH::EXPERT

【特長】
600時間の学習!
スパルタカリキュラムで高収入な転職を実現させるプログラミングスクールです。

【こんな人にオススメ】
・最短最速でエンジニア転職したい
・今の環境をいますぐ変えたい
・お金があってやる気もある
・もう挫折したくない

DMM WEBCAMP

【特長】
転職成功率98%
基礎からプロダクト制作まで徹底したカリキュラムで学べるプログラミングスクールです。

【こんな人にオススメ】
・Web系企業に就職・転職したい
・インフラ系からスキルチェンジしたい
・短期間で集中して学びたい
・チーム開発を学びたい

JavaScriptjQuery
この記事を書いた人

元専業アフィリエイター・ブロガー。
現在はWebエンジニアの25歳。
運営メディアは月間150万pvを超えたことも。

YUUKIをフォローする
シェアする
YUUKIをフォローする
YUUKIのWebエンジニア道