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

No Sidebar ads