jquery: the basics and beyond var title = “ jquery: the basics and beyond ”; $(this).data({...
TRANSCRIPT
var title = “jQuery: The Basics and Beyond”;$(this).data({
target: ‘BEGINNERS’, speaker: ’superKalo’
});
Kaloyan Kosev
Web Developerat DevLabs.bg
LinkedIn/ superKalo
jQuery: The Basics and Beyond
$(this).agenda({
About: ‘Why?’,Selectors: ‘Retrieving page
content’,Events: ‘The event handling
features’,Effects: ‘Creating basic animations’
});
$(this).agenda({
1: ‘Cross-Browser Support’,
});
About: Why jQuery?
About: Why jQuery?
$(this).agenda({
1: ‘Cross-Browser Support’,2: ‘Easy to Learn + Community
Support’,
});
About: Why jQuery?
$(this).agenda({
1: ‘Cross-Browser Support’,2: ‘Easy to Learn + Community
Support’,
3: ‘Powerful DOM Selection’
});
jQuery versions?
jQuery 1.xvs.
jQuery 2.x
Selectors: Retrieving page content
jQuery()$()
Selectors: Retrieving page content
$(“#myId”)$(“.myClass”)
Selectors: Retrieving page content
$(“ ..CSS.. ”)
Selectors: Retrieving page content
$( “.submenu:visible” )$( “nav > ul > li” )$( “input[type=text]” )$( “li:even” )$( “p:not(.redP)” )
Selectors: Retrieving page content
Link1Link2Link3Link4Link5
Selectors: Retrieving page content
$( “a[href$=pdf]” ).append(“<img
src=‘img/icon.jpg’ />”)
Link1
Selectors: Retrieving page content
$( “.subMenu:visible” )$( “section:hidden” )$( “a[href^=http]” )
Selectors: Retrieving page content
Selectors: The event handling
features
Selectors: Retrieving page content
$( “p:contains(смотан)” ).remove();
Events: The event handling
features
$( “#myElement” ).on( “ … ”, function(){//Do something
});
• click, mouseover, mouseout
• blur, focus• scroll, resize
Effects: Creating basic animations
$( “#myElement” ).fadeIn(); .fadeOut(); .slideUp(); .slideDown();
$( “#myElement” ).animate({ opacity: 0.2 });
My Contacts
LinkedIn/ superKaloFacebook/ superKaloE-mail/ [email protected]
SlideShare/ Kaloyan Kosev
Thanks to our Sponsors:
Diamond Sponsor:
Gold Sponsors:
Swag Sponsors: Media Partners:
Technological Partners:
Silver Sponsors:
Bronze Partners: