A jQuery selector is a function that is used for selecting and manipulating HTML elements.
Using jQuery selectors you can find or select HTML elements based in their id, classes, attributes, types and much more from DOM, once the element is selected then you can perform various operations on that.
The jQuery selector starts with a dollar sign e.g. $().
jQuery element Selector:
The jQuery element selector allows us to select HTML elements from the HTML page based on the element name.
jQuery #id Selector:
The jQuery #id selector specifies an id for an element to be selected.
The id attribute must be unique within a document so that it can be used only once.
To uniquely identify an element with a specific id, write a hash(#) character followed by the id of the HTML element.
jQuery .class Selector:
The jQuery class selector is used to find the element with the specific class name.
Write a period character(.) followed by the class name to find the element with a specific class.
Different jQuery Selectors:
| Selector | Example | Description |
|---|---|---|
| * | $("*") | It selects all elements. |
| $(this) | $(this) | It will select the current HTML element |
| $("p") | $("p.demo") | It selects all <p> elements with class="demo" |
| :first | $("p:first") | It selects the first <p> element |
| :last | $("p:last") | It will select the last <p> element |
| :even | $("tr:even") | It will select all even <tr> elements |
| :odd | $("tr:odd") | This will select all odd <tr> elements |
| :first-child | $("p:first-child") | It will select all <p> elements that are the first child of their parent |
| :last-child | $("p:last-child") | It selects all <p> elements that are the last child of their parent |
| :nth-child(n) | $("p:nth-child(2)") | It selects all p elements that are the 2nd child of their parent |
| :empty | $(":empty") | It will select all elements that are empty |
| :parent | $(":parent") | It will select all elements that are a parent of another element |
| [attribute] | $("[href]") | It selects all elements with a href attribute |
| :input | $(":input") | It selects all input elements |
| :text | $(":text") | It selects all input elements with type="text" |
| :password | $(":password") | It selects all input elements with type="password" |
| :button | $(":button") | It selects all input elements with type="button" |
| :image | $(":image") | It selects all input elements with type="image" |
| :file | $(":file") | It selects all input elements with type="file" |
| :checked | $(":checked") | It selects all checked input elements |
| :selected | $(":selected") | It selects all selected input elements |
| :enabled | $(":enabled") | It will select all enabled input elements |
| :disabled | $(":disabled") | It selects all disabled input elements |