初心者のためのjQuery(基礎の基礎のキ)

基礎にかえろうjQuery
目次

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

 

基礎にかえろうjQuery

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

スポンサーリンク

コメント

コメントする

目次