jQuery – Selectors

jQuery – Selectors

jQuery selectors are used to “find” or “select” HTML elements based on their id, classes, name, types, attributes etc. It’s based on the existing CSS Selectors.

A jQuery Selector is find out matching elements from a DOM based on the given criteria. selectors are used to select one or more HTML elements using jQuery. Once an element is selected then we can perform various operations on that selected element.

The $() factory function

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

Selector Description
Name Represents a tag name available in the DOM. For example $(‘p’) selects all paragraphs <p> in the document
Represents a tag available with the given ID in the DOM. For example $(‘#element-id’) selects the single element in the document that has an ID of element-id.
Represents a tag available with the given class in the DOM. For example $(‘.element-class’) selects all elements in the document that have a class of some-class.

Example of  jQuery – Selectors:

The #id Selector :

When a user clicks on a button, the element with id=”element-id” will be hidden:


The .class Selector :

When a user clicks on a button, the elements with class=”element-class” will be hidden:


Other Examples of  jQuery – Selectors are :

Selector Syntax Description
$(“h1”) select all <h1> element
$(“*”) it selects all the elements
$(this) it selects current elements
$(“p.test”) it select all <p> elements class name with test
$(“p:first”) Selects the first <p> element
$(“:button”) Selects all <button> elements and <input> elements of type=”button”
$(“tr:even”) Selects all even <tr> elements
$(“tr:odd”) Selects all odd <tr> elements
$(“ul li:first”) it selects fist <li> element of first <ul>
$(“ul li:first-child”) it Selects the first <li> element of every <ul>
$(“:checked”) it selects all checked form elements.
$(“:enabled”) it selects all enabled form elements
$(“:contains(‘Hello’)”) Selects all elements which contains the text “Hello”
$(“div:has(p)”) Selects all <div> elements that have a <p> element


Also Learn More Tutorial :

Leave a Reply

Your email address will not be published.