10-07-28

jQuery学習(「jQueryによるJavaScript入門」編)(1)

demoとmemo

jQueryを勉強することにしました。『Web制作の現場で使う jQueryデザイン入門』をが分かりやすかったのですが、買う前にできることもあろう、ということでまずはネットで調べてみました。すると前述の本の著者でもある西畑 一馬さんが、全15回で解説するjQueryによるJavaScript入門-Re:Creator's Kansai (リクリ)があったので、まずはここから読んでいきます。

jQueryによるJavaScript入門-Re:Creator's Kansai (リクリ)

第0回

第0.5回 Javascriptの記述場所

第1回 CSSの操作

--- jQueryによるCSSの操作 ---
//$("CSSセレクタ").css("プロパティ","値");

$(function(){
 $("ul li#vol1").css("color","#cccccc");
})

第2回 クリックの操作

クリックでボックスを開く⇒「閉じる」ボタンで閉じる
$(function(){
 $("dl dt#vol2").css("background-color","#dddddd");
 $("dl dt#vol2").css("cursor","pointer");
 $("dl dt#vol2").click(function(){
  $("dd").css("display","block");
 })
 $("a.close").click(function(){
  $("dd").css("display","none");
  return false; //リンク先に飛ばないようにする
 })
})
閉じる
return false;に関してはa要素にclickイベントを設定する際に必要な記述になります。 return false;がないとclickイベントを実行した後にリンク先に移動してしまいます。 それを防ぐ為の記述です。

第3回 CSSとクリックの応用

タブがクリックされたらパネルの装飾をcssで適用させる

  • トピックス
  • 経済
  • エンタメ
  • スポーツ
  • その他
  • トピックのニュース
    トピックのニュース
    トピックのニュース
    トピックのニュース
    トピックのニュース
  • 経済のニュース
    経済のニュース
    経済のニュース
    経済のニュース
    経済のニュース
  • エンタメのニュース
    エンタメのニュース
    エンタメのニュース
    エンタメのニュース
    エンタメのニュース
  • スポーツのニュース
    スポーツのニュース
    スポーツのニュース
    スポーツのニュース
    スポーツのニュース
  • その他のニュース
    その他のニュース
    その他のニュース
    その他のニュース
    その他のニュース

第4回 classの制御(addClassとremoveClassでクラス操作)

タブがクリックされたら、あらかじめclass設定していたselectedを追加、削除することで表示

  • トピックス
  • 経済
  • エンタメ
  • スポーツ
  • その他
  • トピックのニュース
    トピックのニュース
    トピックのニュース
    トピックのニュース
    トピックのニュース
  • 経済のニュース
    経済のニュース
    経済のニュース
    経済のニュース
    経済のニュース
  • エンタメのニュース
    エンタメのニュース
    エンタメのニュース
    エンタメのニュース
    エンタメのニュース
  • スポーツのニュース
    スポーツのニュース
    スポーツのニュース
    スポーツのニュース
    スポーツのニュース
  • その他のニュース
    その他のニュース
    その他のニュース
    その他のニュース
    その他のニュース

参考記事

otani-webs.com / PozuPad / Copyright © 2010 LabPad All Rights Reserved.