Webエンジニア目指して#24

Progate jQuery

どうも風邪マンです。喉に集中攻撃食らってます。

変数宣言で引っかかったのでそれをまとめます。

変数宣言

var

関数スコープ（宣言した関数内で使える）
再代入 O
再宣言 O
変数の巻き上げがある（関数宣言時にundefinedで初期化される）

let

ブロックスコープ（宣言したブロック内で使える）
再代入 O
再宣言 X

const

ブロックスコープ（宣言したブロック内で使える）
再代入 X
再宣言 X
オブジェクトは変更可

まとめ

varを使った不具合が多すぎて対策としてlet,constが作られたっぽいんで、varは使う必要なさそうですね。宣言の意図とかが読み取りにくくもなりますからね。 progateでvar使わされたんで気になって調べました。

それではProgateのjQuery 中級の続きです。

ホバーイベント
$('.sample-hover').hover(
  function(){
    マウスオーバー時の処理;
  },
  function(){
    マウスオーバー解除時の処理;
  }
);
要素にクラスを追加する

$('セレクタ').addClass('クラス名');
※クラス名の所に.は不要
予めcssを書いておいたクラスを適用させる感じですね。

要素からクラスを除去する

$('セレクタ').removeClass('クラス名');
※クラス名の所に.は不要

要素が指定したクラスを持っているか判定する

$('セレクタ').hasClass('クラス名');
返り値はTrue or Falseです。なのでifを使って特定の要素にだけ処理をさせるような使い方をします。
前回までのclosestメソッドやfindメソッドを絡めると使い勝手が良さそうですね

ということで道場編へ。

ここで学習したことは

  • 同じクラス要素で複数レイアウトされているオブジェクトに対して,
    単体でcssを変更したい場合はcssメソッドではなくaddClassメソッドを使う
    (cssメソッドだと同じクラスの要素全てが変更されてしまう)

  • アロー関数はthisを字句解析時点で拘束する
    この性質のせいでjQueryで要素を検索させて色々処理させようとしても、thisは検索前の何かを参照するので処理がうまくいきません。アローの引数をeventにし、thisの代わりにevent.currentTargetとすることで回避できますが、大人しくアロー使わない方が良さそうです。

  • jQueryオブジェクトを変数に格納するとき、$smp="$(this).find('.smp')";のようにクォーテーションで囲わない
    文字列だから・・・と脳死でやってしまいましたが過去の記録見たらちゃんと囲ってないですね。

以上で道場も終わって次は上級編ですね。 アロー関数とthisについて調べてたんですが奥が深そうだったんで後回しにします...

ではでは。