Home >>jQuery Tutorial >jQuery Selector Lists
jQuery Selector Lists
jQuery Selectors
You can use the different selectors by use jQuery selector described in below table.
| Selector | Example | Selects |
|---|---|---|
| * | $("*") | All elements |
| #id | $("#lastname") | Use this Selector ,element with id="lastname" |
| .class | $(".demo") | Use this Selector , elements with class="demo" |
| .class,.class | $(".start,.demo") | Use this Selector ,elements with the class "start" or "demo" |
| element | $("p") | It selects all all <p> elements |
| el1,el2,el3 | $("h1,div,p") | It selects all <h1>, <div> and <p> elements |
| :first | $("p:first") | It helps to select first <p> element |
| :last | $("p:last") | It helps to select last <p> element |
| :even | $("tr:even") | It selects all even <tr> elements |
| :odd | $("tr:odd") | It selects all odd <tr> elements |
| :first-child | $("p:first-child") | It helps to select all <p> elements that are the first child of their parent |
| :first-of-type | $("p:first-of-type") | It helps to select all <p> elements that are the first <p> element of their parent |
| :last-child | $("p:last-child") | It helps to select all <p> elements that are the last child of their parent |
| :last-of-type | $("p:last-of-type") | It helps to select all <p> elements that are the last <p> element of their parent |
| :nth-child(n) | $("p:nth-child(2)") | It helps to select all <p> elements that are the 2nd child of their parent |
| :nth-last-child(n) | $("p:nth-last-child(2)") | It is used to select all <p> elements that are the 2nd child of their parent, counting from the last child |
| :nth-of-type(n) | $("p:nth-of-type(2)") | It is used to select all <p> elements that are the 2nd <p> element of their parent |
| :nth-last-of-type(n) | $("p:nth-last-of-type(2)") | It is used to select all <p> elements that are the 2nd <p> element of their parent, counting from the last child |
| :only-child | $("p:only-child") | It helps to select all <p> elements that are the only child of their parent |
| :only-of-type | $("p:only-of-type") | It is used to select all <p> elements that are the only child, of its type, of their parent |
| parent < child | $("div > p") | This selector helps to select all <p> elements that are a direct child of a <div> element |
| parent descendant | $("div p") | Seelcts all <p> elements that are descendants of a <div> element |
| element + next | $("div + p") | It selects all <p> element that are next to each <div> elements |
| element ~ siblings | $("div ~ p") | It helps to select all <p> elements that are siblings of a <div> element |
| :eq(index) | $("ul li:eq(3)") | It selects all the fourth element in a list (index starts at 0) |
| :gt(no) | $("ul li:gt(3)") | It helps to select all the list elements with an index greater than 3 |
| :lt(no) | $("ul li:lt(3)") | It selects all the list elements with an index less than 3 |
| :not(selector) | $("input:not(:empty)") | It is used to selects all input elements that are not empty |
| :header | $(":header") | It selects all header elements <h1>, <h2> ... |
| :animated | $(":animated") | It selects all animated elements |
| :focus | $(":focus") | It helps to selects all element that currently has focus |
| :contains(text) | $(":contains('Hello')") | It selects all elements which contains the text "Hello" |
| :has(selector) | $("div:has(p)") | It is used to select all <div> elements that have a <p>element |
| :empty | $(":empty") | It selects all elements that are empty |
| :parent | $(":parent") | It helps to select all elements that are a parent of another element |
| :hidden | $("p:hidden") | It helps to select all hidden <p> elements |
| :visible | $("table:visible") | It selects all visible tables |
| :root | $(":root") | It selects the document's root element |
| :lang(language) | $("p:lang(de)") | It selects all <div> elements with a lang attribute value starting with "de" |
| [attribute] | $("[href]") | It selects all the elements with a href attribute |
| [attribute=value] | $("[href='default.htm']") | It helps to selects all elements with a href attribute value equal to "default.htm" |
| [attribute!=value] | $("[href!='default.htm']") | This selector selects all elements with a href attribute value not equal to "default.htm" |
| [attribute$=value] | $("[href$='.jpg']") | This selector selects all elements with a href attribute value ending with ".jpg" |
| [attribute|=value] | $("[title|='Tomorrow']") | It is used to selects all elements with a title attribute value equal to 'Tomorrow', or starting with 'Tomorrow' followed by a hyphen |
| [attribute^=value] | $("[title^='Tom']") | It helps to selects elements with a title attribute value starting with "Tom" |
| [attribute~=value] | $("[title~='hello']") | It helps to selects elements with a title attribute value containing the specific word "hello" |
| [attribute*=value] | $("[title*='hello']") | It is used to selects elements with a title attribute value containing the word "hello" |
| :input | $(":input") | Selects all input elements |
| :text | $(":text") | Selects all input elements with type="text" |
| :password | $(":password") | It is used to selects all input elements with type="password" |
| :radio | $(":radio") | Selects all input elements with type="radio" |
| :checkbox | $(":checkbox") | Selects all input elements with type="checkbox" |
| :submit | $(":submit") | It selects all input elements with type="submit" |
| :reset | $(":reset") | It selects all input elements with type="reset" |
| :button | $(":button") | It is used to selects all input elements with type="button" |
| :image | $(":image") | It selects all input elements with type="image" |
| :file | $(":file") | It helps to selects all input elements with type="file" |
| :enabled | $(":enabled") | It is used to selects all enabled input elements |
| :disabled | $(":disabled") | Selects all disabled input elements |
| :selected | $(":selected") | It is used to selects all selected input elements |
| :checked | $(":checked") | It is used to selects all checked input elements |
jQuery Tutorial
jQuery History
jQuery Example
jQuery Selectors
jQuery – Effects
jQuery animate() Method
jQuery delay() Method
jQuery dequeue() Method
jQuery fadeIn() Method
jQuery fadeOut() Method
jQuery fadeTo() method
jQuery clearQueue() Method
jQuery fadeToggle() Method
jQuery finish() Method
jQuery hide() Method
jQuery show() Method
jQuery slideDown() Method
jQuery slideToggle() Method
jQuery slideUp() Method
jQuery stop() Method
jQuery toggle() Method
jQuery queue() Method
jQuery HTML / CSS Methods
jQuery Events
jQuery Selector Lists
jQuery Traversing Methods
jQuery AJAX Methods
No Sidebar ads