The jQuery syntax is designed for selecting HTML elements and then performing some action on the selected element(s) once the document has loaded (usually).

Basic Syntax

The basic syntax is: $(selector).action()

  • The $ sign defines that jQuery is to be used
  • A (selector) is used to target the HTML element(s)
  • A jQuery action() is specified to be performed on the selected element(s)

The following uses an element selector to target all paragraphs. It will “hide” from view all HTML paragraphs on the page.


The following will “hide” from view all HTML paragraphs and HTML div elements on the page.

Multiple selectors can be used in one jQuery statement by including all of them in the one set of quotation marks and separating them with commas.

					$('p, div').hide()

When using jQuery, single or double quotation marks are acceptable and work identically to one another. Choose whichever you prefer, and stay consistent. However, if you are writing a string to the page that contains either a double or single quote, you will need to either use the opposite set, or place a backslash prior to the quote.

$('p').html("Johnny's World");
$('p').html('Johnny/'s World');

There are an abundance of actions that can be used in jQuery. The full lists of each type of action can be found here along with their intended use and syntax:

The Document Ready Event

The document ready event occurs when the DOM (document object model) has been loaded and is ready for scripting.

In almost all cases, you would want your jQuery code to run ONLY after the full document page has finished loading. To do this, we use the following and place all our code between lines 1 and 5 so that the code only runs when the DOM is ready.

					$(document).ready(function() {
    // all code goes here
}); // end document load function

If you have a case where you need some jQuery to run even if the document has not finished loading, or even before loading the document, you would not use the document ready event.