Selectors


Selectors

The jQuery library leverages the power of Cascading Style Sheets (CSS) selectors to help us rapidly and easily access elements or groups of elements in the Document Object Model (DOM) (DOM).

A jQuery Selector is a function that uses expressions to find outmatched elements from a DOM based on the specified criteria. You can easily state that selectors employ jQuery to select one or more HTML elements. Once an element is selected, different functions on the selected element can be performed.

The $() factory function

jQuery selectors start with the dollar sign and parentheses − $(). The factory function $() makes use of the following three building blocks while selecting elements in a given document −

Sr.No Selector & Description
1 Tag Name
The name of the tag that can be found on the DOM is displayed. For example, in the document, $('p') selects all

paragraphs.

2 Tag ID
It creates a tag with the specified ID in the DOM. For example, $('#some-id') is selected in the document with the some-id ID.
3 Tag Class
It's a tag with the supplied class that's available in the DOM. For example, $('.some-class') selects all things having a class in a document.

Either alone or in combination with other selectors, all of the following can be utilised. All jQuery selectors, save from minor modification, are based on the same premise.

NOTE − $() is a synonym for the function jQuery(). If any other library of JavaScript in which the $ sign conflicts, you can replace the $ sign with jQuery name and use the jQuery() function instead of the $ sign ().

How to Use Selectors?

The selectors are highly useful and necessary for using jQuery at every stage. You receive the exact item from your HTML document that you want.

The table below lists a few basic selectors and provides some examples.

Sr.No Selector & Description
1 Name
The name of the supplied element is used to select all elements.
2 #ID
Select an item that has the same ID as the specified ID.
3 .Class
Selects all items that belong to the specified class.
4 Universal (*)
All elements in a DOM are selected.
5 Multiple Elements E, F, G
For the combined results, choose all of the indicated selectors E, F, or G.