jQuery Awesomesauce


Published on

A brief primer about jQuery. It's awesome.

Published in: Technology, Design
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

  • jQuery Awesomesauce

    1. 1. jQUERY AWESOMESAUCE and other awesomeness PRESENTED FOR YOUR PLE ASURE with commentary by Sean Gaffney
    2. 2. HELLO. OH HAI! My name is Sean. I’m o en unsure of what to do with my hair. I help designers and rms communicate tiny details through G EEK! technology on the web. Basically, I’m an awesomeloper. Too much?
    3. 3. WHAT’S YOUR jQUERY? CALLER? CALLER, ARE YOU THERE? ★ jQuery is a JavaScript library ★ JavaScript is not jQuery ★ DOM, DOM, DOM... Elements and Events can get pretty hairy in traditional JavaScript, but jQuery makes it easy breezy.
    4. 4. HOW E-Z BREE-Z? LU K E , I ’ M Y O U R FA T H E R . Traditional JavaScript: if (document.getElementById) { // DOM3 = IE5, NS6 document.getElementById('MyID').style.display = 'none'; } else { if (document.layers) { // Netscape 4 document.MyID.display = 'none'; } else { // IE 4 document.all.MyID.style.display = 'none'; } }
    5. 5. HOW E-Z BREE-Z? LU K E , I ’ M Y O U R FA T H E R . With jQuery: $('#MyID').hide(); // Wait, that’s it? // Yup. // Oh. Wow. // I know. // He must work out.
    6. 6. BUT WAIT. THERE’ S MORE. jQuery has support for lots of goodies: ★ Element selection, traversal and manipulation ★ Event binding ★ Animation effects ★ AJAX
    7. 7. THE SELECTOR CSS FTW! jQuery uses CSS-style selectors. // Pound for IDs $('#MyID').hide(); // Dot for classes $('div.myDiv').fadeIn(1000); // Raw HTML tags $('h1 a').attr('title','Take me home!'); // Pseudo-selectors, Extended $('ul li:last').css('border',0); $('#signupForm :checked').doAwesome();
    8. 8. SELECTOR OPTIMIZATION I J U S T. . . C A N ’ T. . . D O I T , C A P T A I N . Selectors can be very fast or very slow... // IDs are very fast, native to JS $('#header'); // Although this... $('#header').find('div.logo'); // is faster than $('#header div.logo'); // "Specific on the right, light on the left" $('.geoData td.columbia'); // as opposed to... $('table.geoData .columbia');
    9. 9. MANIPULATION Q U I T P L A Y I N G G A M E S W I T H M Y H E A R T. Let’s interact with some elements. // Add/remove classes $('.tab a').addClass('selected').removeClass('unselected'); // Modify CSS properties $('#header').css('color','#f00'); // Modify HTML $('.entry p:last').append('<p>The End.</p>'); $('body').html('<h1>Oops.</h1>'); // Create an element $('<a/>').appendTo('#header');
    10. 10. TRAVERSAL I ’ L L TA K E S W O R D S F O R $ 2 0 0 , T R E B E K . Need to move around the DOM? No problemo. // Move up the DOM until you hit x $('h1').doSomething().closest('#header').doSomethingElse(); // Grab the parent, then come back and get siblings $('li').parent().doIt().end().siblings().moreIt(); // Select the 3rd item in the object $('#theList li').eq(2);
    11. 11. EVENTS YOU’RE INVITED! ere are several (read: many) to choose from. // These are called "shortcut methods" .blur(function(){...}); .click(...) .mouseenter(...) .hover(...) .submit(...) ... // Because they all map to this guy .bind('click', [data], function([event]){...}); // Of note... .one('click', [data], function([event]){...});
    12. 12. EFFECTS R E D L I G H T. G R E E N L I G H T. Also several (read: many) to choose from. // Some effects "shortcut methods" .fadeIn(); .slideUp(...) ... // And they all map to this guy .animate(properties, [duration], [easing], [callback]);
    13. 13. jQUERY LESSONS LEARNED aka DEMO TIME INTERNET SLIDESHOW DWELLER S : My sincerest apologies that I’m unable share the live demo.
    14. 14. I CAN HAZ? G E T I T W H I L E I T ’ S H O T. http://jquery.com http://rebeccamurphey.com/jqfundamentals http://jqueryfordesigners.com http://paulirish.com/2009/perf/
    15. 15. MADE POSSIBLE IN PART BY: Official Documentation: http://api.jquery.com Slide format inspiration: http://www. ickr.com/photos/jasonsantamaria/ 311149672/sizes/o/
    16. 16. YO NUMBA? I CAN HAVE IT? Please don’t hesitate to provide feedback on this presentation or ask questions. anks! http://seangaffney.cc sean@seangaffney.cc @seangaffney