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

1. Rails Girls Weekly
- week 2
Kuro Hsu
2016/06/21

2. about me
• Kuro Hsu
•
• kurotanshi [at] gmail.com
• http://kuro.tw

5. https://jsbin.com/
JS BIN

6. 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

7. jQuery jQuery
jQuery

8. jQuery jQuery
jQuery

9. .css( )
DOM

10. event
• JavaScript
•
( )
• ( ) -> ( )

11. $(SELECTOR).on( , callback);
.btn [ ]
—> alert('Hello') [ ]

12. this
this DOM $()
jQuery jQuery
http://goo.gl/tebAOR

13. jQuery

14. • A B

15. jQuery Effects Lab Page
https://goo.gl/ktdOD2

16. http://goo.gl/22hOij

17. .show() / .hide()
•
$('.block').show();
$('.block').hide();
$('.block').show(500);
$('.block').show('slow');
$('.block').show('high');
$('.block').hide(500);

18. http://goo.gl/0wiW5q

19. fadeIn() / fadeOut()
$('.block').fadeIn();
$('.block').fadeOut();
$('.block').fadeIn(500);
$('.block').fadeIn('slow');
$('.block').fadeIn('high');
$('.block').fadeOut(500);
•

20. http://goo.gl/0wiW5q

21. .toggle() / .fadeToggle()
$('.block').toggle();
$('.block').fadeToggle();

22. [ ]
https://goo.gl/GrnV8J

23. slideDown() / slideUp() /
slideToggle()
• / /
$('.block').slideDown();
$('.block').slideUp();
$('.block').slideDown(500);
$('.block').slideDown('slow');
$('.block').slideToggle();

24. [ ]
http://goo.gl/ook3xo

25. jQuery animate
$(selector).animate(
{ CSS }, [ ], [ ], [callback]);
$("div").animate({
'left': '150px',
'bottom': '100px'
}, 1000);

26. $("div").animate({ 'height': '50px' }, 600);
$("div").animate({ 'width': '150px' }, 1000);
$("div").animate({ 'opacity': 0.5 }, 600);
• jQuery animate
http://goo.gl/QGrgOh

27. http://goo.gl/d8tnaX

30. http://goo.gl/HGYlUS

31. https://goo.gl/lWz1eq

32. : if - else
if ( A ) {
……
}
else{
……
}

33. : if - else
if ( 10 > 100 ) {
alert('A');
}
else{
alert('B');
}

35. .position()
• top left
$('.block').position();
$('.block').position().top;
$('.block').position().left;

36. .stop()
$('div').on('click', function(){
$(this).stop()
.animate({'height': '+=50px'}, 1000);
});
• .stop()
http://goo.gl/1BjU7p

37. jQuery Easing Plugin
https://github.com/gdsmith/jquery.easing

38. $('div').on('click', function(){
$(this).animate(
{'height': '200px'}, 1000, 'easeOutBack');
});
http://goo.gl/oLM2vy

39. jQuery Advanced Effects Lab
https://goo.gl/yfTCZp

40. • easing
• Easing http://easings.net/zh-tw

41. week 2 -
• jQuery
• show / hide / toggle
• fadeIn / fadeOut / fadeToggle
• slideDown / slideUp / slideToggle
• jQuery Easing

46. Thanks