jQuery Selectors

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:

• How to Center a Popup Window on Screen
• How to hide URL in the popup window opened using window.open
• window.showModalDialog is deprecated in Edge and Chrome
• Cloning JavaScript Object with Object.create
• Set new Attribute in XML using jQuery
• DOMParser: parseFromString() method
• What is the use of attr() method in jQuery?
• What is jQuery CDN?
• Difference between $(this) and ‘this’ in jQuery
• jQuery important questions
• Checkbox validation in jQuery
• Difference between offset and position in jQuery?
• How to change the background image using jQuery?
• jQuery Methods
• jQuery Selectors
• jQuery Downloading
• jQuery History