Learning jQuery

1,191 views

Published on

デザイナ向け「はじめてのjQuery」
http://d.hatena.ne.jp/jdg/20081127/1227747020

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,191
On SlideShare
0
From Embeds
0
Number of Embeds
102
Actions
Shares
0
Downloads
23
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Learning jQuery

  1. 1. はじめてのjQuery
  2. 2. なぜ jQueryを使うのか
  3. 3. デザイナ寄りの JavaScriptライブラリだから
  4. 4. 他のJavaScriptライブラリは プログラマじゃないと 敷居が高い orz...
  5. 5. ぶっちゃけ
  6. 6. CSSできるなら jQueryもできる (ようになるはず)
  7. 7. それをおいておいても
  8. 8. 早い (ソースが軽く軽快) 安い (学習コスト) うまい (高機能)
  9. 9. 三拍子 ってる
  10. 10. 今より少し知識を補充するだけで いろんなことが できるようになります
  11. 11. 表面的な知識で終わらず
  12. 12. ある程度 使いこなせるようになるため
  13. 13. お作法を 覚えましょう
  14. 14. ちょっと jQueryを取ってくる
  15. 15. 「J」って言ってるのに Japanじゃないお (/_;)
  16. 16. はいはい
  17. 17. ダウンロードしたら 読み込み準備
  18. 18. head要素の中で jQueryを読み込みます
  19. 19. <head> <title>たいとる</title> <meta http-equiv= Content-Script-Type content= text/javascript /> <script type= text/javascript src= js/jquery.js ></script> </head>
  20. 20. CSSの読み込みと ほとんど同じですね
  21. 21. 次は自分で作る jsファイルを 読み込みます
  22. 22. <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>
  23. 23. 準備完了
  24. 24. これから お作法を 学んでいきます
  25. 25. すでに(X)HTMLとCSSにて 要素、属性、 セレクタ、プロパティ が 使えているはずなので
  26. 26. 学ぶことはふたつ
  27. 27. 魔法の呪文 と メソッド
  28. 28. 魔法の呪文
  29. 29. original.jsという 空のファイルを作って その中に魔法の呪文を唱えます
  30. 30.
  31. 31.
  32. 32.
  33. 33.
  34. 34.
  35. 35.
  36. 36.
  37. 37.
  38. 38. 前ッ!!
  39. 39. $(function() { //魔法の呪文が発動しました });
  40. 40. $(function() { //魔法の呪文が発動しました //この中にいろんなコードを書いていきます });
  41. 41. 押さえるべき基本
  42. 42. ○○を○○した時 ○○を○○する
  43. 43. jQueryで
  44. 44. ○○を○○した時 ○○を○○する
  45. 45. を記述すると いろんなことが できます
  46. 46. 実際のコードも ○○を○○した時 ○○を○○する が基本になります
  47. 47. CSSで これに近いお作法を 使っていますね
  48. 48. /* CSS */ a:link { color: black; } a:hover { color: red; }
  49. 49. /* CSS */ a:link { color: black; } a:hover { color: red; } aをhoverした時 colorにredをセットする (そうでない時はblack)
  50. 50. jQueryでは こう書きます
  51. 51. /* jQuery */ $( a ).hover( function() { $(this).css( color , red ); }, function() { $(this).css( color , black ); } ); aをhoverした時 colorにredをセットする (そうでない時はblack)
  52. 52. うっ、、、 難しい orz...
  53. 53. jQueryが使えれば CSSでできなかったことが できるようになるので 少しだけがんばりましょう
  54. 54. さっきのコードを 解読してみましょう
  55. 55. ○○を○○した時 ○○を○○する が 少し複雑になっただけです
  56. 56. /* jQuery */ $( a ).hover( function() { $(this).css( color , red ); }, function() { $(this).css( color , black ); } ); ※黒字の箇所は魔法の呪文です テクマクマヤコンと唱えてください
  57. 57. /* jQuery */ aを.hover( function() { $(this).css( color , red ); }, function() { $(this).css( color , black ); } ); ※黒字の箇所は魔法の呪文です テクマクマヤコンと唱えてください
  58. 58. /* jQuery */ aを.hoverした時( function() { $(this).css( color , red ); }, function() { $(this).css( color , black ); } ); ※黒字の箇所は魔法の呪文です テクマクマヤコンと唱えてください
  59. 59. /* jQuery */ aを.hoverした時( function() { それ(a)の.css( color , red ); }, function() { $(this).css( color , black ); } ); ※黒字の箇所は魔法の呪文です テクマクマヤコンと唱えてください
  60. 60. /* jQuery */ aを.hoverした時( function() { それ(a)の.CSSの( color , red ); }, function() { $(this).css( color , black ); } ); ※黒字の箇所は魔法の呪文です テクマクマヤコンと唱えてください
  61. 61. /* jQuery */ aを.hoverした時( function() { それ(a)の.CSSの(colorに, redをセットする); }, function() { $(this).css( color , black ); } ); ※黒字の箇所は魔法の呪文です テクマクマヤコンと唱えてください
  62. 62. /* jQuery */ aを.hoverした時( function() { それ(a)の.CSSの(colorに, redをセットする); }そうでない時 function() { $(this).css( color , black ); } ); ※黒字の箇所は魔法の呪文です テクマクマヤコンと唱えてください
  63. 63. /* jQuery */ aを.hoverした時( function() { それ(a)の.CSSの(colorに, redをセットする); }そうでない時 function() { それ(a)の. …の ( …に, blackをセットする); } ); ※黒字の箇所は魔法の呪文です テクマクマヤコンと唱えてください
  64. 64. これがお作法です
  65. 65. 応用してみましょう
  66. 66. /* jQuery */ $( p ).click( function() { $( dl ).css( margin-left , 50px ); } );
  67. 67. /* jQuery */ $( p ).click( function() { $( dl ).css( margin-left , 50px ); } ); pをクリックした時 dlのmargin-leftに 50pxをセットする
  68. 68. こんな感じで いくらでも 応用がききます
  69. 69. おさらい
  70. 70. ○○を○○した時 ○○を○○する
  71. 71. おおざっぱに jQueryで表現すると
  72. 72. /* jQuery */ $(CSSセレクタ).イベント(function() { $(CSSセレクタ).メソッド; }); /* 無理矢理日本語に当てはめた場合 ○○を.○○した時(function() { ○○を.○○する; }); */ 大体こんな感じで 記述できるので
  73. 73. メソッドを押さえるだけで ある程度のことはできる 慣れの問題です
  74. 74. デザイナは あと一歩で手が届く技術
  75. 75. リファレンスを使おう
  76. 76. セレクタ、イベント、メソッドで jQueryが記述できるとわかったら
  77. 77. リファレンスを使いながら 必要な情報を調達して 動かしてみましょう
  78. 78. jQuery日本語リファレンス http://semooh.jp/jquery/
  79. 79. このサイトを使いつつ
  80. 80. 必要なセレクタと 必要なイベントと 必要なメソッドの 情報調達をします
  81. 81. 必要なセレクタを探す
  82. 82. セレクタは Selectorsという項目で 情報調達できます
  83. 83. 覚えるべきセレクタ $( #id ) $( .class ) $( Element ) $( Element element ) 基本的にCSSとほぼ同じ書き方
  84. 84. 特に 文書内一意のid属性は 非常に使いやすい
  85. 85. プログラマもよく使う値なので 相談しながら設定しましょう
  86. 86. 必要なイベントを探す
  87. 87. イベントは Eventsという項目で 情報調達できます
  88. 88. 覚えるべきイベント $( セレクタ ).hover(over, out) $( セレクタ ).toggle(fn1,fn2 ) $( セレクタ ).click() $( セレクタ ).blur() $( セレクタ ).change() $( セレクタ ).focus()
  89. 89. イベントは単語そのままなので すぐ覚えられます
  90. 90. 必要なメソッドを探す
  91. 91. Attributes Manipulation CSS Effects あたり
  92. 92. Attributes  属性に関するメソッド Manipulation  要素に関するメソッド CSS  CSSに関するメソッド Effects  エフェクト効果に関するメソッド
  93. 93. メソッドはケースバイケースですが HTML、CSS、エフェクトは 操れるようになるといいと思います
  94. 94. 最後に
  95. 95. jQueryを 卒業して
  96. 96. DOMを直接 操れるようになると
  97. 97. いつの日か 連邦のMSにも 勝てる日がくるさ
  98. 98. ○E潰そう的な意味で
  99. 99. それでは 今回はこれにて
  100. 100. さようなら

×