JQUERY BASIC
JQUERY EFFECTS
JQUERY MANIPULATION
JQUERY ADVANCED
JQUERY EXAMPLES
JQUERY REFERENCE
Advertisements

jQuery Selectors

The following section contains a brief overview of jQuery selectors.

jQuery Selectors Order by Alphabet

This section contains a comprehensive list of selectors belonging to the latest jQuery JavaScript library. All the selectors are grouped into categories.

Basic Selectors

Selector Example Description
* $("*") Selects all elements.
#id $("#foo") Selects all elements with the id="foo".
.class $(".bar") Selects all elements with the class="bar".
element $("p") Selects all <p> elements.
selector1, selector2, selectorN $("h1, p.bar, span") Selects all <h1> and <span>, but only that <p> elements that has the class="bar".

Basic Filter Selectors

Selector Example Description
:first $("p:first") Selects the first <p> element.
:last $("p:last") Selects the last <p> element.
:even $("tr:even") Selects all even <tr> elements, zero-indexed.
:odd $("tr:odd") Selects all odd <tr> elements, zero-indexed.
:eq() $("tr:eq(1)") Select the 2nd <tr> element within the matched set, zero-based index.
:not() $("p:not(:empty)") Select all <p> elements that are not empty.
:lt() $("ul li:lt(3)") Select all <li> elements at an index less than three within the matched set (i.e. selects 1st, 2nd, 3rd list elements), zero-based index.
:gt() $("ul li:gt(3)") Select all <li> elements at an index greater than three within the matched set (i.e. selects 4th, 5th, ... list elements), zero-based index.
:header $(":header") Selects all elements that are headers, like <h1>, <h2>, <h3> and so on.
:lang() $(":lang(en)") Selects all elements that have a language value "en" i.e. lang="en", lang="en-us" etc.
:root $(":root") Selects the document's root element which is always <html> element in a HTML document.
:animated $(":animated") Select all elements that are animating at the time the selector is run.

Child Filter Selectors

Selector Example Description
: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.
:nth-child(n) $("p:nth-child(3)") Selects all <p> elements that are the 3rd child of their parent.
:only-child $("p:only-child") Selects all <p> elements that are the only child of their parent.
:first-of-type $("p:first-of-type") Selects all <p> elements that are the first <p> element of their parent.
:last-of-type $("p:last-of-type") Selects all <p> elements that are the last <p> element of their parent.
:only-of-type $("p:only-of-type") Selects all <p> elements that have no siblings with the same element name.
:nth-last-child(n) $("p:nth-last-child(3)") Selects all <p> elements that are the 3rd-child of their parent, counting from the last element to the first.
:nth-of-type(n) $("p:nth-of-type(2)") Selects all <p> elements that are the 2nd <p> element of their parent
:nth-last-of-type(n) $("p:nth-last-of-type(2)") Selects all <p> elements that are the 2nd-child of their parent, counting from the last element to the first.

Content Filter Selectors

Selector Example Description
:contains() $('p:contains("Hello")') Selects all <p> elements that contains the text "Hello".
:empty $("td:empty") Selects all <td> elements that are empty i.e that have no children including text.
:has() $("p:has(img)") Selects all <p> elements which contain at least one <img> element.
:parent $(":parent") Select all elements that have at least one child node either an element or text.

Form Selectors

Selector Example Description
:input $(":input") Selects all input, textarea, select and button elements (basically selects all form controls).
:text $(":text") Selects all input elements with type="text".
:password $(":password") 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".
:button $(":button") Selects all input and button elements with type="button".
:submit $(":submit") Selects all input and button elements with type="submit".
:reset $(":reset") Selects all input and button elements with type="reset".
:image $(":image") Selects all input elements with type="image".
:file $(":file") Selects all input elements with type="file".
:enabled $(":enabled") Selects all elements that are enabled.
:disabled $(":disabled") Selects all elements that are disabled.
:selected $(":selected") Selects all elements that are selected, only works for <option> elements.
:checked $(":checked") Selects all elements that are checked or selected, works for checkboxes, radio buttons, and select elements.
:focus $(":focus") Selects element if it is currently focused.

Attribute Selectors

Selector Example Description
[attribute] $("[href]") Selects all elements with a href attribute, with any value.
[attribute="value"] $('a[target="_blank"]') Selects all <a> elements that have the target attribute with a value equal to "_blank".
[attribute="value"] $('a[target!="_blank"]') Selects all <a> elements that don't have the target attribute, or if have don't with a value "_blank".
[attribute$="value"] $('img[src$=".png"]') Selects all <img> elements that have the src attribute with a value ending with ".png".
[attribute|="value"] $('a[hreflang|="en"]') Selects all <a> elements that have the hreflang attribute with a value equal to "en", or starting with "en" followed by a hyphen, like "en-US".
[attribute^="value"] $('img[title^="Smiley"]') Selects all <img> elements that have the title attribute with a value beginning exactly with a "Smiley" string.
[attribute~="value"] $('img[title~="Kites"]') Selects all <img> elements that have the title attribute with a value containing the word "Kites", delimited by spaces.
[attribute*="value"] $('input[name*="male"]') Selects all <input> elements that have the name attribute with a value containing the substring "male".

Hierarchy Selectors

Selector Example Description
parent > child $("ul > li") Selects all <li> elements that are direct child of their parent <ul> element.
ancestor descendant $("form label") Selects all <label> elements that are descendant of their ancestor <form> element.
prev + next $("h1 + p") Selects all <p> elements that are next i.e. immediately preceded to the <h1> elements.
prev ~ siblings $("h1 ~ p") Selects all <p> elements that are siblings and follow after the <h1> elements.

Visibility Filter Selectors

Selector Example Description
:hidden $("p:hidden") Selects all <p> elements that are hidden.
:visible $("p:visible") Selects all <p> elements that are visible.

This section contains a comprehensive list of selectors belonging to the latest jQuery JavaScript library. All the selectors are listed alphabetically.

Selector Example Description
* $("*") Selects all elements.
#id $("#foo") Selects all elements with the id="foo".
.class $(".bar") Selects all elements with the class="bar".
element $("p") Selects all <p> elements.
selector1, selector2, selectorN $("h1, p.bar, span") Selects all <h1> and <span>, but only that <p> elements that has the class="bar".
ancestor descendant $("form label") Selects all <label> elements that are descendant of their ancestor <form> element.
parent > child $("ul > li") Selects all <li> elements that are direct child of their parent <ul> element.
prev + next $("h1 + p") Selects all <p> elements that are next i.e. immediately preceded to the <h1> elements.
prev ~ siblings $("h1 ~ p") Selects all <p> elements that are siblings and follow after the <h1> elements.
:animated $(":animated") Select all elements that are animating at the time the selector is run.
[attribute] $("[href]") Selects all elements with a href attribute, with any value.
[attribute="value"] $('a[target="_blank"]') Selects all <a> elements that have the target attribute with a value equal to "_blank".
[attribute|="value"] $('a[hreflang|="en"]') Selects all <a> elements that have the hreflang attribute with a value equal to "en", or starting with "en" followed by a hyphen, like "en-US".
[attribute*="value"] $('input[name*="male"]') Selects all <input> elements that have the name attribute with a value containing the substring "male".
[attribute~="value"] $('img[title~="Kites"]') Selects all <img> elements that have the title attribute with a value containing the word "Kites", delimited by spaces.
[attribute$="value"] $('img[src$=".png"]') Selects all <img> elements that have the src attribute with a value ending with ".png".
[attribute!="value"] $('a[target!="_blank"]') Selects all <a> elements that don't have the target attribute, or if have don't with a value "_blank".
[attribute^="value"] $('img[title^="Smiley"]') Selects all <img> elements that have the title attribute with a value beginning exactly with a "Smiley" string.
:button $(":button") Selects all input and button elements with type="button".
:checkbox $(":checkbox") Selects all input elements with type="checkbox".
:checked $(":checked") Selects all elements that are checked or selected, works for checkboxes, radio buttons, and select elements.
:contains() $('p:contains("Hello")') Selects all <p> elements that contains the text "Hello".
:disabled $(":disabled") Selects all elements that are disabled.
:empty $("td:empty") Selects all <td> elements that are empty i.e that have no children including text.
:enabled $(":enabled") Selects all elements that are enabled.
:eq() $("tr:eq(1)") Select the 2nd <tr> element within the matched set, zero-based index.
:even $("tr:even") Selects all even <tr> elements, zero-indexed.
:file $(":file") Selects all input elements with type="file".
:first-child $("p:first-child") Selects all <p> elements that are the first child of their parent.
:first-of-type $("p:first-of-type") Selects all <p> elements that are the first <p> element of their parent.
:first $("p:first") Selects the first <p> element.
:focus $(":focus") Selects element if it is currently focused.
:gt() $("ul li:gt(3)") Select all <li> elements at an index greater than three within the matched set (i.e. selects 4th, 5th, ... list elements), zero-based index.
:has() $("p:has(img)") Selects all <p> elements which contain at least one <img> element.
:header $(":header") Selects all elements that are headers, like <h1>, <h2>, <h3> and so on.
:hidden $("p:hidden") Selects all <p> elements that are hidden.
:image $(":image") Selects all input elements with type="image".
:input $(":input") Selects all input, textarea, select and button elements (basically selects all form controls).
:lang() $(":lang(en)") Selects all elements that have a language value "en" i.e. lang="en", lang="en-us" etc.
:last-child $("p:last-child") Selects all <p> elements that are the last child of their parent.
:last-of-type $("p:last-of-type") Selects all <p> elements that are the last <p> element of their parent.
:last $("p:last") Selects the last <p> element.
:lt() $("ul li:lt(3)") Select all <li> elements at an index less than three within the matched set (i.e. selects 1st, 2nd, 3rd list elements), zero-based index.
:not() $("p:not(:empty)") Select all <p> elements that are not empty.
:nth-child(n) $("p:nth-child(3)") Selects all <p> elements that are the 3rd child of their parent.
:nth-last-child(n) $("p:nth-last-child(3)") Selects all <p> elements that are the 3rd-child of their parent, counting from the last element to the first.
:nth-last-of-type(n) $("p:nth-last-of-type(2)") Selects all <p> elements that are the 2nd-child of their parent, counting from the last element to the first.
:nth-of-type(n) $("p:nth-of-type(2)") Selects all <p> elements that are the 2nd <p> element of their parent
:odd $("tr:odd") Selects all odd <tr> elements, zero-indexed.
: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 have no siblings with the same element name.
:parent $(":parent") Select all elements that have at least one child node either an element or text.
:password $(":password") Selects all input elements with type="password".
:radio $(":radio") Selects all input elements with type="radio".
:reset $(":reset") Selects all input and button elements with type="reset".
:root $(":root") Selects the document's root element which is always <html> element in a HTML document.
:selected $(":selected") Selects all elements that are selected, only works for <option> elements.
:submit $(":submit") Selects all input and button elements with type="submit".
:text $(":text") Selects all input elements with type="text".
:visible $("p:visible") Selects all <p> elements that are visible.
Advertisements
Bootstrap UI Design Templates Property Marvels - A Leading Real Estate Portal for Premium Properties