I originally wrote this for some in-house training at work, but pulled it out of the archives for a meeting of the Suburban Chicago PHP & Web Development Meetup.

1. Everything You Need to Know
In Order to Start Using jQuery
A Play in Three Acts
by Dave Ross
Suburban Chicago PHP
& Web Development Meetup
July 30, 2008

2. What is jQuery?
Remember when you tried learning Javascript ten
years ago and you wanted to hunt down the
person who invented it and beat their head in with
a rusty crowbar?
Forget that.
Seriously. That stuff ain't healthy.

3. What is jQuery?
jQuery is a Javascript library for manipulating
elements on a page.
jQuery takes care of cross-browser issues.
jQuery is shorter and easier to read than old-
fashioned DOM scripting.
jQuery comes with cool effects, and you can
download more.

4. Why use jQuery?
If you use jQuery, you will become a Web 2.0™
superstar.
You will be able to found a startup, get funded by
Y Combinator, attend all the hottest parties at
Google, and Leo Laporte will drop your name
incessantly.

5. Everything you need to
$('#example').fadeOut();
#example...where have I seen that before? Oh yeah, it's a CSS
selector!
You can use pretty much any CSS selector as a parameter in $().
For example:
$('div.sidebar');
$('table#salaries');
$('div.sidebar h1');

6. Getting hungry already?
You can probably skip the rest and read the docs at:
http://docs.jquery.com
There are tutorials at:
http://docs.jquery.com/Tutorials
Still here?

7. Everything you need to
$() returns a set of elements that match that CSS selector.
Anything you tack on at the end is applied to all of them.
$('p').slideUp() makes every paragraph disappear. Not cool! Don't
do that.
$('#example').fadeOut() only effects one element, the one with
id=”example”. It's much more specific.

8. Let's see an example!
<script src=”/path/to/jquery-1.2.3.js”
type=”text/javascript” />
<script type=”text/javascript”>
function clickHandler()‫‏‬
{
$('#example').fadeOut();
}
</script>
<div id=”example”
onclick=”clickHandler();”>test</div>

9. jQuery UI
$('#example').fadeOut();
Why do I keep using that example? That's what you're going to be
using jQuery for most of the time, fading things in & out like you
think you're Google or something.
fadeOut() is one of the jQuery Effects (show, hide, fade, and slide).
Also, there are fancier animations in the jQuery UI library @
ui.jquery.com – stuff like “split the div into 36 pieces and send
each of them flying in a different direction”.

10. Events
jQuery makes working with events much easier.
Events are things like ready (when the page is fully loaded), click,
focus, keydown, resize, submit, etc.
$('#example').focus() gives the #example element focus.
$('#example').focus(focusHandler) says to call
focusHandler() when #example gets focus.
$(document).ready(readyHandler) says to call
readyHandler() when the page is done loading.

11. Closures
While we're talking about events, this would be a good time to
discuss closures.
Some functions expect you to pass them the name of another
function to call later. You can use a closure to define that function
right then & there.
Instead of $('#example').focus(focusHandler), with
focusHandler() defined somewhere else, you can say:
$('#example').focus( function() {
// Everything focusHandler would do
// can be done here, not off in some
// other file somewhere
alert('Hello world!');
});

12. Cliff's Notes
The most important things I hope you learned:
$('some CSS selector')‫‏‬
http://docs.jquery.com