jQuery selectors are used to select and manipulate HTML elements. These are very important parts of the jQuery library. jQuery selectors allow you to search or select HTML elements in the DOM based on ID, class, attribute, type, etc. In simple terms, we can say that selectors are used to select one or more HTML elements using jQuery, and once an element is selected, you can perform various operations on it. All jQuery selectors start with a dollar character and parentheses.
Example: $(). This is called a factory function.

The $() factory function

Every jQuery selector start with thiis sign $(). This sign is known as the factory function. It uses the three basic building blocks while selecting an element in a given document.

  1. Tag Name: It represents a tag name available in the DOM. For example: $(‘p’) selects all paragraphs ‘p’ in the document.
  2. Tag ID: It represents a tag available with a specific ID in the DOM. For example: $(‘#real-id’) selects a specific element in the document that has an ID of real-id.
  3. Tag Class: It represents a tag available with a specific class in the DOM.
    For example: $(‘real-class’) selects all elements in the document that have a class of real-class.

Select Elements by Name

The most common selector pattern is element name. Specifying an element name as string e.g. $('p') will return an array of all the <p> elements in a webpage.

Example:

$('p').append('This is paragraph text.'); // appends text to all p elements 

$('div').append('This is div.); // appends text to all div elements 

<div>
    <p></p>
    <p></p>
</div>

<p></p>

<div></div>

Select Elements by Id

You can get a particular element by using id selector pattern. Specify an id of an element for which you want to get the reference, starting with # symbol.

Example:

$('#impData').append('This element\'s id is "impData"');

$('#userDiv').append('This element\'s id is "userDiv"');

<div id="myDiv1">
    <p></p>
</div>

<p id="impData"></p>

<div id="userDiv">
</div>

Select Elements by Attribute:

jQuery also allows you to search for elements based on attributes set on them. Specify the attribute name within square brackets in the $ function. for example. $(‘[class]’) returns all elements with the class attribute, regardless of the value.
In the following example, jQuery returns all elements that have a class or content editable attribute, regardless of their value.

$('[class]').append('This element has class attribute');

<div id="myDiv1">
    <p></p>
</div>

<p id="impPrg" class="boldPrg"></p>

<div id="myDiv2" class="yellowDiv">
</div>

You can also specify a specific value of an attribute in attribute selector. For example, $(‘[class=”myCls”]’) will return all the elements which have class attribute with myCls as a value.

$('[class="yellowDiv"]').append('This element includes class="yellowDiv" attribute');
      
<div id="myDiv1">
    <p></p>
</div>

<p id="impPrg" class="boldPrg">This is paragraph.</p>

<div id="myDiv2" class="yellowDiv">
</div>

More on jQuery:

Explore More

How to Center a Popup Window on Screen

JavaScript window.open() method is used to open a popup window. This popup window will be placed in the center of the screen. This example creates the pop-up window without placing it into

Read More

How to hide URL in the popup window opened using window.open

If you are using below code to open a popup window in your web page, then address must be appearing in you pop up window and f you want to

Read More

window.showModalDialog is deprecated in Edge and Chrome

If you have a website being compatible with Edge/Chrome and in past it was only compatible with IE 11 and if you are using window.showModalDailog in your JavaScript code, then

Read More