Well, 89.62 percent of the top 10,000 U.S. websites (“top” meaning most traffic) use jQuery today, according to BuiltWith. So you just can’t ignore it.
- Codecademy: Introduction to jQuery — this is a good place to begin
- Learn jQuery at jQuery.com
- jQuery API at jQuery.com — look up any method here
- jQAPI — Alternative jQuery Documentation Browser — good interactive examples here; sometimes you have to scroll a lot to find the code
- Intro to Web Apps jQuery playlist — videos at YouTube
jQuery Cheat Sheet
To specify something, anything, in your HTML:
$('.blue')— everything that has a class of “blue”
$('#chocolate')— anything with the id “chocolate”
$('h2')— every h2 element
When you’ve specified something that way, you’ve created a jQuery object, which automatically has a ton of possible methods, as well as properties.
To apply a jQuery method, such as
.hide(), to a jQuery object, such as
That hides everything with a class of “blue.” Look up the methods using one of the resources linked above.
Event handlers — you’ll learn about these in any jQuery tutorial. Events are actions initiated by the user, such as scrolling, clicking, and moving the mouse. jQuery can be used to detect an event and then react to it.
Usually you will use event handlers (also called event listeners) together with methods.
Effects are a particular set of jQuery methods that show, hide, or move objects. Show/hide, fadeIn/fadeOut, and slideDown/slideUp are the effects that everyone learns first. They are basic jQuery! Combined with a button and an event handler, effects are used to build accordion menus and other UI elements.
Often there is a jQuery plugin that has already been written and tested to solve a hard problem, such as how to handle scrolling events or how to make a “lightbox”–style slideshow. These useful plugins give us another reason to love jQuery.
A word of warning: Most jQuery plugins are not simple for a beginner. You have to spend time reading the documentation and learning how to use the plugin correctly.