var title = “ jquery: the basics and beyond ”;

22
var title = jQuery: The Basics and Beyond”; $(this).data({ target: ‘BEGINNERS’, speaker: ’superKalo’ });

Upload: sinjin

Post on 21-Jan-2016

18 views

Category:

Documents


0 download

DESCRIPTION

var title = “ jQuery: The Basics and Beyond ”;. $(this).data( { target: ‘BEGINNERS’ , speaker: ’ superKalo ’ } );. Kaloyan Kosev. Web Developer a t DevLabs .bg LinkedIn/ superKalo. jQuery: The Basics and Beyond. $(this).agenda ({ About: ‘ Why? ’, - PowerPoint PPT Presentation

TRANSCRIPT

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

var title = “jQuery: The Basics and Beyond”;$(this).data({

target: ‘BEGINNERS’, speaker: ’superKalo’

});

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

Kaloyan Kosev

Web Developerat DevLabs.bg

LinkedIn/ superKalo

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

jQuery: The Basics and Beyond

$(this).agenda({

About: ‘Why?’,Selectors: ‘Retrieving page

content’,Events: ‘The event handling

features’,Effects: ‘Creating basic animations’

});

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

$(this).agenda({

1: ‘Cross-Browser Support’,

});

About: Why jQuery?

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

About: Why jQuery?

$(this).agenda({

1: ‘Cross-Browser Support’,2: ‘Easy to Learn + Community

Support’,

});

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

About: Why jQuery?

$(this).agenda({

1: ‘Cross-Browser Support’,2: ‘Easy to Learn + Community

Support’,

3: ‘Powerful DOM Selection’

});

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

jQuery versions?

jQuery 1.xvs.

jQuery 2.x

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

Selectors: Retrieving page content

jQuery()$()

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

Selectors: Retrieving page content

$(“#myId”)$(“.myClass”)

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

Selectors: Retrieving page content

$(“ ..CSS.. ”)

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

Selectors: Retrieving page content

$( “.submenu:visible” )$( “nav > ul > li” )$( “input[type=text]” )$( “li:even” )$( “p:not(.redP)” )

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

Selectors: Retrieving page content

Link1Link2Link3Link4Link5

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

Selectors: Retrieving page content

$( “a[href$=pdf]” ).append(“<img

src=‘img/icon.jpg’ />”)

Link1

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

Selectors: Retrieving page content

$( “.subMenu:visible” )$( “section:hidden” )$( “a[href^=http]” )

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

Selectors: Retrieving page content

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

Selectors: The event handling

features

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

Selectors: Retrieving page content

$( “p:contains(смотан)” ).remove();

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

Events: The event handling

features

$( “#myElement” ).on( “ … ”, function(){//Do something

});

• click, mouseover, mouseout

• blur, focus• scroll, resize

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

Effects: Creating basic animations

$( “#myElement” ).fadeIn(); .fadeOut(); .slideUp(); .slideDown();

$( “#myElement” ).animate({ opacity: 0.2 });

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

My Contacts

LinkedIn/ superKaloFacebook/ superKaloE-mail/ [email protected]

[email protected]

SlideShare/ Kaloyan Kosev

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

Thanks to our Sponsors:

Diamond Sponsor:

Gold Sponsors:

Swag Sponsors: Media Partners:

Technological Partners:

Silver Sponsors:

Bronze Partners: