var title = “ jQuery: The Basics and Beyond ”;

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/ me@superKalo.com

superKalo@devlabs.bg

SlideShare/ Kaloyan Kosev

Thanks to our Sponsors:

Diamond Sponsor:

Gold Sponsors:

Swag Sponsors: Media Partners:

Technological Partners:

Silver Sponsors:

Bronze Partners: