var title = “ jQuery: The Basics and Beyond ”; - PowerPoint PPT Presentation

sinjin
var title jquery the basics and beyond n.
Skip this Video
Loading SlideShow in 5 Seconds..
var title = “ jQuery: The Basics and Beyond ”; PowerPoint Presentation
Download Presentation
var title = “ jQuery: The Basics and Beyond ”;

play fullscreen
1 / 22
Download Presentation
73 Views
Download Presentation

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

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

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

  2. KaloyanKosev 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. About: Why jQuery? $(this).agenda({ 1: ‘Cross-Browser Support’, });

  5. About: Why jQuery? $(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 Link2Link3 Link4 Link5

  13. Selectors: Retrieving page content $( “a[href$=pdf]” ) .append(“<imgsrc=‘img/icon.jpg’ />”) 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. My Contacts LinkedIn/ superKalo Facebook/ superKalo E-mail/ me@superKalo.com superKalo@devlabs.bg SlideShare/ KaloyanKosev

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