Previous Next

jQuery Syntax

With jQuery you select (query) HTML elements and perform "actions" on them.

jQuery Syntax

The jQuery syntax is specially designed to select HTML elements and perform a specific action(s).

Basic syntax is: $(selector).action()

• A $ sign to define/access jQuery
• A (selector) to "query (or find)" HTML elements
• A jQuery action() to be performed on the element(s)

Examples:

$(this).hide() - hides the current element.

$("p").hide() - hides all

elements.

$(".test").hide() - hides all elements with class="test".

$("#test").hide() - hides the element with id="test".

Are you familiar with CSS selectors?

JQuery uses CSS syntax to select elements. You will learn more about selector syntax in the next chapter of this tutorial.

The Document Ready Event

You may have noticed that all jQuery methods in our examples, are within the correct document event:

This will prevent any jQuery code from running before the document finishes uploading (ready).

It is a good practice to wait for the document to be fully loaded and ready before working with it. This also allows you to have your JavaScript code in front of the body of your document, in the head section.

Here are some examples of actions that can fail if methods are run before the document is fully loaded:

• Trying to hide an element that is not created yet
• Trying to get the size of an image that is not loaded yet

Tip: The jQuery team has created an even shorter version of the standard document event:

Use the syntax of your choice. We think the correct document event is easy to understand when reading the code.

Previous Next