jQuery is a fast, concise, JavaScript Library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages.

jQuery is designed to change the way that you write JavaScript.

Select something. Do something.

jQuery uses selectors to select something that you want to do something to.

Basic and hierarchical selectors use CSS selector syntax:

• ID: #menu
• element: p
• class: .stayclassy
• all: *
• multiple: #header,#footer
• parent > child: #header > ul

See the jQuery Selector docs for a full list.

For example, select all paragraphs with the class example and change the CSS property color to green:

$('p.example').css('color', 'green');
Do it

Filter selectors match some attribute of an element: actual HTML attributes or pseudo-classes.

• Odd elements: :odd
• Not a given selector: :not('a')
• Hidden elements: :hidden
• HTML attributes: [width=100]
• HTML attributes ending with: input[id$=radiogroup]
• Forms: :checked or :selected

For example, select odd rows of a table and change CSS property background-color to gray:

$('#exFilters tr:even').css('background-color', 'gray');
Do it

jQuery provides attribute functions to get/set HTML attributes, the HTML or text of an element, the class of an element or the value of an element.

• Get an attribute: attr('rel')
• Set an attribute: attr('rel', 'hello')
• Add a class: addClass('stayclassy')
• Get the innerHTML: html()
• Get the text: text()
• Get the value: val()

For example, set the value of an input to the selected value of a select:

$('#exAttribsInput').val($('#exAttribsSelect').val());
Do it

jQuery provides event-related functions that make it easy to use events without worry about browser compatibility.

The bind function lets you bind a handler to one (or more) events for the matched element. To make this easier, jQuery provides event helpers such as:

• click
• change
• blur
• keypress
• submit

Most helpers have two overloads. Not passing a parameter will trigger the event on the matched element(s) and passing in a function as a parameter will bind that function to the event of the matched element(s).

For example, update the value of an input when a select is changed:

$('#exEventsSelect').change(function(){ $('#exEventsInput').val($(this).val()); });
Do it

jQuery provides ready event you can use to do something after the page is loaded and the DOM is ready to be traversed and manipulated. A replacement for window.onload.

You can have as many of these on a page as needed which is handy for using external scripts

For example, the following will focus the input that has an ID email:

$(document).ready(function(){
	$('#email')[0].focus();
});

The magic of jQuery. Chainability means every jQuery function returns a jQuery object so you can chain them together.

Instead of:

	$('p').addClass('stayclassy');
	$('p').html('There once was a woman named Jill');

you can use:

	$('p').addClass('stayclassy').html('There once was a woman named Jill');

For example, set the text of an element and set the background-color:

$('#exChaining') .text('Who swallowed an exploding pill') .css('background-color', 'white');
Do it

jQuery offers built-in animation effects such as: show/hide, slideUp/Down, fadeIn/fadeOut, and a custom animation function to create your own.

For example, fade in a hidden div:

$('#exEffects').fadeIn('slow');
Do it

jQuery makes AJAX easy. It provides a full-featured ajax function as well as the following higher-level functions:

• get
• post
• getJSON
• getScript
• load

For example, show the status of an AIM user using the JSON result from the AIM Presence API:

$.getJSON('http://api.oscar.aol.com/presence/get?k=cj1XS_yS3BG92T5j&f=json&t=cjscott69&c=?', function(result){ $('#exAJAX').append(result.response.data.users[0].state); });
Do it

Many plugins are in the official repository but be sure to check the old plugins wiki page and Google.

Some common plugins:

• Tabs
• Date Picker
• clueTip
• Cookie
• Form
• Thickbox

For example, display an image gallery using Thickbox:

• jQuery Site
• jQuery Docs
• jQuery Plugins
• jQuery Tutorials
• jQuery Email Lists (very active)
• John Resig's Site
• Learning jQuery Book (eBook available)