jQuery Syntax

jQuery allows you to pick (query) HTML elements and take "actions" on them.

The jQuery syntax is designed specifically for selecting HTML components and performing actions on element(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)

Example :-

$(this).hide() - removes the focus from the currently selected element.

$("p").hide() - All items with the p tags are hidden.

$(".test").hide() - All items with the Class="test" are hidden.

$("#test").hide() - The element with id="test" is hidden.

Are you familiar with CSS selectors?

To choose elements, jQuery utilises the CSS syntax. In the following part of this course you will find more about the selector syntax.

Maybe you realised that in our samples all methods of jQuery are ready for use in a document :

$(document).ready(function(){
  // jQuery methods go here...
});

This prevents any jQuery code from being executed before the page load is complete (is ready).

Before dealing with a page, it's a good idea to wait until it's completely loaded and ready. This also allows you to put your JavaScript code in the head part of your page before the body.

The expected results can fail if methods are executed before completely load the document.

• Try to conceal an element that has not yet been created
• Attempting to determine the size of a picture that has not yet been loaded

Tip: The jQuery team has also developed a much quicker way for the event ready for documents :

$(function(){
  // jQuery methods go here...
});

Use the syntax that suits you best. We believe that viewing the code makes the document ready event more understandable.