Learning jQuery
5 likes849 views
デザイナ向け「はじめてのjQuery」 http://d.hatena.ne.jp/jdg/20081127/1227747020
Learning jQuery
- 1. はじめてのjQuery
- 5. ぶっちゃけ
- 7. それをおいておいても
- 9. 三拍子 ってる
- 11. 表面的な知識で終わらず
- 13. お作法を 覚えましょう
- 17. はいはい
- 18. ダウンロードしたら 読み込み準備
- 20. <head> <title>たいとる</title> <meta http-equiv= Content-Script-Type content= text/javascript /> <script type= text/javascript src= js/jquery.js ></script> </head>
- 23. <head> <title>たいとる</title> <meta http-equiv= Content-Script-Type content= text/javascript /> <script type= text/javascript src= js/jquery.js ></script> <script type= text/javascript src= js/original.js ></script> </head>
- 24. 準備完了
- 27. 学ぶことはふたつ
- 28. 魔法の呪文 と メソッド
- 29. 魔法の呪文
- 31. 臨
- 32. 兵
- 33. 闘
- 34. 者
- 35. 皆
- 36. 陳
- 37. 裂
- 38. 在
- 39. 前ッ!!
- 42. 押さえるべき基本
- 43. ○○を○○した時 ○○を○○する
- 44. jQueryで
- 45. ○○を○○した時 ○○を○○する
- 49. /* CSS */ a:link { color: black; } a:hover { color: red; }
- 50. /* CSS */ a:link { color: black; } a:hover { color: red; } aをhoverした時 colorにredをセットする (そうでない時はblack)
- 51. jQueryでは こう書きます
- 52. /* jQuery */ $( a ).hover( function() { $(this).css( color , red ); }, function() { $(this).css( color , black ); } ); aをhoverした時 colorにredをセットする (そうでない時はblack)
- 53. うっ、、、 難しい orz...
- 57. /* jQuery */ $( a ).hover( function() { $(this).css( color , red ); }, function() { $(this).css( color , black ); } ); ※黒字の箇所は魔法の呪文です テクマクマヤコンと唱えてください
- 58. /* jQuery */ aを.hover( function() { $(this).css( color , red ); }, function() { $(this).css( color , black ); } ); ※黒字の箇所は魔法の呪文です テクマクマヤコンと唱えてください
- 59. /* jQuery */ aを.hoverした時( function() { $(this).css( color , red ); }, function() { $(this).css( color , black ); } ); ※黒字の箇所は魔法の呪文です テクマクマヤコンと唱えてください
- 60. /* jQuery */ aを.hoverした時( function() { それ(a)の.css( color , red ); }, function() { $(this).css( color , black ); } ); ※黒字の箇所は魔法の呪文です テクマクマヤコンと唱えてください
- 61. /* jQuery */ aを.hoverした時( function() { それ(a)の.CSSの( color , red ); }, function() { $(this).css( color , black ); } ); ※黒字の箇所は魔法の呪文です テクマクマヤコンと唱えてください
- 62. /* jQuery */ aを.hoverした時( function() { それ(a)の.CSSの(colorに, redをセットする); }, function() { $(this).css( color , black ); } ); ※黒字の箇所は魔法の呪文です テクマクマヤコンと唱えてください
- 63. /* jQuery */ aを.hoverした時( function() { それ(a)の.CSSの(colorに, redをセットする); }そうでない時 function() { $(this).css( color , black ); } ); ※黒字の箇所は魔法の呪文です テクマクマヤコンと唱えてください
- 64. /* jQuery */ aを.hoverした時( function() { それ(a)の.CSSの(colorに, redをセットする); }そうでない時 function() { それ(a)の. …の ( …に, blackをセットする); } ); ※黒字の箇所は魔法の呪文です テクマクマヤコンと唱えてください
- 65. これがお作法です
- 66. 応用してみましょう
- 67. /* jQuery */ $( p ).click( function() { $( dl ).css( margin-left , 50px ); } );
- 68. /* jQuery */ $( p ).click( function() { $( dl ).css( margin-left , 50px ); } ); pをクリックした時 dlのmargin-leftに 50pxをセットする
- 70. おさらい
- 71. ○○を○○した時 ○○を○○する
- 73. /* jQuery */ $(CSSセレクタ).イベント(function() { $(CSSセレクタ).メソッド; }); /* 無理矢理日本語に当てはめた場合 ○○を.○○した時(function() { ○○を.○○する; }); */ 大体こんな感じで 記述できるので
- 76. リファレンスを使おう
- 81. このサイトを使いつつ
- 83. 必要なセレクタを探す
- 86. 覚えるべきセレクタ $( #id ) $( .class ) $( Element ) $( Element element ) 基本的にCSSとほぼ同じ書き方
- 89. 必要なイベントを探す
- 92. 覚えるべきイベント $( セレクタ ).hover(over, out) $( セレクタ ).toggle(fn1,fn2 ) $( セレクタ ).click() $( セレクタ ).blur() $( セレクタ ).change() $( セレクタ ).focus()
- 94. 必要なメソッドを探す
- 98. 最後に
- 99. jQueryを 卒業して
- 101. DOMを直接 操れるようになると
- 103. ○E潰そう的な意味で
- 104. それでは 今回はこれにて
- 105. さようなら