jQueryの基礎を学ぼう              (・ω・)!12年9月23日日曜日
自己紹介              名前:河本結理(kawamoto yuri)              職業:制作アシスタント              所属:アクアリング              Twitter:@shiriweb   ...
今日やる事              jQueryを使って簡単              なギャラリーを作る12年9月23日日曜日
その前に12年9月23日日曜日
jQueryとは                   Javascriptライブラリ                   CSSのように記述                   クロスブラウザに対応し                   ている...
jQueryで出来る事              CSSを操作できる              HTMLも操作できる              コンテンツに様々な動きを与える12年9月23日日曜日
jQueryを学ぶ              jQueryダウンロード              HTMLへ組み込み              セレクタ              メソッド              イベント          ...
1.jQueryダウンロード                 このボタンをクリック                 http:/jquery.com/12年9月23日日曜日
2.HTMLに組み込む                  scriptタグの中に読み込ませる12年9月23日日曜日
$(document).ready()とは              DOMが読み込み終わったら(実行可能)実行する              (Document Object Model)htmlの各要素、たとえば<p>とか<img>とか  ...
$(document).ready()とは              JavaScriptは読み込まれるとすぐ実行する              onloadイベントがあるが、動画、画像、音声な              どの外部リソースも全て...
$(document).ready()とは                 $(function(){ ... });と同じ意味12年9月23日日曜日
セレクタ                     $(“p”).jQueryの命令              $("p")…pタグを選択ダブルクォーテーションでも              $(‘p’)…シングルクォーテーションでも      ...
セレクタ                           CSSで使われるセレクタ              グループセレクタ       $(“要素1,要素2”)        まとめて選択                        ...
jQueyラッパー              $()が返すのはDOM要素の配列を含む特別な              JavaScriptオブジェクト              このオブジェクトにはメソッドが定義されている           ...
実際見てみました               要素を格納した変数に              配列でアクセスできました!12年9月23日日曜日
ちなみに…                 IDだと一つしか取得できないので、                0番目の配列しかアクセス出来ません。          マークアップする際に同名のIDは一つだけという制限が身に染みま        ...
メソッド              メソッドとは要素に対しての操作方法、手法12年9月23日日曜日
メソッド              $(“要素名”).メソッド(パラメータ);                            ↓                $(“p”).css(“color”,”#fee”);12年9月23日日曜日
メソッド                                       属性値の変更と取得                attr(... , ...)              指定した属性の値を変更              ...
メソッド                  jQueryはメソッドチェーンで                 複数メソッドを指定する事が可能                         ↓      $(“要素名”).メソッド(パラメータ)...
変数              小さなストック場所              var hoge ; … hogeという変数を宣言              var hoge , huga; … 複数宣言              var hog...
変数                          要素を変数に格納出来る              var hoge = $(“div#hoge”);              以下のように指定ができる              hoge...
イベント               自分が意図したタイミングで実行させたい時に使う              $("セレクタ"). イベント(function(){                イベント発生時の処理             ...
イベント                <p id="main">                     	 サンプルテキスト                </p>                <p id=”test”></p>     ...
イベント                <p id="main">                     	 サンプルテキスト                </p>                <p id=”test”></p>     ...
$(this)ってなに                            イベントが発生した元の要素を指す                                           今回だとここ           $(funct...
イベント                 <p id="main">                      	 サンプルテキスト                  </p>                 <p id=”test”></p>...
イベント                 <p id="main">                      	 サンプルテキスト                 セットされた文字                  </p>         ...
ではギャラリー作ってみましょう12年9月23日日曜日
完成図12年9月23日日曜日
まずはHTML              1.画像差し替えの対象要素一つ              2.差し替え用のサムネイルいくつか         <div id="main">               	 <img src="imag...
まずはHTML              1.画像差し替えの対象要素一つ              2.差し替え用のサムネイルいくつか         <div id="main">               	 <img src="imag...
次はCSS              body{                position:relative              }                             基準となる領域              ...
jQueryを実装する                <div id="main">                      	 <img src="images/01.jpg" alt="">                </div>  ...
イベント                 <div id="main">                       	 <img src="images/01.jpg" alt="">                 </div>      ...
イベント                 <div id="main">                       	 <img src="images/01.jpg" alt="">                 </div>      ...
アニメーション              <div id="main">                    	 <img src="images/01.jpg" alt="">              </div>            ...
アニメーション              <div id="main">                    	 <img src="images/01.jpg" alt="">              </div>            ...
fadeOutメソッド                    main.stop().fadeOut(300, function(){           	 	 	 	 main.attr(src, getsrc);           	 ...
スピード                    main.stop().fadeOut(300, function(){           	 	 	 	 main.attr(src, getsrc);           	 	 	 })....
コールバック関数                    main.stop().fadeOut(300, function(){           	 	 	 	 main.attr(src, getsrc);           	 	 	...
コールバック関数                    main.stop().fadeOut(300, function(){           	 	 	 	 main.attr(src, getsrc);           	 	 	...
stopメソッド                    main.stop().fadeOut(300, function(){           	 	 	 	 main.attr(src, getsrc);           	 	 	...
まとめ              jQueryはJavaScriptを簡単に書くためのライブラリ              CSSと同じ書き方で要素を選択出来る              要素に命令するときはメソッドを付けてやる        ...
では、作ってみましょう              残った時間作ってみましょう。              周りと相談しながらでも大丈夫です。              出来た人は発表して工夫した点など教えてください!              ...
Upcoming SlideShare
Loading in …5
×

第一回Miim勉強会

928 views
786 views

Published on

miimさん主催のjQuery勉強会で使ったスライドです。

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

No Downloads
Views
Total views
928
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
4
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

第一回Miim勉強会

  1. 1. jQueryの基礎を学ぼう (・ω・)!12年9月23日日曜日
  2. 2. 自己紹介 名前:河本結理(kawamoto yuri) 職業:制作アシスタント 所属:アクアリング Twitter:@shiriweb Facebook:yuri.kawamoto.94 ポートフォリオ:http://cascade.sub.jp/wp/12年9月23日日曜日
  3. 3. 今日やる事 jQueryを使って簡単 なギャラリーを作る12年9月23日日曜日
  4. 4. その前に12年9月23日日曜日
  5. 5. jQueryとは Javascriptライブラリ CSSのように記述 クロスブラウザに対応し ている12年9月23日日曜日
  6. 6. jQueryで出来る事 CSSを操作できる HTMLも操作できる コンテンツに様々な動きを与える12年9月23日日曜日
  7. 7. jQueryを学ぶ jQueryダウンロード HTMLへ組み込み セレクタ メソッド イベント 変数12年9月23日日曜日
  8. 8. 1.jQueryダウンロード このボタンをクリック http:/jquery.com/12年9月23日日曜日
  9. 9. 2.HTMLに組み込む scriptタグの中に読み込ませる12年9月23日日曜日
  10. 10. $(document).ready()とは DOMが読み込み終わったら(実行可能)実行する (Document Object Model)htmlの各要素、たとえば<p>とか<img>とか そういった類の要素にアクセスする仕組みのこと12年9月23日日曜日
  11. 11. $(document).ready()とは JavaScriptは読み込まれるとすぐ実行する onloadイベントがあるが、動画、画像、音声な どの外部リソースも全て読み込み終わってない と実行されない12年9月23日日曜日
  12. 12. $(document).ready()とは $(function(){ ... });と同じ意味12年9月23日日曜日
  13. 13. セレクタ $(“p”).jQueryの命令 $("p")…pタグを選択ダブルクォーテーションでも $(‘p’)…シングルクォーテーションでも $(“p.red”)…ドットでつないでclassで指定 $(“p#red”)…シャープでつないでID指定12年9月23日日曜日
  14. 14. セレクタ CSSで使われるセレクタ グループセレクタ $(“要素1,要素2”) まとめて選択 CSS2で使われるセレクタ 子セレクタ $(“親要素 > 子要素”) 直下の要素選択 隣接セレクタ $(“要素1 + 要素2”) 特定要素の次の要素を選択 CSS3で使われるセレクタ 否定疑似クラス $(“要素1:not(要素2)”) 要素2を除いた特定の要素 間接セレクタ $(“要素1 ~ 要素2”) 要素1~要素2まで jQuery独自フィルター eqフィルタ $(“要素:eq(番号)”) 指定した番号(0から) その他↓ http://semooh.jp/jquery/api/selectors/12年9月23日日曜日
  15. 15. jQueyラッパー $()が返すのはDOM要素の配列を含む特別な JavaScriptオブジェクト このオブジェクトにはメソッドが定義されている ➡ この構造をラッパーと呼ぶ12年9月23日日曜日
  16. 16. 実際見てみました 要素を格納した変数に 配列でアクセスできました!12年9月23日日曜日
  17. 17. ちなみに… IDだと一つしか取得できないので、 0番目の配列しかアクセス出来ません。 マークアップする際に同名のIDは一つだけという制限が身に染みま す。。12年9月23日日曜日
  18. 18. メソッド メソッドとは要素に対しての操作方法、手法12年9月23日日曜日
  19. 19. メソッド $(“要素名”).メソッド(パラメータ); ↓ $(“p”).css(“color”,”#fee”);12年9月23日日曜日
  20. 20. メソッド 属性値の変更と取得 attr(... , ...) 指定した属性の値を変更 class属性の追加と削除 addClass(...) class名を追加 removeClass(...) class名を削除 要素の置き換え replaceWith(...) 要素を他の要素に置き換える CSSの制御 css(... , ...) 指定したCSSプロパティを設定する css({...}) 連続してCSSプロパティを指定する その他↓ http://s3pw.com/qrefy/12年9月23日日曜日
  21. 21. メソッド jQueryはメソッドチェーンで 複数メソッドを指定する事が可能 ↓ $(“要素名”).メソッド(パラメータ).メソッド(パラメータ).メソッド(パラメータ); メソッドは自分の仕事を終えた後同じ要素を返す12年9月23日日曜日
  22. 22. 変数 小さなストック場所 var hoge ; … hogeという変数を宣言 var hoge , huga; … 複数宣言 var hoge = “miim”; … hoge変数に文字列を代入12年9月23日日曜日
  23. 23. 変数 要素を変数に格納出来る var hoge = $(“div#hoge”); 以下のように指定ができる hoge.css(“color”,”#fee”); 他にも便利な使い方いっぱいです!12年9月23日日曜日
  24. 24. イベント 自分が意図したタイミングで実行させたい時に使う $("セレクタ"). イベント(function(){ イベント発生時の処理 });12年9月23日日曜日
  25. 25. イベント <p id="main"> サンプルテキスト </p> <p id=”test”></p> $(function(){ $("p#main").click(function(){ テキストをクリックしたら }); });12年9月23日日曜日
  26. 26. イベント <p id="main"> サンプルテキスト </p> <p id=”test”></p> $(function(){ $("p#main").click(function(){ var gettext = $(this).text(); テキストを取得 }); });12年9月23日日曜日
  27. 27. $(this)ってなに イベントが発生した元の要素を指す 今回だとここ $(function(){ $("p#main").click(function(){ var gettext = $(this).text(); }); });12年9月23日日曜日
  28. 28. イベント <p id="main"> サンプルテキスト </p> <p id=”test”></p> $(function(){ $("p#main").click(function(){ 取得した値をセット var gettext = $(this).text(); $(“p#test”).text(gettext); }); });12年9月23日日曜日
  29. 29. イベント <p id="main"> サンプルテキスト セットされた文字 </p> <p id=”test”>サンプルテキスト</p> $(function(){ $("p#main").click(function(){ var gettext = $(this).text(); $(“p#test”).text(gettext); }); });12年9月23日日曜日
  30. 30. ではギャラリー作ってみましょう12年9月23日日曜日
  31. 31. 完成図12年9月23日日曜日
  32. 32. まずはHTML 1.画像差し替えの対象要素一つ 2.差し替え用のサムネイルいくつか <div id="main"> <img src="images/01.jpg" alt=""> </div> <ul class="cf"> <li><img src="images/01.jpg" height="100" alt=""></li> <li><img src="images/02.jpg" height="100" alt=""></li> </ul>12年9月23日日曜日
  33. 33. まずはHTML 1.画像差し替えの対象要素一つ 2.差し替え用のサムネイルいくつか <div id="main"> <img src="images/01.jpg" alt=""> </div> <ul class="cf"> <li><img src="images/01.jpg" height="100" alt=""></li> <li><img src="images/02.jpg" height="100" alt=""></li> </ul>12年9月23日日曜日
  34. 34. 次はCSS body{ position:relative } 基準となる領域 ul{ position:absolute } 絶対位置 ul li{ float:left } 横並びにする12年9月23日日曜日
  35. 35. jQueryを実装する <div id="main"> <img src="images/01.jpg" alt=""> </div> <ul class="cf"> <li><img src="images/01.jpg" height="100" alt=""></li> <li><img src="images/02.jpg" height="100" alt=""></li> </ul> $(function(){ $("ul li img").click(function(){ 画像をクリックしたら }); });12年9月23日日曜日
  36. 36. イベント <div id="main"> <img src="images/01.jpg" alt=""> </div> <ul class="cf"> <li><img src="images/01.jpg" height="100" alt=""></li> <li><img src="images/02.jpg" height="100" alt=""></li> </ul> $(function(){ $("ul li img").click(function(){ var getsrc = $(this).attr(src); ファイルパスを取得 }); });12年9月23日日曜日
  37. 37. イベント <div id="main"> <img src="images/01.jpg" alt=""> </div> <ul class="cf"> <li><img src="images/01.jpg" height="100" alt=""></li> <li><img src="images/02.jpg" height="100" alt=""></li> </ul> $(function(){ $("ul li img").click(function(){ 取得した値をセット var getsrc = $(this).attr(src); $(“div#main”).find(‘img’).attr(‘src’,getsrc); }); });12年9月23日日曜日
  38. 38. アニメーション <div id="main"> <img src="images/01.jpg" alt=""> </div> <ul class="cf"> <li><img src="images/01.jpg" height="100" alt=""></li> <li><img src="images/02.jpg" height="100" alt=""></li> </ul> フェードアウトの $(function(){ $("ul li img").click(function(){ アニメーションを設定 var getsrc = $(this).attr(src); $(“div#main”).find(‘img’).stop().fadeOut(300, function(){ $(“div#main”).find(‘img’).attr(src, getsrc); }).fadeIn(300); }); });12年9月23日日曜日
  39. 39. アニメーション <div id="main"> <img src="images/01.jpg" alt=""> </div> <ul class="cf"> <li><img src="images/01.jpg" height="100" alt=""></li> <li><img src="images/02.jpg" height="100" alt=""></li> </ul> $(“div#main”).find(‘img’)が $(function(){ $("ul li img").click(function(){ 多いので変数に入れましょう! var getsrc = $(this).attr(src); var main = $(“div#main”).find(‘img’); main.stop().fadeOut(300, function(){ main.attr(src, getsrc); }).fadeIn(300); }); });12年9月23日日曜日
  40. 40. fadeOutメソッド main.stop().fadeOut(300, function(){ main.attr(src, getsrc); }).fadeIn(300); fadeOut([speed], [callback])12年9月23日日曜日
  41. 41. スピード main.stop().fadeOut(300, function(){ main.attr(src, getsrc); }).fadeIn(300); fadeOut([speed], [callback])12年9月23日日曜日
  42. 42. コールバック関数 main.stop().fadeOut(300, function(){ main.attr(src, getsrc); }).fadeIn(300); fadeOut([speed], [callback])12年9月23日日曜日
  43. 43. コールバック関数 main.stop().fadeOut(300, function(){ main.attr(src, getsrc); }).fadeIn(300);12年9月23日日曜日
  44. 44. stopメソッド main.stop().fadeOut(300, function(){ main.attr(src, getsrc); }).fadeIn(300);12年9月23日日曜日
  45. 45. まとめ jQueryはJavaScriptを簡単に書くためのライブラリ CSSと同じ書き方で要素を選択出来る 要素に命令するときはメソッドを付けてやる イベント発生時に命令を指定する事が出来る12年9月23日日曜日
  46. 46. では、作ってみましょう 残った時間作ってみましょう。 周りと相談しながらでも大丈夫です。 出来た人は発表して工夫した点など教えてください! 何回発表しても大丈夫です。12年9月23日日曜日

×