Jquery Selectors Use Cases

Introduction

jQuery gives web developers the power to find and select HTML elements as per requirement. One of the most useful features of jQuery is the selector engine that works similarly to how CSS select elements.

You can select any HTML element with a jQuery selector and do many operations on it. For example, you can select a div element and hide it from the page, pick a text element and change its color, etc.

We will see more such examples in detail. Let's dive right in and learn about the important jQuery selectors.

The List of 10 jQuery Selectors

ID Selector in jQuery

The id selector in jQuery is used to select a single unique element from an HTML page. This selector will return the HTML element based on the id specified. We can use the # symbol to prepend the id. For example, $("#myId") will select the HTML element that has the id "myId".

Let's look at an example:

HTML:

jQuery:

Class Selector in jQuery

The class selector in jQuery is used to select a single HTML element or a group of elements from an HTML page. The class selector returns the HTML element based on the class name specified. We can use the . symbol to prepend the class name. For example, $("#red") will select the HTML element that has the class name "red".

Let's see an example for class selectors.

HTML:

jQuery:

Tag Selector in jQuery

The tag selector in jQuery (also called element selector) is used to select all the elements specified from an HTML document. Web developers just need to mention the HTML tag name in this selector.

For example, $("img") will select all the img tags, and $("p") will select all the paragraph tags. The element selector calls the function getElementsByTagName() internally to return the corresponding elements from the HTML DOM.

Let's see an example.

HTML:

jQuery:

Descendant Selector in jQuery

The descendant selector in jQuery is used to select all the descendant elements of a specified ancestor element.

The syntax of the descendant selector is as follows:

In this selector, an ancestor is a valid jQuery selector, and a descendant is another valid selector to filter out the descendant elements.

For example, $("form button") will return the HTML button elements which are descendants of the form element. This means that these buttons are inside any form elements.

Let's look at a code example.

HTML:

jQuery:

Child Selector in jQuery

The child selector in jQuery is comparable to the descendant selector, but the child selector will return only the direct child.

The syntax of the jQuery child selector is as follows:

Let's see an example.

HTML:

jQuery:

Pseudo-Class Selectors in jQuery

The pseudo-class selector in jQuery is used to select an HTML element that has a special state. For example, you can use :even, :odd, :checked, etc. as pseudo class selectors in jQuery.

You can use :even to select even elements (starting from index 0), :odd to select odd elements, :checked to select checked elements (in radio buttons, checkboxes, etc.), and so on.

Let's see an example.

HTML:

jQuery:

Multiple Selectors in jQuery

You can combine multiple selectors in a single search in jQuery. It will return the combined results of all the selectors specified by jQuery.

Here is the syntax for multiple selectors:

Let's see an example jQuery code for multiple selectors.

HTML:

jQuery:

Not Selector in jQuery

In jQuery, we can use the :not() selector to select all HTML elements except the one specified.

For example, the following code selects all checkboxes from the HTML page which are not checked;

All Selector in jQuery

The universal selector $("*") in jQuery is used to select all elements on an HTML web page in a single go. However, using the universal selector may cause performance issues in some cases.

For example, the following code will select all elements from the HTML page and change the background color to yellow.

Has Selector in jQuery

The :has() selector in jQuery is used to select all elements that have elements inside of them (one or more) that matches the specified jQuery selector.

For example, the following code selects all div tags which have span elements under them.