jQueryの基本 Part3

jQueryの基本 Part3

こんにちわ!まだまだひよっ子プログラマのuskです!
まだ夏に入ってもいないのに、秋すっ飛ばしてはやく冬来ないかな~
とか思っちゃうくらい暑い日が続きますね!
え、そんなこと思ってるのは自分だけ・・・?暑さに耐性がないのも考え物ですな・・・。

そんなことはさておき!今回も前回、前々回同様にjQueryの基本についてやっていきます!
まだまだ応用への道は遠いです!確実に基本を固めていきます!

今回は、$(this)についてです!

この”$(this)”は、jQueryを使い始めたばかりだと、
扱い方がよくわからなかったり、曖昧なまま使っていてミスったりなど厄介な存在でした。
しかし、使いこなせれば、強い味方です!

$(this)が何を指しているのか、どのように使うと効率がいいのか、明確にしましょう。

説明

簡単に言うと、”$(this)=イベントの発生した要素”と考えると良いかと思います。

そもそも、$(this)が使われるタイミングだと、その前にイベント設定の記述があるかと思います。
そのイベントのセレクタが$(this)の指すものです。
文章だけだと分かりにくいかと思うので、例を挙げて説明しましょう。

例1

例1の”$(this)”が指すのは、その直前のイベントのセレクタである”$(‘.btn’)”のことです。
例1のように$(this)が指しているセレクタが1つしかない場合、$(this)を$(‘.btn’)に書き換えても問題ありません。

次に、$(this)が本領発揮するシーンを紹介します。

例2

例2の場合、class名が”btn”の要素が複数あるため、
ここで$(this)を使わない場合、どれか1つの「CLICK!」を押したとき、すべての「CLICK!」が「CHANGE!」に変更されます。

特定のクラス名が”btn”のものだけ変更したい場合は、$(this)を用いてどれが押されたのものか、明確にすべきです。

$(this)を変数に格納し、複数回$(this)を使うということも可能です。

例3

例3の場合、上下どちらかの「赤」という文字をクリックした時点で、$(this)を変数$thisに格納します。
その後、隠していた「青」という文字を表示させるのですが、
そのとき、$thisは押したほうの「赤」を指しているので、その文字色を赤色に、
次の$(this)が隠されている「青」を示すので、「青」が青色に変化します。
押されなかった「赤」のみ黒色となります。

まとめ

  • $(this)は直前のイベントが発生するセレクタを指す。
  • $(this)は同じクラス名、同じセレクタを使ってそれぞれ別の挙動をさせたいときに使うべき。
  • $(this)は変数に入れて使うことも可能。

Previous: bitbucketのWebフック(第2回) Next: 「経営者の条件」より開発部門管理についての思考 第三弾

© 2017 ALL CONNECT Inc. All Rights Reserved.