jQuery Syntax

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

jQuery syntax

jQuery syntax is to select HTML elements and perform certain operations on the selected elements.

Basic syntax: $(selector).action()

Dollar sign defines jQuery selector (selector) "query" and "find" HTML element jQuery's action() performs actions on the element Operation

Example:

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

$("p").hide() - Hide all <p> Element

$("p.test").hide() - Hide all <p> elements with class="test" Element

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

Are you familiar with CSS selectors?
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 selector syntax.

Document ready event

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

$(document).ready(function (){
// Start writing jQuery code...
});

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

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

Trying to hide a non-existent element and get the size of an incompletely loaded image

Tip: Concise writing (same effect as above):

$(function(){
// Start writing jQuery code...
});

You can choose the method you like to execute jQuery after the document is ready. method.