A brief primer about jQuery. It's awesome.

1. jQUERY AWESOMESAUCE
and other awesomeness
PRESENTED FOR YOUR PLE ASURE
with commentary by Sean Gaffney

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. 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. 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. 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. BUT WAIT.
THERE’ S MORE.
jQuery has support for lots of goodies:
★ Element selection, traversal and manipulation
★ Event binding
★ Animation effects
★ AJAX

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. 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. 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. 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. 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. 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. jQUERY LESSONS LEARNED
aka DEMO TIME
INTERNET SLIDESHOW DWELLER S :
My sincerest apologies that I’m unable share the live demo.

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. MADE POSSIBLE IN PART BY:
Official Documentation:
http://api.jquery.com
Slide format inspiration:
http://www. ickr.com/photos/jasonsantamaria/
311149672/sizes/o/

17. 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