Presentation is loading. Please wait.

Presentation is loading. Please wait.

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

Similar presentations


Presentation on theme: "JQuery: The Basics and Beyond var title = “ jQuery: The Basics and Beyond ”; $(this).data({ target: ‘BEGINNERS’, speaker: ’superKalo’ });"— Presentation transcript:

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

2 Kaloyan Kosev Web Developer at DevLabs.bg LinkedIn/ superKalo

3 jQuery: The Basics and Beyond $(this).agenda({ About: ‘Why?’, Selectors: ‘Retrieving page content’, Events: ‘The event handling features’, Effects: ‘Creating basic animations’ });

4 $(this).agenda({ 1: ‘Cross-Browser Support’, }); About: Why jQuery?

5 $(this).agenda({ 1: ‘Cross-Browser Support’, 2: ‘Easy to Learn + Community Support’, });

6 About: Why jQuery? $(this).agenda({ 1: ‘Cross-Browser Support’, 2: ‘Easy to Learn + Community Support’, 3: ‘Powerful DOM Selection’ });

7 jQuery versions? jQuery 1.x vs. jQuery 2.x

8 Selectors: Retrieving page content jQuery() $()

9 Selectors: Retrieving page content $(“#myId”) $(“.myClass”)

10 Selectors: Retrieving page content $(“..CSS.. ”)

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

12 Selectors: Retrieving page content Link1 Link2 Link3 Link4 Link5

13 Selectors: Retrieving page content $( “a[href$=pdf]” ).append(“ ”) Link1

14 Selectors: Retrieving page content $( “.subMenu:visible” ) $( “section:hidden” ) $( “a[href^=http]” )

15 Selectors: Retrieving page content

16 Selectors: The event handling features

17 Selectors: Retrieving page content $( “p:contains(смотан)” ).remove();

18 Events: The event handling features $( “#myElement” ).on( “ … ”, function(){ //Do something }); click, mouseover, mouseout blur, focus scroll, resize

19 Effects: Creating basic animations $( “#myElement” ).fadeIn();.fadeOut();.slideUp();.slideDown(); $( “#myElement” ).animate({ opacity: 0.2 });

20

21 My Contacts LinkedIn/ superKalo Facebook/ superKalo E-mail/ me@superKalo.com superKalo@devlabs.bg SlideShare/ Kaloyan Kosev

22 Thanks to our Sponsors: Diamond Sponsor: Gold Sponsors: Swag Sponsors:Media Partners: Technological Partners: Silver Sponsors: Bronze Partners:


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

Similar presentations


Ads by Google