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

どうも銭湯マンです。 1ヶ月振りに行きましたけどやっぱり最高ですね。疲れがトゥルル！（死語） コロナウイルス怖すぎて行ってませんでしたがまあド田舎だし...

というわけでProgateのjQuery中級編です。 最初に知りたかったなあって感じの内容でした。

jQueryを使う準備

jQueryを使うにはhead内で以下のように書き、jQueryライブラリの読み込みなるものをしないといけません。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

また、cssと同様にjsファイルの読み込みも必要です。
ただ、大体重いため</body>の直前に書いて、jsを読み込ませるとwebページの表示が早くなるらしいです。

最後に、jQueryはHTMLに干渉します。
HTMLを読み込みきってからjQueryの動作を開始させるためのお約束の型があります。 こんな感じです。

$(document).ready(function(){
  ここに記述
});

これの省略系があって、こちらを使うのが主流です。というか非省略形は書く意味がないか。

$(function(){
  ここに記述
});

モーダルの表示

モーダルとは・・・クリックイベントなどで表示/非表示される要素のこと。メニューとかログイン画面とかですかね。
ここは今までの知識を使って、ログインボタンを押したらそれっぽいものが表示され、[X]ボタンを押したらその画面を閉じるものを作ります。　
ここで1つ思いました。
「画面外クリックで閉じるんじゃないんだ...」
というわけで調べてやっていきましょう

1.クリックした要素に対して処理を実行する

$(document).click((event)=>{
  $(event.target).css('color','red');
});

この例だとクリックしたところがどんどん赤くなっていきます。

え、ボタンが凹むんじゃないのって？
このイベントはクリックした要素を取得して処理をするため、クリックしたところがp要素だとbox-shadowが動作しません。上手いことボタンのクラスだけ選択できれば動作しますが・・・

次でこの対策をします。取得したい要素の子要素が選択されても、意図する要素を取得するようにします

2.closestメソッドで親要素を取得する

closest("セレクタ"); 使用例

$(document).click((event)=>{
    $(event.target).closest(".btn")
    .css("box-shadow","0px 3px #444")
    .css("position","relative")
    .css("top","2px");
  });

ボタンのテキストの上をクリックしてもp要素は選択されずにボタン用のクラスが選択されてますね。 ここまで来ればあとは応用です。

3.本命

はいCodePenドーーーン！！！！（このタイミングで覚えたので急に使った）
これ最高〜〜〜

See the Pen eYNJwZp by 味噌カツサンド (@misokatsu_sand) on CodePen.

ちゃんとメニューボタンでモーダルが開いて、閉じるボタンはもちろんモーダルの外をクリックしても閉じられますね。

重要なのは以下の部分です。

if((!$(event.target).closest(".modal").length)&&
      (!$(event.target).closest("#menu-open").length)){
      $('.menu-modal-wrapper').fadeOut();
    }

最初はクリックしたところの親要素を取得し「モーダルのポップアップ部分ではない」ことを条件にモーダル全体をフェードアウトさせてるだけでしたが、それだとメニューボタンを押したときも「モーダルのポップアップ部分ではない」ため、フェードインした直後にフェードアウトしてしまって困ってました。
もっとスマートなやり方があるかもしれませんが、単純にメニューボタンを押したときを条件から除外する形で論理演算子をぶち込んでます。

モーダル周りはこんなもんですかね
結構良い寄り道だったんじゃないですか！？！？！？我ながらこういうところ、向いてると思います

おまけ
あんまり関係ないんですけど知らなかったHTML要素ありました

<input placeholder="初期表示文字">

inputの入力領域に予め文字があって、入力を始めると消えるやつですね。

---

さて今回はしれっとsass使ってみたり、gifを取り入れたりCodePen使ってみたりしました。
過去の記事を定期的に読み返してますが、回数を重ねるたびしっかり進化を続けられていて感慨深いですね。始まったばかりですけど

あれ、達成感の割にjQuery中級終わってないじゃん
・・・ではでは。