How to use jQuery

The jQuery syntax is very straightforward and allows you to add advanced functionality to your website with a minimum of code. Here's how to use jQuery on your site.

Here's an example of some jQuery code:

Probably one of the most noticable things is that each line of code starts with dollar signs. These dollar signs are part of the jQuery syntax.

About the Dollar Sign (`$`)

The $ (dollar sign) is used to indicate that the following code is going to be jQuery. This helps distinguish between jQuery and regular JavaScript.

The $ is actually a shortcut for jQuery. The jQuery library is contained within the jQuery namespace, and so any jQuery code can also start with jQuery.

So the following two examples are equivalent:

No-Conflict Mode

Note that the dollar sign is not unique to jQuery. There are also other JavaScript libraries that also use a dollar sign. The dollar sign is simply a JavaScript identifier.

This could potentially lead to conflicts if you use another JavaScript library alongside jQuery. To avoid any conflicts, you can relinquish control of the dollar sign. This is referred to as "no-conflict mode".

You can put jQuery into no-conflict mode by inserting a line of code immediately after jQuery is loaded onto the page (and before you attempt to use jQuery in your page).

You can also assign another variable to use with jQuery. For example, you could assign $j or jq or anything else. You could even assign your cat's name if you're so inclined!

Here's some sample code where I put jQuery into no-conflict mode, and assign $j as the variable to use with jQuery.

Just to be clear, under most circumstances, you won't need to do this. You only need to do this if you want to relinquish the dollar sign as an alias to jQuery.

The `ready()` Method

Most jQuery code you encounter will probably be wrapped in one of the following (or some variation):

This is jQuery's ready() method. This method allows you to run code as soon as the page's Document Object Model (DOM) becomes safe to manipulate.

If you don't include this method (or some other equivalent), your code will run as soon as the browser encounters it. This could cause problems if your code tries to manipulate an object that hasn't loaded yet. This will definitely happen if you put your jQuery in the document's head and try to manipulate HTML elements that appear in the body.

You should still place your code inside the ready() method even if you wrap your code within an event handler (such as click()). DOM objects still need to be loaded before attempting to apply event handlers against them.

The JavaScript Version

Many JavaScript developers use either window.onload, load, or DOMContentLoaded to do the same thing as jQuery's ready() method. However, there's a difference in how these options work.

First, here they all are together:

The window.onload and load events will wait until everything has downloaded — even the stylesheets, images, banner ads, subframes etc.

The DOMContentLoaded only waits for the HTML document to be completely loaded and parsed, without waiting for stylesheets, images, banner ads, subframes etc to finish loading. Therefore, your code will typically run sooner than the window.onload and load events. This is usually a good thing, as images and banner ads tend to take longer to load than it takes to have the DOM ready.

jQuery's ready() method only waits for the DOM to be ready also. However, there is an important difference that makes the jQuery option slightly more robust. According to the jQuery documentation:

If the DOM becomes ready and the browser fires DOMContentLoaded before the code calls .ready( handler ), the function handler will still be executed. In contrast, a DOMContentLoaded event listener added after the event fires is never executed.

Selectors

The basic concept of jQuery is, you select an element, then perform an action against that element.

Here are some examples:

If you're familiar with CSS you'll recognize that the first part of those statements are selectors. The parts that go p, .shy, and #nav are all selectors that could also be used in a CSS file.

jQuery uses selectors to select an element before applying an action to it.

In jQuery, the selector goes inside brackets and quotes. Like this:

You can also use more advanced selectors, such as these:

jQuery supports most CSS3 selectors and also some non-standard selectors.

Events

jQuery uses events to determine when a block of code should run.

Events are triggered when something happens within the DOM. Some events are triggered by user actions (such as the user clicks on an element, moves the mouse, etc), other events are triggered by the browser (such as the page has loaded, an animation has finished running, etc).

When you write jQuery/JavaScript, you need to specify when the code should run. If you don't do this, then it will simply run when the browser loads it. Running a script as soon as the window loads isn't always desirable. Most of the time you will only want the code to run once a certain event has occurred.

Here's an example of attaching an event handler to a selection:

In this case, the code will run when the user clicks a button element.

The selector comes first (in this case button), then the event handler (in this case click()). A function is provided to the event handler, which is where you write your code (i.e. between the {} (curly braces)).

So we could combine that code with one of the previous examples, and we'd end up with this:

Here it is in action:

White Space

You can include white space within the brackets or leave it out. It doesn't matter. For example, all of the examples are equivalent: