jQuery Syntax

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

jQuery Syntax Examples

$(this).hide()
Demonstration of the jQuery hide() function, hiding the current HTML element
$("#test").hide()
Demonstration of the jQuery hide() function, hiding the element with id="test"
$("p").hide()
Demonstration of the jQuery hide() function, hiding all <p> elements
$(".test").hide()
Demonstration of the jQuery hide() function, hiding all elements with class="test"

jQuery Syntax

jQuery syntax is designed for selecting HTML elements, allowing certain operations to be performed on them.

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

  • The dollar sign defines jQuery
  • The selector (selector) "queries" and "finds" HTML elements
  • jQuery's action() performs operations on elements

Example

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

$("p").hide() - Hide all paragraphs

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

$("#test").hide() - Hide all elements with id="test"

Tip:The syntax used by jQuery is a combination of XPath and CSS selector syntax. In the following chapters of this tutorial, you will learn more about the syntax of selectors.

Document Ready Function

You may have noticed that in our example, all jQuery functions are located within a document ready function:

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

This is to prevent jQuery code from running before the document is fully loaded (ready).

If the function is run before the document is fully loaded, the operation may fail. Here are two specific examples:

  • Attempting to hide an element that does not exist
  • Get the size of an image that is not fully loaded