目次
jQueryふんわりしかわからない問題
html、cssがかけるようになって、Webサイトを作成していくと必ずと行っていいほど出てくるメニュー開閉ボタン。
いわゆるハンバーガーメニューってやつです。
これですな
いつもなんやかんやググって、なんとなく読んで、やってる意味はわかってるけど自分でかけないし、()、{}があっちゃこっちゃで「どこにかかってるんや」状態。
「まぁいいかコピペしちゃえ」
でのらりくらり乗り切ってきたの私です。
パーツストックはしてるとしても、開閉メニューなどが複合的に絡んできたときに時間を取られず、すんなりコーディングをこなすにはやっぱり理解しとかないかんです。
jQuery基本の書き方
「いつ なにを どうする」
$(‘HTML要素’).メソッド(‘ なにを取得して ’ , ‘ どうするのか ’)
メソッド=命令
その後の()内=命令の対象
.メソッド(どうしてほしいのか)
//なにをどうする //headerの文字色をいい感じのオレンジにしてね $('.header').css('color', '#de7a22');
htmlを読み込むまで待機するお決まりの呪文(これも省略された関数)
//いつ //HTMLを読みこんだら実行してね の予約部分 $(function(){ });
中に、実行したい命令を書く。
↓
//HTML読み込まれるまで待って //headerをいい感じのオレンジにしてね $(function(){ $('.header').css('color', '#de7a22'); });
↓
でもhtml読み込まれていきなり色買えるわけじゃない。
じゃあいつ変えたいのか。
↓
「マウスオーバーしたとき!」
//HTML読み込まれるまで待って //マウスオーバーしたら //headerをいい感じのオレンジにしてね $(function(){ $('.header').on('mouseover', function(){ $(this).css('color', '#de7a22'); ); });
thisはまた別記事で。
”イベントが起きた対象要素だけに”処理を実行することが出来る便利なやつ”なので今後大活躍。
ググればたくさん親切なブログが出てくるので、あくまでも自分流です😢
今回記事にするのはここまで!はやっ
勉強時間が減ったら元も子もないので‥。
昔、Twitterの友達が送ってくれたこの本で復習しました。
パーツごとの作成&ストックに戻りつつ、また書きます。
コメント