Upload
kuro-hsu
View
433
Download
1
Embed Size (px)
Citation preview
Rails Girls Weekly - week 2
Kuro Hsu 2016/06/21
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') [ ]
jQuery
• A B
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
week 2 -
• jQuery
• show / hide / toggle
• fadeIn / fadeOut / fadeToggle
• slideDown / slideUp / slideToggle
• jQuery Easing
Thanks