初心者のためのjQuery（基礎の基礎のキ）

2020年11月15日

スポンサードサーチ

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はまた別記事で。
”イベントが起きた対象要素だけに”処理を実行することが出来る便利なやつ”なので今後大活躍。

ググればたくさん親切なブログが出てくるので、あくまでも自分流です😢

今回記事にするのはここまで！はやっ
勉強時間が減ったら元も子もないので‥。