0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【jQuery】$(this)ってなんやねん!?

Last updated at Posted at 2020-08-19

スクールで習って無いですけど?

$(this)という記述がネットで調べてると出てきますね。
jQueryだけじゃなく、Laravelでも似たような物が出てきました。

でもjQueryではもっと直感的にわかりやすいと思いました。とりあえずすぐにアウトプットしておきます

英語のthisと似ているぞ

this

指示語

前に出てきた単語を指す

前に出てきてるセレクタを探す

そのセレクタのこと!!

ホント英語の読解問題の解き方のようなイメージ

thisは対象の一つ、セレクタだとそのセレクタ全部になってしまう

セレクタを探しても、それ全体という訳ではなく、クリックされたセレクタ限定

下のデモで確認。
クリックした物だけアンダーラインが表示されます。

thisを使ったバージョン

See the Pen クリックしたらアンダーライン by 大野原 信 (@rjwxfqli) on CodePen.

this不使用バージョン

これがthisを使っていないと

See the Pen クリックしたらアンダーライン(this不使用) by 大野原 信 (@rjwxfqli) on CodePen.

一つのh5要素をクリックすると全てのh5にアンダーライン!!

if文とクラス名とCSSを駆使してアンダーラインの点灯バージョン

ついでに、アンダーラインが引かれたものをもう一度クリックするとなくなるようにしてみます。

See the Pen thisの理解(thisじゃないver) by 大野原 信 (@rjwxfqli) on CodePen.

thisって便利ですね!

イベントの発生ではクリックされたものだけを対象にすることが多いと思われます。それからidなどで指定して2回、タグとidを記述するかのいずれかになりますかね。

とりあえずthisの便利さがわかったところで、laravelでの使い方も勉強していきます。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?