目次
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の友達が送ってくれたこの本で復習しました。
パーツごとの作成&ストックに戻りつつ、また書きます。


コメント