jQuery

Last updated: December 31, 2013

What is jQuery?

This tutorial assumes beginner knowledge of HTML, CSS, and JavaScript.

Have you ever wondered why it is so easy to target HTML elements via CSS yet parsing HTML via JavaScript is such a burden? Or how websites so easily create dynamic web applications that update content without reloading the page? Then you have been thinking about jQuery.

jQuery is a multi-browser JavaScript library designed to simplify the client-side scripting of HTML. As of November 2012 it is used by over 55% of the 10,000 most visited websites. jQuery is the most popular JavaScript library in use today.

Tools

In order to walk through the curriculum you will need to setup some tools on your computer. These tools are free.

Komodo Edit – Runs on Mac OS X, Windows, Linux
Allows us to write code much more efficiently by highlighting the syntax we will discuss throughout the curriculum.

Chrome – Runs on Mac OS X, Windows, Linux 
Modern web browser that will allow us to preview and debug our content

Google Developer Libraries – Runs on Web
The quickest hosting of the jQuery library on the web for free. Just find the library you are looking for and paste the script tag in your html.

Tutorial

We refer to the official guide located at jQuery Docs for this tutorial. The guide is maintained by the developers of jQuery. We have outlined the sections of the tutorial we will be using and the order we will use them in for this tutorial below.

How jQuery Works
A basic introduction to jQuery and the concepts that you need to know to use it.

Getting Started with jQuery
Goes through the basics of jQuery, all the way up to building plugins.

How to Get Anything You Want
An introduction to jQuery selectors and traversal methods, and their use in navigating the DOM.

Edit in Place with AJAX
Building an edit-in-place solution that saves all data in the background, using Ajax.

Live Examples of jQuery An interactive demonstration of the basics behind jQuery.

 

Frequently Asked Questions

These questions are meant help you solve specific but common problems that may pop up when using this language. They are meant to be read after you have gone through the tutorial and begin actual development.

 
Many of these questions and answers are taken from the official jQuery FAQ maintained by the developers of jQuery. If you can’t find the question(s) you are looking for on this page try searching through that page.

 
How do I test whether an element has a particular class?
 
hasClass (added in version 1.2) handles this common use case. You can also use the is() method along with an appropriate selector for more advanced matching:
 
How do I tell if an element exists after selected by a jQuery object?
 
Use the length property of the jQuery collection returned by your selector. In an if statement check the .length property of the jQuery collection.
 

Supplementary Resources

In no particular order these external resources supplement the tutorial by providing shortcuts to commonly used information and further learning.

A pdf of commonly used jQuery tools.
 
Explains and lists all of the tools jQuery offers.