jquery selectors

jquery offers a powerful set of tools for matching a set of elements in a document.

look all type of selectors in table which type you need.

basic selectors

selectorexampledescription
*$('*')selects all elements.
#id$("#top")selects the element with the id="top".
.class$(".outer")selects all elements with the class="outer".
element$("div")selects all <div> elements.
el1,el2,el3$("div,p,h1")selects all <div>, <p>, and  <h1> elements.

hierarchy selectors

selectorexampledescription
parent > child$("ul>li")selects all <li> elements that are direct child of a <ul> element.
element + next$("div+p")selects <p> element that are next to each <div> element.
element ~ siblings$("div ~ h1")selects all <h1> elements that are siblings of a <div> element.
descendant$("div p")selects all <p> elements that are descendants of a <div> element.

attribute selectors

selectorexampledescription
[attribute]$("[href]")selects all elements with href attribute.
[attribute = value]$("[href='./dex.php']")selects all elements with href attribute value equal to

'./dex.php'
[attribute != value]$("[herf!='.dex.php']")selects all elements with href attribute value not

equal to './dex.php'
[attribute |= value]$("[href |= 'www']")selects all elements with a href attribute value

starting with 'www'.
[attribute $= value]$("[href $= '.php']")selects all elements with a href attribute value

ending with '.php'
[attribute ~= value]$("[class ~= 'top']")selects all elements with a class attribute value

containing the word 'top'
[attribute ^= value]$("[class ^= 'top']")selects all elements with a class attribute value start

with 'top'.
[attribute *= value]$("[class *= 'top']")selects all elements with a class attribute value

contain string 'top'.

form selectors

selectorexampledescription
:input$(":input")select all input elements.
:password$(":password")select all elements with type='password' .
:text$(":text")select all elements with type='text' .
:button$(":button")select all elements with type="button" .
:radio$(":radio")select all elements with type='radio' .
:checkbox$(":checkbox")select all elements with type='checkbox' .
:submit$(":submit")select all elements with type="submit" .
:reset$(":reset")select all elements with type="reset" .
:file$(":reset")select all elements with type="file" .
:selected$(":selected")selects all selected input elements.
:disabled$(":disabled")selects all disabled input elements.
:enabled$(":enabled")selects all enabled input elements.
:checked$(":checked")selects all checked input elements.

filters type selectors

selectorexampledescription
:first$("p:first")select the first <p> element .
:last$("p:last")select the last <p> element .
:odd$("li:odd")select all odd <li> element .
:even$("li:even")select all event <li> element .
:first-child$("p:first-child")selects all <p> elements that are first child of their

parent.
:last-child$("p:last-child")selects all <p> elements that are last child of their

parent.
:first-of-type$("p:first-of-type")selects all <p> element that are the first <p>

element of their parent.
:last-of-type$("p:last-of-type")selects all <p> element that are the last <p>

element of their parent.
:only-child$("p:only-child")selects all <p> elements that are the only child of

their parent.
:only-of-type$("p:only-of-type")selects all <p> elements that are the only child,

of its type of their parent.
:nth-child(n)$("p:nth-child(3)")selects all <p> elements that are the 3nd child of

their parent.
:nth-last-child(n)$(p:nth-last-child(3))selects all <p> elements that are that are the 3nd

child of their parent,count from the last child.
:nth-of-type(n)$("p:nth-of-type")selects all <p> elements that are the 3nd <p>

element of their parent.
:gt(no)$("ul li:gt(2)")selects list elements with index greater than 2.
:lt(no)$("ul li:lt(2)")selects list elements with index less than 2.
:eq(index)$("ul li:eq(2)")select the third element in the list
:not(selector)$("input:not(:empty)")select all input elements that are not empty.
:empty$(":empty")selects all elements that are empty.
:hidden$("div:hidden")selects all hidden <div>elements.
:visible$("div:visible")selects all visible <div> elements.
:root$(":root")selects root element.
:focus$(":focus")select the element that has focus.
:header$(":header")select all header elements <h1> ..
:animated$(":animated")selects all animated elements.
:contains(text)$("container('sandeep')")elements that contains with the text 'sandeep'.
:has(selector)$("div:has(p)")selects <div> elements that have <p>element.
:lang(language)$("p:lang(en)")<p> elements with lang attribute value starting

with 'en'