Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Rails Girls Weekly - 初探前端網頁技術 JavaScript 2/3

Rails Girls Weekly - 初探前端網頁技術 JavaScript 2/3
2016/06/21

  • Loggen Sie sich ein, um Kommentare anzuzeigen.

Rails Girls Weekly - 初探前端網頁技術 JavaScript 2/3

  1. 1. Rails Girls Weekly - week 2 Kuro Hsu 2016/06/21
  2. 2. about me • Kuro Hsu • • kurotanshi [at] gmail.com • http://kuro.tw
  3. 3. https://jsbin.com/ JS BIN
  4. 4. jQuery $('#header') // id="header" $('.header') // class="header" $('div') // <div> $('div, p') // <div> <p> $('body > .tag') // body div $('body div') // body div ( ) $('div.body') // class="body" div
  5. 5. jQuery jQuery jQuery
  6. 6. jQuery jQuery jQuery
  7. 7. .css( ) DOM
  8. 8. event • JavaScript • ( ) • ( ) -> ( )
  9. 9. $(SELECTOR).on( , callback); .btn [ ]
 —> alert('Hello') [ ]
  10. 10. this this DOM $() jQuery jQuery http://goo.gl/tebAOR
  11. 11. jQuery
  12. 12. • A B
  13. 13. jQuery Effects Lab Page https://goo.gl/ktdOD2
  14. 14. http://goo.gl/22hOij
  15. 15. .show() / .hide() • $('.block').show(); $('.block').hide(); $('.block').show(500); $('.block').show('slow'); $('.block').show('high'); $('.block').hide(500);
  16. 16. http://goo.gl/0wiW5q
  17. 17. fadeIn() / fadeOut() $('.block').fadeIn(); $('.block').fadeOut(); $('.block').fadeIn(500); $('.block').fadeIn('slow'); $('.block').fadeIn('high'); $('.block').fadeOut(500); •
  18. 18. http://goo.gl/0wiW5q
  19. 19. .toggle() / .fadeToggle() $('.block').toggle(); $('.block').fadeToggle();
  20. 20. [ ] https://goo.gl/GrnV8J
  21. 21. slideDown() / slideUp() / slideToggle() • / / 
 $('.block').slideDown(); $('.block').slideUp(); $('.block').slideDown(500); $('.block').slideDown('slow'); $('.block').slideToggle();
  22. 22. [ ] http://goo.gl/ook3xo
  23. 23. jQuery animate 
 $(selector).animate( 
 { CSS }, [ ], [ ], [callback]); 
 $("div").animate({ 'left': '150px', 'bottom': '100px' }, 1000);
  24. 24. $("div").animate({ 'height': '50px' }, 600); $("div").animate({ 'width': '150px' }, 1000); $("div").animate({ 'opacity': 0.5 }, 600); • jQuery animate http://goo.gl/QGrgOh
  25. 25. http://goo.gl/d8tnaX
  26. 26. http://goo.gl/HGYlUS
  27. 27. https://goo.gl/lWz1eq
  28. 28. : if - else if ( A ) { …… } else{ …… }
  29. 29. : if - else if ( 10 > 100 ) { alert('A'); } else{ alert('B'); }
  30. 30. .position() • top left $('.block').position(); $('.block').position().top; $('.block').position().left;
  31. 31. .stop() $('div').on('click', function(){ $(this).stop() 
 .animate({'height': '+=50px'}, 1000); }); • .stop() http://goo.gl/1BjU7p
  32. 32. jQuery Easing Plugin https://github.com/gdsmith/jquery.easing
  33. 33. $('div').on('click', function(){ $(this).animate( {'height': '200px'}, 1000, 'easeOutBack'); }); http://goo.gl/oLM2vy
  34. 34. jQuery Advanced Effects Lab https://goo.gl/yfTCZp
  35. 35. • easing • Easing http://easings.net/zh-tw
  36. 36. week 2 - • jQuery • show / hide / toggle • fadeIn / fadeOut / fadeToggle • slideDown / slideUp / slideToggle • jQuery Easing
  37. 37. Thanks

×