jQuery Selectors
jQuery Selectors
The following are the list of Selectors available in jQuery.
Note: The following selectors are arranged in such a way for easy understanding.
| Selector | Quick Look | Explanation |
|---|---|---|
| #id | #point | Selects an element with id name 'point' i.e) id="point" |
| .class | .point | Selects all element with class name 'point' i.e) class="point" |
| element | h2 | Select all <h2> elements |
| * | * | Selects all elements |
| Multiple | #id, .class, element | Selects the combined results of all the specified selectors. |
| element element | div p | Selects all <p> elements inside <div> elements |
| :button | :button | Selects all button elements and elements of type button. |
| :reset | :reset | Selects all elements of type reset. |
| :submit | :submit | Selects all button elements and elements of type submit. |
| :image | :image | Selects all elements of type image. |
| :checkbox | :checkbox | Selects all elements of type checkbox. |
| :checked | :checked | Selects all elements that are checked or selected. |
| :first | :first | Selects the first matched DOM element. |
| :last | :last | Selects the last matched DOM element. |
| :eq() | p:eq(1) | Selects <p> element with the index number 1. |
| :lt() | p:lt(1) | Selects all <p> elements with an index number less than 1. |
| :gt() | p:gt(1) | Selects all <p> elements with an index number greater than 1. |
| :even | p:even | Selects all even <p> elements starts from zero index. |
| :odd | p:odd | Selects all odd <p> elements starts from zero index. |
| :focus | input:focus | Selects <input> element if it is currently focused. |
| :header | :header | Selects all elements that are headers. |
| :input | :input | Selects all input, textarea, select and button elements. |
| :root | :root | Selects the element that is the root of the document. |
| :text | input:text | Selects all <input> elements of type text. |
| :radio | input:radio | Selects all <input> elements of type radio |
| :file | :file | Selects all <input> elements of type file |
| :password | input:password | Selects all <input> elements of type password. |
| :selected | :selected | Selects all elements that are selected. |
| :parent | td:parent | Selects all <td> elements that have at least one child node (either an element or text). |
| :empty | td:empty | Selects all <td> elements that have no children (either an element or text). |
| :animated | div:animated | Selects all <div> elements that are currently animated. |
| :enabled | input:enabled | Selects all <input> elements that are enabled. |
| :disabled | input:disabled | Selects all <input> elements that are disabled. |
| :visible | p:visible | Selects all <p> elements that are visible. |
| :hidden | p:hidden | Selects all <p> elements that are hidden. |
| :lang() | p:lang('en') | Selects all <p> elements that have the specified language (english). |
| :has | p:has(span) | Selects all <p> elements which contain one or more <span> elements. |
| :not | p:not(.point) | Selects all <p> elements that do not match the given selector (class="point"). |
| :contains() | p:contains(fun) | Selects all <p> elements that contain the specified text ("fun"). |
| :first-child | p:first-child | Selects all <p> elements that are the first child of their parent. |
| :last-child | p:last-child | Selects all <p> elements that are the last child of their parent. |
| :first-of-type | p:first-of-type | Selects all <p> elements those are the first child, of a particular type, of their parent. |
| :last-of-type | p:last-of-type | Selects all <p> elements those are the last child, of a particular type, of their parent. |
| :nth-child() | h1:nth-child(1) | Selects all first <h1> elements, regardless of type, of their parent. |
| :nth-last-child() | p:nth-last-child(1) | Selects all last <p> elements, regardless of type, of their parent. |
| :nth-of-type() | p:nth-of-type(1) | Selects all first <p> elements, of a particular type, of their parent. |
| :nth-last-of-type() | p:nth-last-of-type(1) | Selects all last <p> elements, of a particular type, of their parent. |
| :only-of-type | p:only-of-type | Selects all <p> elements that have no siblings with the same element name. |
| :only-child | p:only-child | Selects all <p> elements that are the only child of their parent. |
| (prev + next) | ("h1 + p") | Selects all <p> elements that are placed immediately after <h1> elements. |
| (prev ~ next) | ("h1 ~ p") | Selects all <p> elements that are placed after <h1> elements |
| (parent > child) | (div > p) | Selects only <p> that are direct children of <div>. |
| [attribute|='value'] | [placeholder|='Your'] | Selects all elements with a placeholder attribute value starting with "Your-". |
| [attribute*='value'] | [placeholder*='our'] | Selects all elements with a placeholder attribute value contains the substring of "our" |
| [attribute~='value'] | [placeholder~='Date'] | Selects all elements with a placeholder attribute containing the word "Date". |
| [attribute='value'] | [placeholder='Your Age'] | Selects all elements with a placeholder attribute containing the exact word "Your Age". |
| [attribute!='value'] | [placeholder!='Your Age'] | Selects all elements with a placeholder attribute does not containing the exact word "Your Age". |
| [attribute$='value'] | [placeholder$='Age'] | Selects all elements with a placeholder attribute value ending with "Age". |
| [attribute^='value'] | [placeholder^='Your'] | Selects all elements with a placeholder attribute value starting with "Your". |
| ("[attrFilter1][attrFilter2][attrFilterN]") | [type='text'][placeholder!='Your Age'] | Selects elements that match all of the specified attribute filters. |
Reminder
Hi Developers, we almost covered 99.5% of jQuery Tutorials with examples for quick and easy learning.
We are working to cover every Single Concept in jQuery.
Please do google search for:
Join Our Channel
Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.
This channel is primarily useful for Full Stack Web Developer.