JavaScript

jQuery Syntax | Explained

In jQuery syntax, all of the statements are based on a basic template that applies different methods and functions to the HTML elements and their related attributes. You can also customize the jQuery syntax according to the added selector and action, which can be a method or function.

This write-up will explain jQuery Syntax in detail with the help of suitable examples. So, let’s start!

jQuery Syntax | Explained

In jQuery, the first thing you have to do is select the HTML elements on which you want to perform any action. The basic syntax of jQuery is as follows:

$(selector).action();

In the above-given jQuery syntax, you have to add a “$” sign for accessing or defining jQuery; then a “selector” is added within the parentheses, representing the query for finding the HTML elements. Lastly, “action()” is the operation that will be performed on the selected HTML elements.

Now let’s check out the types of selectors you can add in the jQuery Syntax.

Types of Selectors in jQuery Syntax

jQuery selectors are considered an essential part of the jQuery library. To utilize any jQuery methods, you must create a jQuery object by selecting a specific HTML element.

Various types of selectors exist in jQuery, such as Element Name Selector, Element #id Selector, and Element .class Selector. For instance, to select all paragraph “p” elements, we will use the Element Name Selector in the following way:

$("p").hide()

You can also assign an id to an HTML element and then perform the same operation on it by utilizing the Element #id Selector:

$("#btnClick").hide()

With the help of Element .class Selector, you can select different HTML elements simultaneously which belongs to the same class:

$(".classname").hide()

Note: For selecting HTML elements using id, add hash character “#,” followed by the Element id and to find elements by utilizing their class name, add a “.” period character followed by the class name.

Document Ready Event in jQuery Syntax

Before working with a “document” in jQuery make sure that it is fully loaded and is all ready to use. The “ready()” event of the “document” element can be utilized for this purpose:

$(document).ready(function(){
  // Write out jQuery methods in the body
});

The above-given method will prevent jQuery execution when the “document” element is not ready. However, if you are trying to hide an HTML element that is not created yet, then the specified action will fail in this case. So, ensure that the “document” is ready before running the jQuery code.

Here is a shorter method for writing the document ready event:

$(function(){
  // Write out jQuery methods in the body
});

Example: Using jQuery Syntax for hiding an HTML element
This example will demonstrate you the usage of jQuery syntax for hiding an HTML element with the help of Element Name Selector. Firstly, in our “index.html” file we will add a heading with the “h2” tag, a paragraph using the “<p>” tag, and a “Click Me!” button:

<h2> find HTML Elements in jQuery</h2>
<p>This is the main paragraph with some sample text </p>
<button>Click Me!</button>

You can utilize any online coding sandbox or your favorite code editor for executing the program; however, we will use the Visual Studio Code:

Next, move towards your JavaScript file, which is “myProject.js” in our case and write out following code in it:

$(document).ready(function () {
  $("button").click(function () {
    $("h2").hide();
  });
});

The provided code specified that jQuery “$(document).ready()” method will hide the HTML element with the “h2” element name when the user clicks the button:

After saving both files, we will open “index.html” by using VS Code “Liver Server” extension:

Now, we will click on the button highlighted in the below-given image:

As you can see, we have successfully hide the “h2” HTML element by following the jQuery Syntax:

That was all about the basic syntax of jQuery. You can explore it further according to your preferences.

Conclusion

The $(selector).action() is the basic jQuery syntax that can be used for selecting HTML elements and applying specific action to them. Once you have written the required code by following jQuery syntax, you can utilize the $(document).ready(function(){}) method for executing the program. This write-up discussed jQuery syntax, types of jQuery Selectors, and the functionality of $(document).ready(function(){}) method in detail.

About the author

Sharqa Hameed

I am a Linux enthusiast, I love to read Every Linux blog on the internet. I hold masters degree in computer science and am passionate about learning and teaching.