jQuery Selectors allow you to select and manipulate HTML elements as a single element or group of elements. To Understanding jQuery selectors is the key to using the jQuery library most effectively. These selectors help you to understand jQuery concept.
Following are all jQuery Selectors,
- jQuery Basic Selectors
- jQuery Positional Selectors
- jQuery Relational Selectors
- jQuery Custom Selectors
- jQuery Attributes Selectors
- jQuery Form Elements Selectors
Syntax
jQuery Selector typically follows this syntax,
You can also perform multiple jQuery operations by using jQuery chaining process,
$(selector).Method1().Method2().Method3();
jQuery Basic Selectors
| Selector | Example | Description |
|---|
| element | $("p") | Selected All <p> elements. |
| element, element | $("p, h3") | Selected All <p> and <h3> elements. |
| * | $("*") | Selects all elements |
| #id | $("#heading") | Selects element whose id="heading" |
| .class | $(".param") | Selects all the elements with class="param" |
| .class, .class | $(".param, .hfirst") | Selects all the elements with class="param" and class="hfirst" |
jQuery Positional Selectors
| Selector | Example | Description |
|---|
| :first | $("p:first") | Selects first <p> element in a DOM hierarchy |
| :last | $("p:last") | Selects last <p> element in a DOM hierarchy |
| :even | $("tr:even") | Selects all even rows |
| :odd | $("tr:odd") | Selects all odd rows |
|
| :eq(n) | $("p:eq(2)") | Selects nth element starting from index 0 |
| :gt(n) | $("p:gt(2)") | Selects elements with an index greater than nth elements |
| :lt(n) | $("p:lt(2)") | Selects elements with an index less than nth elements |
|
| :first-child | $("p:first-child") | Selects all <p> elements which is the first child of their parent element |
| :last-child | $("p:last-child") | Selects all <p> elements which is the last child of their parent element |
| :first-of-type | $("p:first-of-type") | Selects all <p> elements which is the first <p> element of their parent element |
| :last-of-type | $("p:last-of-type") | Selects all <p> elements which is the last <p> element of their parent element |
| :nth-child(n) | $("p:nth-child(2)") | Selects all <p> elements which is the 2nd child of its parent element |
| :nth-last-child(n) | $("p:nth-last-child(2)") | Selects all <p> elements which is the 2nd child of its parent element from the last child |
| :nth-of-type(n) | $("p:nth-of-type(2)") | Selects all <p> elements which are the 2nd <p> element of its parent element |
| :nth-last-of-type(n) | $("p:nth-last-of-type(2)") | Selects all <p> elements which are the 2nd <p> element of its parent element from the last child |
| :only-child | $("p:only-child") | Selects all <p> elements which are the only child of its parent element |
| :only-of-type | $("p:only-of-type") | Selects all <p> elements which are the only child of their type of its parent element |
jQuery Relational Selectors
| Selector | Example | Description |
|---|
| parent child | $("div p") | Selects all <p> elements that are descendants of <div> element |
| parent > child | $("div > p") | Selects all <p> elements that are direct child of <div> element |
| element + next | $("div + p") | Selects all <p> elements that are immediately preceded by a sibling of <div>element |
| element ~ siblings | $("div ~ p") | Selects all <p> elements that are preceded by any sibling of <div> element |
jQuery Custom Selectors
jQuery Attributes Selectors
| Selector | Example | Description |
|---|
| [attribute] | $("[class]") | Select all elements with the class attribute |
| [attribute=value] | $("p[class='param']") | Select all <p> elements with a class attribute, whose value equal to 'param' |
| [attribute!=value] | $("p[class!='param']") | Select all <p> elements which does not have class attribute or value does not equal to 'param' |
| [attribute^=value] | $("p[class^='par']") | Selects all <p> elements with a class attributes, whose value start with 'par' |
| [attribute$=value] | $("[class$='ram']") | Select all <p> elements with a class attribute, whose value ends with 'ram' |
| [attribute|=value] | $("p[class|='param']") | Selects all <p> elements whose class attributes are either equal to 'param'or starting with 'param' string followed by a hyphen (-) |
| [attribute~=value] | $("p[class!='heading']") | Selects all <p> elements whose class attributes, whose value containing specific 'heading' word |
| [attribute*=value] | $("p[class*='heading']") | Selects all <p> elements whose class attributes, whose value containing 'heading' word |
| Selector | Example | Description |
|---|
| :input | $(":input") | Select all <input> elements |
| :text | $(":text") | Select all <input> elements whose type='text' |
| :password | $(":password") | Select all <input> elements whose type='password' |
| :radio | $(":radio") | Select all <input> elements whose type='radio' |
| :checkbox | $(":checkbox") | Select all <input> elements whose type='checkbox' |
| :button | $(":button") | Select all <input> elements whose type='button' |
| :reset | $(":reset") | Select all <input> elements whose type='reset' |
| :submit | $(":submit") | Select all <input> elements whose type='submit' |
| :image | $(":image") | Select all <input> elements whose type='image' |
| :file | $(":file") | Select all <input> elements whose type='file' |
| :enabled | $(":enabled") | Select all enabled <input> elements |
| :disabled | $(":disabled") | Select all disabled <input> elements |
| :selected | $(":selected") | Select all selected <input> elements |
| :checked | $(":checked") | Select all checked <input> elements |
.png)
