rails girls weekly - 初探前端網頁技術 javascript 2/3

Rails Girls Weekly - week 2

Kuro Hsu 2016/06/21

about me

• Kuro Hsu

•

• kurotanshi [at] gmail.com

• http://kuro.tw

https://jsbin.com/

JS BIN

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

jQuery jQuery

jQuery

jQuery jQuery

jQuery

.css( )

DOM

event

• JavaScript

•

( )

• ( ) -> ( )

$(SELECTOR).on( , callback);

.btn [ ] —> alert('Hello') [ ]

this

this DOM $() jQuery jQuery

http://goo.gl/tebAOR

jQuery

• A B

jQuery Effects Lab Page

https://goo.gl/ktdOD2

http://goo.gl/22hOij

.show() / .hide()

•

$('.block').show(); $('.block').hide();

$('.block').show(500); $('.block').show('slow'); $('.block').show('high');

$('.block').hide(500);

http://goo.gl/0wiW5q

fadeIn() / fadeOut()

$('.block').fadeIn(); $('.block').fadeOut();

$('.block').fadeIn(500); $('.block').fadeIn('slow'); $('.block').fadeIn('high');

$('.block').fadeOut(500);

•

http://goo.gl/0wiW5q

.toggle() / .fadeToggle()

$('.block').toggle();

$('.block').fadeToggle();

[ ] https://goo.gl/GrnV8J

slideDown() / slideUp() / slideToggle()

• / /

$('.block').slideDown(); $('.block').slideUp();

$('.block').slideDown(500); $('.block').slideDown('slow');

$('.block').slideToggle();

[ ] http://goo.gl/ook3xo

jQuery animate

$(selector).animate( { CSS }, [ ], [ ], [callback]);

$("div").animate({ 'left': '150px', 'bottom': '100px' }, 1000);

$("div").animate({ 'height': '50px' }, 600);

$("div").animate({ 'width': '150px' }, 1000);

$("div").animate({ 'opacity': 0.5 }, 600);

• jQuery animate

http://goo.gl/QGrgOh

http://goo.gl/d8tnaX

http://goo.gl/HGYlUS

https://goo.gl/lWz1eq

: if - else

if ( A ) { …… }

else{ …… }

: if - else

if ( 10 > 100 ) { alert('A'); }

else{ alert('B'); }

.position()

• top left

$('.block').position();

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

.stop()

$('div').on('click', function(){

$(this).stop() .animate({'height': '+=50px'}, 1000);

});

• .stop()

http://goo.gl/1BjU7p

jQuery Easing Plugin

https://github.com/gdsmith/jquery.easing

$('div').on('click', function(){

$(this).animate( {'height': '200px'}, 1000, 'easeOutBack');

});

http://goo.gl/oLM2vy

jQuery Advanced Effects Lab

https://goo.gl/yfTCZp

• easing

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

week 2 -

• jQuery

• show / hide / toggle

• fadeIn / fadeOut / fadeToggle

• slideDown / slideUp / slideToggle

• jQuery Easing

Thanks