rails girls weekly - 初探前端網頁技術 javascript 2/3
TRANSCRIPT
![Page 1: Rails Girls Weekly - 初探前端網頁技術 JavaScript 2/3](https://reader033.vdocuments.us/reader033/viewer/2022051318/586fda691a28ab18428b5d1d/html5/thumbnails/1.jpg)
Rails Girls Weekly - week 2
Kuro Hsu 2016/06/21
![Page 3: Rails Girls Weekly - 初探前端網頁技術 JavaScript 2/3](https://reader033.vdocuments.us/reader033/viewer/2022051318/586fda691a28ab18428b5d1d/html5/thumbnails/3.jpg)
![Page 4: Rails Girls Weekly - 初探前端網頁技術 JavaScript 2/3](https://reader033.vdocuments.us/reader033/viewer/2022051318/586fda691a28ab18428b5d1d/html5/thumbnails/4.jpg)
![Page 6: Rails Girls Weekly - 初探前端網頁技術 JavaScript 2/3](https://reader033.vdocuments.us/reader033/viewer/2022051318/586fda691a28ab18428b5d1d/html5/thumbnails/6.jpg)
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
![Page 7: Rails Girls Weekly - 初探前端網頁技術 JavaScript 2/3](https://reader033.vdocuments.us/reader033/viewer/2022051318/586fda691a28ab18428b5d1d/html5/thumbnails/7.jpg)
jQuery jQuery
jQuery
![Page 8: Rails Girls Weekly - 初探前端網頁技術 JavaScript 2/3](https://reader033.vdocuments.us/reader033/viewer/2022051318/586fda691a28ab18428b5d1d/html5/thumbnails/8.jpg)
jQuery jQuery
jQuery
![Page 9: Rails Girls Weekly - 初探前端網頁技術 JavaScript 2/3](https://reader033.vdocuments.us/reader033/viewer/2022051318/586fda691a28ab18428b5d1d/html5/thumbnails/9.jpg)
.css( )
DOM
![Page 10: Rails Girls Weekly - 初探前端網頁技術 JavaScript 2/3](https://reader033.vdocuments.us/reader033/viewer/2022051318/586fda691a28ab18428b5d1d/html5/thumbnails/10.jpg)
event
• JavaScript
•
( )
• ( ) -> ( )
![Page 11: Rails Girls Weekly - 初探前端網頁技術 JavaScript 2/3](https://reader033.vdocuments.us/reader033/viewer/2022051318/586fda691a28ab18428b5d1d/html5/thumbnails/11.jpg)
$(SELECTOR).on( , callback);
.btn [ ] —> alert('Hello') [ ]
![Page 13: Rails Girls Weekly - 初探前端網頁技術 JavaScript 2/3](https://reader033.vdocuments.us/reader033/viewer/2022051318/586fda691a28ab18428b5d1d/html5/thumbnails/13.jpg)
jQuery
![Page 14: Rails Girls Weekly - 初探前端網頁技術 JavaScript 2/3](https://reader033.vdocuments.us/reader033/viewer/2022051318/586fda691a28ab18428b5d1d/html5/thumbnails/14.jpg)
• A B
![Page 17: Rails Girls Weekly - 初探前端網頁技術 JavaScript 2/3](https://reader033.vdocuments.us/reader033/viewer/2022051318/586fda691a28ab18428b5d1d/html5/thumbnails/17.jpg)
.show() / .hide()
•
$('.block').show(); $('.block').hide();
$('.block').show(500); $('.block').show('slow'); $('.block').show('high');
$('.block').hide(500);
![Page 19: Rails Girls Weekly - 初探前端網頁技術 JavaScript 2/3](https://reader033.vdocuments.us/reader033/viewer/2022051318/586fda691a28ab18428b5d1d/html5/thumbnails/19.jpg)
fadeIn() / fadeOut()
$('.block').fadeIn(); $('.block').fadeOut();
$('.block').fadeIn(500); $('.block').fadeIn('slow'); $('.block').fadeIn('high');
$('.block').fadeOut(500);
•
![Page 21: Rails Girls Weekly - 初探前端網頁技術 JavaScript 2/3](https://reader033.vdocuments.us/reader033/viewer/2022051318/586fda691a28ab18428b5d1d/html5/thumbnails/21.jpg)
.toggle() / .fadeToggle()
$('.block').toggle();
$('.block').fadeToggle();
![Page 23: Rails Girls Weekly - 初探前端網頁技術 JavaScript 2/3](https://reader033.vdocuments.us/reader033/viewer/2022051318/586fda691a28ab18428b5d1d/html5/thumbnails/23.jpg)
slideDown() / slideUp() / slideToggle()
• / /
$('.block').slideDown(); $('.block').slideUp();
$('.block').slideDown(500); $('.block').slideDown('slow');
$('.block').slideToggle();
![Page 25: Rails Girls Weekly - 初探前端網頁技術 JavaScript 2/3](https://reader033.vdocuments.us/reader033/viewer/2022051318/586fda691a28ab18428b5d1d/html5/thumbnails/25.jpg)
jQuery animate
$(selector).animate( { CSS }, [ ], [ ], [callback]);
$("div").animate({ 'left': '150px', 'bottom': '100px' }, 1000);
![Page 26: Rails Girls Weekly - 初探前端網頁技術 JavaScript 2/3](https://reader033.vdocuments.us/reader033/viewer/2022051318/586fda691a28ab18428b5d1d/html5/thumbnails/26.jpg)
$("div").animate({ 'height': '50px' }, 600);
$("div").animate({ 'width': '150px' }, 1000);
$("div").animate({ 'opacity': 0.5 }, 600);
• jQuery animate
http://goo.gl/QGrgOh
![Page 28: Rails Girls Weekly - 初探前端網頁技術 JavaScript 2/3](https://reader033.vdocuments.us/reader033/viewer/2022051318/586fda691a28ab18428b5d1d/html5/thumbnails/28.jpg)
![Page 29: Rails Girls Weekly - 初探前端網頁技術 JavaScript 2/3](https://reader033.vdocuments.us/reader033/viewer/2022051318/586fda691a28ab18428b5d1d/html5/thumbnails/29.jpg)
![Page 32: Rails Girls Weekly - 初探前端網頁技術 JavaScript 2/3](https://reader033.vdocuments.us/reader033/viewer/2022051318/586fda691a28ab18428b5d1d/html5/thumbnails/32.jpg)
: if - else
if ( A ) { …… }
else{ …… }
![Page 33: Rails Girls Weekly - 初探前端網頁技術 JavaScript 2/3](https://reader033.vdocuments.us/reader033/viewer/2022051318/586fda691a28ab18428b5d1d/html5/thumbnails/33.jpg)
: if - else
if ( 10 > 100 ) { alert('A'); }
else{ alert('B'); }
![Page 34: Rails Girls Weekly - 初探前端網頁技術 JavaScript 2/3](https://reader033.vdocuments.us/reader033/viewer/2022051318/586fda691a28ab18428b5d1d/html5/thumbnails/34.jpg)
![Page 35: Rails Girls Weekly - 初探前端網頁技術 JavaScript 2/3](https://reader033.vdocuments.us/reader033/viewer/2022051318/586fda691a28ab18428b5d1d/html5/thumbnails/35.jpg)
.position()
• top left
$('.block').position();
$('.block').position().top; $('.block').position().left;
![Page 36: Rails Girls Weekly - 初探前端網頁技術 JavaScript 2/3](https://reader033.vdocuments.us/reader033/viewer/2022051318/586fda691a28ab18428b5d1d/html5/thumbnails/36.jpg)
.stop()
$('div').on('click', function(){
$(this).stop() .animate({'height': '+=50px'}, 1000);
});
• .stop()
http://goo.gl/1BjU7p
![Page 37: Rails Girls Weekly - 初探前端網頁技術 JavaScript 2/3](https://reader033.vdocuments.us/reader033/viewer/2022051318/586fda691a28ab18428b5d1d/html5/thumbnails/37.jpg)
jQuery Easing Plugin
https://github.com/gdsmith/jquery.easing
![Page 38: Rails Girls Weekly - 初探前端網頁技術 JavaScript 2/3](https://reader033.vdocuments.us/reader033/viewer/2022051318/586fda691a28ab18428b5d1d/html5/thumbnails/38.jpg)
$('div').on('click', function(){
$(this).animate( {'height': '200px'}, 1000, 'easeOutBack');
});
http://goo.gl/oLM2vy
![Page 41: Rails Girls Weekly - 初探前端網頁技術 JavaScript 2/3](https://reader033.vdocuments.us/reader033/viewer/2022051318/586fda691a28ab18428b5d1d/html5/thumbnails/41.jpg)
week 2 -
• jQuery
• show / hide / toggle
• fadeIn / fadeOut / fadeToggle
• slideDown / slideUp / slideToggle
• jQuery Easing
![Page 42: Rails Girls Weekly - 初探前端網頁技術 JavaScript 2/3](https://reader033.vdocuments.us/reader033/viewer/2022051318/586fda691a28ab18428b5d1d/html5/thumbnails/42.jpg)
![Page 43: Rails Girls Weekly - 初探前端網頁技術 JavaScript 2/3](https://reader033.vdocuments.us/reader033/viewer/2022051318/586fda691a28ab18428b5d1d/html5/thumbnails/43.jpg)
![Page 44: Rails Girls Weekly - 初探前端網頁技術 JavaScript 2/3](https://reader033.vdocuments.us/reader033/viewer/2022051318/586fda691a28ab18428b5d1d/html5/thumbnails/44.jpg)
![Page 45: Rails Girls Weekly - 初探前端網頁技術 JavaScript 2/3](https://reader033.vdocuments.us/reader033/viewer/2022051318/586fda691a28ab18428b5d1d/html5/thumbnails/45.jpg)
![Page 46: Rails Girls Weekly - 初探前端網頁技術 JavaScript 2/3](https://reader033.vdocuments.us/reader033/viewer/2022051318/586fda691a28ab18428b5d1d/html5/thumbnails/46.jpg)
Thanks