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.

You can also search for these topics, validate jquery syntax, explanation of the jquery syntax, jquery syntax for class selector, meaning of jquery syntax, basic syntax of jquery, jquery syntax checker, class using in jquery syntax, syntax for button click event in jquery, Example for jquery syntax.

The Document Ready Event

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.

You can also search for these topics, multiple the document ready events in jquery, The document ready event in jquery div, working of the document ready event in jquery function, view the document ready event in jquery , jquery how many document ready event, Example for document ready event.