Learning jQuery
•
5 gefällt mir•841 views
デザイナ向け「はじめてのjQuery」 http://d.hatena.ne.jp/jdg/20081127/1227747020
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (19)
Andere mochten auch
Andere mochten auch (20)
Ähnlich wie Learning jQuery
Ähnlich wie Learning jQuery (20)
Mehr von taiju higashi
Kürzlich hochgeladen
Kürzlich hochgeladen (9)
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. さようなら