今度こそ始めるjQuery超入門
- 6. 西畑 一馬 フロントエンドエンジニア 5/30より電子書籍版が販売開始 iBookstore／Amazon Kindle／Google Playブックス 楽天kobo／BOOK☆WALKER／ニコニコ静画 ほか
- 8. Write less, do more .
- 10. クロスブラウザ対応
- 11. ∼jQuery 1.8.3 後方互換を重視 jQuery 1.9.x 非推奨機能を削除 jQuery 2.0 IEのサポートを9からに変更 jQuery 1.10 IEのサポートが6以上 jQuery Roadmap
- 14. ロールオーバー
- 16. ギャラリー
- 18. モーダルウィンドウ
- 20. フローティングウィンドウ
- 22. スワイプギャラリー
- 26. jQueryの基本 jQuery
- 28. CDNの活用 Google Hosted Libraries https://developers.google.com/speed/libraries/ Microsoft Ajax CDN http://www.asp.net/ajaxlibrary/cdn.ashx
- 30. CDNの活用 A B CDN
- 31. セレクターAPI
- 34. CSS2.1セレクター $("ul > li") $("dt + dd") $("li:first-child")
- 36. HTMLやCSS の操作
- 42. 属性の変更 $("a").attr("href","http://to-r.net"); <a href="#">....</a> <a href="http://to-r.net">....</a>
- 43. class属性の追加 $("p").addClass("bar"); <p class="foo">....</p> <p class="foo bar">....</p>
- 44. class属性の削除 $("p").removeClass("bar"); <p class="foo bar">....</p> <p class="foo">....</p>
- 46. CSSの変更 $("p").css("font-size","12px"); $("p").css("fontSize","12px"); $("p").css("font-size",12);
- 48. イベントの設定
- 53. アニメーション
- 56. jQueryの 利用方法
- 57. アコーディオン パネル
- 58. アコーディオンパネル
- 59. ベースのHTMLを作成 <body> ! <dl> ! ! <dt>Step.1</dt> ! ! <dd><p>Lorem ipsum ! ! (中略) ! ! venenatis.</p></dd> ! ! <dt>Step.2</dt> ! ! <dd><p>Integer rhoncus ! ! (中略) ! ! ultricies accumsan. </p></dd> ! ! <dt>Step.3</dt> ! ! <dd><p>Integer pretium ! ! (中略) ! ! imperdiet. </p></dd> ! </dl> </body>
- 60. CSSでベースを整形 body{ ! background:#252422; } dl{ ! width:800px; ! margin:50px auto; } dt{ ! line-height:35px; ! font-size:large; ! text-indent:3em; ! font-weight:bold; ! color:white; ! height:35px; ! background:url("images/background.jpg") } dd{ ! margin:0; ! height:300px; ! background:#D4D0C8; } dd p{ ! margin:0; ! text-indent:1em; ! padding:20px; } !
- 61. HTMLとCSSのみのベース
- 64. 完成形のスクリプト $(function(){ ! $("dd:not(:first-of-type)").css("display","none"); ! $("dt").click(function(){ ! ! if($("+dd",this).css("display")=="none"){ ! ! ! $("dd").slideUp(400); ! ! ! $("+dd",this).slideDown(400); ! ! } ! }); }); たった9行!!
- 65. まずは、お約束 $(function(){ ! $("dd:not(:first-of-type)").css("display","none"); ! $("dt").click(function(){ ! ! if($("+dd",this).css("display")=="none"){ ! ! ! $("dd").slideUp(400); ! ! ! $("+dd",this).slideDown(400); ! ! } ! }); }); 残り7行！
- 66. 初期表示を作成 $(function(){ ! $("dd:not(:first-of-type)").css("display","none"); ! $("dt").click(function(){ ! ! if($("+dd",this).css("display")=="none"){ ! ! ! $("dd").slideUp(400); ! ! ! $("+dd",this).slideDown(400); ! ! } ! }); }); １番目以外のdd要素の displayプロパティをnoneに変更 残り6行！
- 68. クリックイベントを設定 $(function(){ ! $("dd:not(:first-of-type)").css("display","none"); ! $("dt").click(function(){ ! ! if($("+dd",this).css("display")=="none"){ ! ! ! $("dd").slideUp(400); ! ! ! $("+dd",this).slideDown(400); ! ! } ! }); }); dt要素がクリックされた際の 処理を設定 残り4行！
- 69. if文 $(function(){ ! $("dd:not(:first-of-type)").css("display","none"); ! $("dt").click(function(){ ! ! if($("+dd",this).css("display")=="none"){ ! ! ! $("dd").slideUp(400); ! ! ! $("+dd",this).slideDown(400); ! ! } ! }); }); if(...)の条件が正しい場合のみ {...}の処理を実行
- 70. 条件式 $(function(){ ! $("dd:not(:first-of-type)").css("display","none"); ! $("dt").click(function(){ ! ! if($("+dd",this).css("display")=="none"){ ! ! ! $("dd").slideUp(400); ! ! ! $("+dd",this).slideDown(400); ! ! } ! }); }); ==の左右の値が正しいかチェック
- 73. 条件文 $(function(){ ! $("dd:not(:first-of-type)").css("display","none"); ! $("dt").click(function(){ ! ! if($("+dd",this).css("display")=="none"){ ! ! ! $("dd").slideUp(400); ! ! ! $("+dd",this).slideDown(400); ! ! } ! }); }); クリックされたdt要素の 次に登場するdd要素の displayプロパティが「none」の場合は {...}内の処理を実行する 残り2行！
- 74. スライドアニメーション $(function(){ ! $("dd:not(:first-of-type)").css("display","none"); ! $("dt").click(function(){ ! ! if($("+dd",this).css("display")=="none"){ ! ! ! $("dd").slideUp(400); ! ! ! $("+dd",this).slideDown(400); ! ! } ! }); }); スライドアニメーションで アコーディオンパネルの開閉を行う 終了！
- 76. Thank You!