JavaScript

How to find HTML Elements in jQuery

jQuery Selectors are utilized to find and manipulate HTML elements, and these selectors are considered an essential component of the jQuery library. Using jQuery selectors, you can find HTML elements from Document Object Model based on the element name, class, id, attributes, and types.

This write-up will discuss the procedure to find HTML Elements in jQuery using Element Name Selector, Element #id Selector, and Element .class Selector. So, let’s start!

How to find HTML Elements in jQuery using Element Name Selector

In JQuery, you can find HTML elements using their “name,” and it should be passed in the parenthesis “()”. Here is the syntax of using Element Name Selector.

Syntax of Element Name Selector

$("elementName")

In the above-given syntax, you have to add the “elementName” with the double quotation marks inside the parentheses.

Example: Find HTML Elements in jQuery using Element Name Selector
First of all, 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 creating this project; 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();
  });
});

Using the $(“h2”) Element Name Selector, jQuery will search for the “h2” element and then hide it from the web page with the help of “hide()” method:

After saving both files, we will open “index.html” with the help of VS Code “Liver Server” extension:

Clicking on the highlighted button will hide all of the <h2> heading elements of our web page.

Before clicking the button:

After clicking the button:

The Element Name Selector retrieves all HTML elements with the same name. For instance, we have added $(“h2”) as the element name, so the Element Name Selector will select all <h2> heading elements of our web page and then apply the added settings to them.

However, if you want to find a specific HTML element, then you can utilize the Element #id Selector in jQuery().

How to find HTML Elements in jQuery using Element #id Selector

To find HTML elements using element #id selector, we have to assign an id to that HTML element and it should be unique in a web page, as the Element #id Selector searches for the unique and single element.

Syntax of Element #id Selector

$("#my_id")

In the syntax of the Element #id Selector, you have to add the hash character “#,” followed by the “id” assigned to an HTML element.

Example: Find HTML Elements in jQuery using Element #id Selector
In our “index.html” file, we have added a paragraph, a “Click Me” button, and a heading with the “h2id” element id:

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

To find the heading HTML element with the “h2id”, we will write out the following code in our “myProject.js” file:

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

In this case, when we will click the button, the jQuery “$(“#h2id”)” method finds the HTML heading element with the “h2id” and hide it from the web page:

The added heading can be no longer seen after clicking the “Click Me” button:

How to find HTML Elements in jQuery using Element .class Selector

Element #id Selector does not permit you to select two HTML elements simultaneously because both of them will have unique id values. However, you can assign a class to different HTML elements and then utilize the Element .class Selector for finding the elements belonging to the same class.

Syntax of Element .class Selector

$(".myclass")

In the given syntax of Element .class Selector, you have to add a period character before writing out the class name, and it should be enclosed in parentheses.

Example: Find HTML Elements in jQuery using Element .class Selector
In this example, we will assign a class name “newclass” to the heading, paragraph element and button, which are added in our “index.html” file:

<h2 class="newclass">find HTML Elements in jQuery</h2>
<p>This is the main paragraph with some sample text </p>
<p class="newclass">this is the second paragraph</p>
<button class="newclass">Click Me</button>

Except for the first paragraph, all of the added HTML elements belong to the “newclass”:

Now, firstly, we will find the HTML elements having class name “newclass”. After that, we will hide them from our HTML page:

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

Before clicking the button:

After clicking the button:

The above-given output shows that we have successfully found the specified HTML elements using Element .class Selector and hid them from the web page.

Conclusion

Using Element Name Selector, Element #id Selector, and Element .class Selector, you can find HTML elements in jQuery. Element Name Selector is utilized for selecting the HTML elements by their name. In contrast, Element #id Selector finds a specific HTML element based on their unique id, and lastly, Element .class Selector retrieves them according to their class name. This write-up discussed the procedure to find HTML Elements in jQuery using Element Name Selector, Element #id Selector, and Element .class Selector.

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.