10-07-28
jQuery学習(「jQueryによるJavaScript入門」編)(1)
demoとmemo
jQueryを勉強することにしました。『Web制作の現場で使う jQueryデザイン入門』をが分かりやすかったのですが、買う前にできることもあろう、ということでまずはネットで調べてみました。すると前述の本の著者でもある西畑 一馬さんが、全15回で解説する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を追加、削除することで表示
-
トピックのニュース
トピックのニュース
トピックのニュース
トピックのニュース
トピックのニュース
-
経済のニュース
経済のニュース
経済のニュース
経済のニュース
経済のニュース
-
エンタメのニュース
エンタメのニュース
エンタメのニュース
エンタメのニュース
エンタメのニュース
-
スポーツのニュース
スポーツのニュース
スポーツのニュース
スポーツのニュース
スポーツのニュース
-
その他のニュース
その他のニュース
その他のニュース
その他のニュース
その他のニュース
参考記事