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:

$(function() {
  $( "p" ).text( "Hello" );
});

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:

// Example 1
$(function() {
  $( "p" ).text( "Hello" );
});

// Example 2
jQuery(function() {
  jQuery( "p" ).text( "Hello" );
});

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.

// Load jQuery
<script src="jquery.js"></script>

// Put jQuery into no-conflict mode (and assign '$j' as an alias)
var $j = jQuery.noConflict();

// Write some jQuery code (using '$j' as the alias)
$j(document).ready(function() {
    $j( "p" ).text( "Hello" );
});

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):

// Example 1
$(function() {
  ...
});

// Example 2
$( document ).ready(function() {
  ...
});

// Example 3
$().ready( handler )
  ...
});

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.

Selectors

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

Here are some examples:

// Select all "p" elements and write "Hello"
$( "p" ).text( "Hello" );

// Change the color of all "p" elements to red
$( "p" ).css( "color", "red" );

// Hide all elements with the ".shy" class
$( ".shy" ).hide();

// Show the element with the "#nav" id
$( "#nav" ).show();

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:

$( "p" )

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

// Select all "p" elements that are the first child of their parent
$( "p:first-child" )

// All checked form elements
$( ":checked" )

// All elements with a 'title' attribute
$( "[title]" )

// All 'a' elements with the target attribute set to '_blank'
$( "a[target='_blank']" )

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:

$( "button" ).click( function() {
  // Code goes here
});

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:

$( "button" ).click( function() {
  $( "p" ).text( "Hello" );
});

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:

// No white space
$(function(){$("button").click(function(){$("p").text("Hello");});});

// Some white space
$(function() {
  $("button").click(function(){
    $("p").text("Hello");
  });
});

// More white space
$( function() {
  $( "button" ).click( function() {
    $( "p" ).text( "Hello" );
  });
});

// Lots of white space
$( function() {

  $( "button" ).click( function() {
  
    $( "p" ).text( "Hello" );
    
  });
});