はじめてのjQuery入門 01 2013年7月14日(日)

1,002 views
914 views

Published on

HTML5+α初心者勉強会 @福岡 第2回
2013年7月14日(日)
発表資料です〜!

Published in: Business, Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,002
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
8
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

はじめてのjQuery入門 01 2013年7月14日(日)

  1. 1. 13年7月15日月曜日
  2. 2. 13年7月15日月曜日
  3. 3. 13年7月15日月曜日
  4. 4. 13年7月15日月曜日
  5. 5. 13年7月15日月曜日
  6. 6. 13年7月15日月曜日
  7. 7. 13年7月15日月曜日
  8. 8. 13年7月15日月曜日
  9. 9. <html> <body> <div id=”tonsoku”></div> <div id=”tonkatsu”></div> <div id=”tonkotsu”></div> </body> </html> $(‘#tonkatsu’) 13年7月15日月曜日
  10. 10. $(‘#tonkatsu’) 13年7月15日月曜日
  11. 11. <body> <div id=”tonsoku” class=”udon” ></div> <div id=”tonkatsu”></div> <div id=”tonkotsu” class=”udon” ></div> </body> id指定による取得 $(‘#tonkatsu’) class指定による取得 $(‘.udon’) tag指定による取得 $(‘div’) 13年7月15日月曜日
  12. 12. <body> <div id=”tonsoku” class=”udon” ></div> <div id=”tonkatsu”></div> <div id=”tonkotsu” class=”udon” ></div> </body> id指定による取得 $(‘#tonkatsu’) class指定による取得 $(‘.udon’) tag指定による取得 $(‘div’) 13年7月15日月曜日
  13. 13. <body> <div id=”tonsoku” class=”udon” ></div> <div id=”tonkatsu”></div> <div id=”tonkotsu” class=”udon” ></div> </body> id指定による取得 $(‘#tonkatsu’) class指定による取得 $(‘.udon’) tag指定による取得 $(‘div’) 13年7月15日月曜日
  14. 14. CSSと同じ記述で取得できます! 分かりやすいですね。 13年7月15日月曜日
  15. 15. 13年7月15日月曜日
  16. 16. <body> <div id=”tonsoku”>豚足</div> <div id=”tonkatsu”>トンカツ</div> <div id=”tonkotsu”>豚骨</div> </body> 豚足   豚骨 $(‘#tonkatsu’).css(‘color’,‘red’); トンカツ 13年7月15日月曜日
  17. 17. $(‘#tonkatsu’).css( ‘color’ , ‘red’ ); var color = $(‘#tonkatsu’).css( ‘color’); red 13年7月15日月曜日
  18. 18. $(‘img’).attr( ‘id’ , ‘myPic’ ); var img_id = $(‘img’).attr( ‘id’ ); myPic <tag xxx=”xxx” ></tag> 13年7月15日月曜日
  19. 19. $(‘#tonsoku’).addClass( ‘on’ ); <body> <div id=”tonsoku” >豚足</div> <div id=”tonkatsu”>トンカツ</div> <div id=”tonkotsu”>豚骨</div> </body> class=”on” 13年7月15日月曜日
  20. 20. $(‘#tonsoku’).removeClass( ‘on’ ); <body> <div id=”tonsoku” >豚足</div> <div id=”tonkatsu”>トンカツ</div> <div id=”tonkotsu”>豚骨</div> </body> class=”on” 13年7月15日月曜日
  21. 21. $(‘#tonsoku’).removeClass( ‘on’ ); <body> <div id=”tonsoku” >豚足</div> <div id=”tonkatsu”>トンカツ</div> <div id=”tonkotsu”>豚骨</div> </body> 13年7月15日月曜日
  22. 22. $(‘#tonsoku’).hasClass( ‘on’ ); <body> <div id=”tonsoku” >豚足</div> <div id=”tonkatsu”>トンカツ</div> <div id=”tonkotsu”>豚骨</div> </body> class=”on” $(‘#tonkatsu’).hasClass( ‘on’ ); true false 13年7月15日月曜日
  23. 23. var $subuta=$(‘<div>酢豚</div>’); <body> <div id=”tonsoku” > </div> </body> <span>豚足</span> 13年7月15日月曜日
  24. 24. var $subuta=$(‘<div>酢豚</div>’); $(‘#tonkatsu’).append( $subuta ); <body> <div id=”tonsoku” > </div> </body> <div>酢豚</div> <span>豚足</span> 13年7月15日月曜日
  25. 25. var $subuta=$(‘<div>酢豚</div>’); $(‘#tonkatsu’).append( $subuta ); <body> <div id=”tonsoku” > </div> </body> $subuta.remove(); <span>豚足</span> 13年7月15日月曜日
  26. 26. var $subuta=$(‘<div>酢豚</div>’); $(‘#tonkatsu’).append( $subuta ); <body> <div id=”tonsoku” > </div> </body> $subuta.remove(); $(‘#tonkatsu’).empty(); 13年7月15日月曜日
  27. 27. 13年7月15日月曜日
  28. 28. <body> <div id=”tonsoku”>豚足</div> <div id=”tonkatsu”>トンカツ</div> <div id=”tonkotsu”>豚骨</div> </body>   豚骨 トンカツ 豚足 エムスタジオ様の指の素材を使わせて頂いております。 http://www.emstudio.jp/free/data1038/ 13年7月15日月曜日
  29. 29. <body> <div id=”tonsoku” >豚足</div> <div id=”tonkatsu”>トンカツ</div> <div id=”tonkotsu”>豚骨</div> </body> /* css */ .on { color:red; background-color:black; } 13年7月15日月曜日
  30. 30. $(‘#tonsoku’).on ( ‘click’, function(event){ $(this).toggleClass(‘on’); } ); $(‘#tonsoku’).bind ( ‘click’, ... とか $(‘#tonsoku’).click( ... とか も同じ動きになるよ! 13年7月15日月曜日
  31. 31. <body> <div id=”tonsoku” >豚足</div> <div id=”tonkatsu”>トンカツ</div> <div id=”tonkotsu”>豚骨</div> </body> $(‘#tonsoku’).on ( ‘click’, function(event){ $(this).toggleClass(‘on’); } ); 13年7月15日月曜日
  32. 32. $(this).toggleClass(‘on’); <body> <div id=”tonsoku” >豚足</div> <div id=”tonkatsu”>トンカツ</div> <div id=”tonkotsu”>豚骨</div> </body> 13年7月15日月曜日
  33. 33. [sample URL] http://jsdo.it/itoKami1123/AoYC 動いているデモ! 13年7月15日月曜日
  34. 34. $(‘#tonsoku’).on ( ‘click’, function(event){ $(this).toggleClass(‘on’); } ); console.log( event ); 13年7月15日月曜日
  35. 35. $(‘#tonsoku’).on ( ‘click’, function(event){ $(this).toggleClass(‘on’); } ); console.log( event ); 13年7月15日月曜日
  36. 36. $(‘#tonsoku’).on ( ‘click’, function(event){ $(this).toggleClass(‘on’); } ); console.log( event ); 13年7月15日月曜日
  37. 37. event.target event.currentTarget event.delegateTarget event.relatedTarget 13年7月15日月曜日
  38. 38. event.target event.currentTarget event.delegateTarget 13年7月15日月曜日
  39. 39. event.target event.currentTarget <div id="soto_gawa" class=”soto”> 外側だよ∼ん <div id="uchi_gawa" class=”uchi” > 内側だよ∼ん </div> </div> $('#soto_gawa').on( 'click', function( event){ console.log( 'this', this); console.log('event.target:', event.target); console.log('event.currentTarge:', event.currentTarget); }); 13年7月15日月曜日
  40. 40. event.target event.currentTarget <div id="soto_gawa" > 外側だよ∼ん <div id="uchi_gawa" > 内側だよ∼ん </div> </div> $('#soto_gawa').on( 'click', function( event){ console.log( 'this', this); console.log( 'event.target:', event.target); console.log( 'event.currentTarge:', event.currentTarget); }); div.soto_gawa div.uchi_gawa 外側をクリック内側をクリック 13年7月15日月曜日
  41. 41. div.soto_gawa div.uchi_gawa 外側をクリック内側をクリック $('#soto_gawa').on( 'click', function( event){ console.log( 'this', this); console.log( 'event.target:', event.target); console.log( 'event.currentTarge:', event.currentTarget); }); 13年7月15日月曜日
  42. 42. div.soto_gawa div.uchi_gawa 外側をクリック内側をクリック $('#soto_gawa').on( 'click', function( event){ console.log( 'this', this); console.log( 'event.target:', event.target); console.log( 'event.currentTarge:', event.currentTarget); }); 13年7月15日月曜日
  43. 43. div.soto_gawa div.uchi_gawa 内側をクリック event.target 13年7月15日月曜日
  44. 44. div.soto_gawa div.uchi_gawa 内側をクリック $('#soto_gawa').on( 'click', function( event){ console.log( 'this', this); console.log( 'event.target:', event.target); console.log( 'event.currentTarge:', event.currentTarget); }); event.target event.currentTarget 13年7月15日月曜日
  45. 45. div.soto_gawa div.uchi_gawa 内側をクリック $('#soto_gawa').on( 'click', function( event){ console.log( 'this', this); console.log( 'event.target:', event.target); console.log( 'event.currentTarge:', event.currentTarget); }); event.target event.currentTarget 13年7月15日月曜日
  46. 46. event.delegateTarget $('#soto_gawa2').on( 'click', '.uchi', function( event){ $(this).toggleClass('on'); console.log('this:', this); console.log('event.target:',event.target); console.log('event.currentTarge:',event.currentTarget); console.log('event.delegateTarge:',event.delegateTarget); } ); 13年7月15日月曜日
  47. 47. $('#soto_gawa2').on( 'click', '.uchi', function( event){ $(this).toggleClass('on'); console.log('this:', this); console.log('event.target:',event.target); console.log('event.currentTarge:',event.currentTarget); console.log('event.delegateTarge:',event.delegateTarget); } ); 13年7月15日月曜日
  48. 48. div.soto_gawa2 div.uchi 内側をクリック 13年7月15日月曜日
  49. 49. div.soto_gawa2 div.uchi 内側をクリック event.target event.currentTarget event. delegateTarget 13年7月15日月曜日
  50. 50. div.soto_gawa2 div.uchi 内側をクリック event.target event.currentTarget event. delegateTarget 13年7月15日月曜日
  51. 51. <div id="soto_gawa" class=”soto”> 外側だよ∼ん <div class=”uchi” > 内側だよ∼ん </div> </div> なので↓のように途中で追加しても $(‘#soto_gawa’).append(‘<div class=”uchi” >内2</div>’); 13年7月15日月曜日
  52. 52. <div id="soto_gawa" class=”soto”> 外側だよ∼ん <div class=”uchi” > 内側だよ∼ん </div> </div> <div class=”uchi” > 内2 </div> なので↓のように途中で追加しても $(‘#soto_gawa’).append(‘<div class=”uchi” >内2</div>’); 13年7月15日月曜日
  53. 53. 13年7月15日月曜日
  54. 54. 13年7月15日月曜日
  55. 55. 13年7月15日月曜日

×