jQuery Selectors

jQuery Selectors

The following are the list of Selectors available in jQuery.

Note: The following selectors are arranged in such a way for easy understanding.

SelectorQuick LookExplanation
#id#pointSelects an element with id name 'point' i.e) id="point"
.class.pointSelects all element with class name 'point' i.e) class="point"
elementh2Select all <h2> elements
**Selects all elements
Multiple#id, .class, elementSelects the combined results of all the specified selectors.
element elementdiv pSelects all <p> elements inside <div> elements
:button:buttonSelects all button elements and elements of type button.
:reset:resetSelects all elements of type reset.
:submit:submitSelects all button elements and elements of type submit.
:image:imageSelects all elements of type image.
:checkbox:checkboxSelects all elements of type checkbox.
:checked:checkedSelects all elements that are checked or selected.
:first:firstSelects the first matched DOM element.
:last:lastSelects the last matched DOM element.
:eq()p:eq(1)Selects <p> element with the index number 1.
:lt()p:lt(1)Selects all <p> elements with an index number less than 1.
:gt()p:gt(1)Selects all <p> elements with an index number greater than 1.
:evenp:evenSelects all even <p> elements starts from zero index.
:oddp:oddSelects all odd <p> elements starts from zero index.
:focusinput:focusSelects <input> element if it is currently focused.
:header:headerSelects all elements that are headers.
:input:inputSelects all input, textarea, select and button elements.
:root:rootSelects the element that is the root of the document.
:textinput:textSelects all <input> elements of type text.
:radioinput:radioSelects all <input> elements of type radio
:file:fileSelects all <input> elements of type file
:passwordinput:passwordSelects all <input> elements of type password.
:selected:selectedSelects all elements that are selected.
:parenttd:parentSelects all <td> elements that have at least one child node (either an element or text).
:emptytd:emptySelects all <td> elements that have no children (either an element or text).
:animateddiv:animatedSelects all <div> elements that are currently animated.
:enabledinput:enabledSelects all <input> elements that are enabled.
:disabledinput:disabledSelects all <input> elements that are disabled.
:visiblep:visibleSelects all <p> elements that are visible.
:hiddenp:hiddenSelects all <p> elements that are hidden.
:lang()p:lang('en')Selects all <p> elements that have the specified language (english).
:hasp:has(span)Selects all <p> elements which contain one or more <span> elements.
:notp:not(.point)Selects all <p> elements that do not match the given selector (class="point").
:contains()p:contains(fun)Selects all <p> elements that contain the specified text ("fun").
:first-childp:first-childSelects all <p> elements that are the first child of their parent.
:last-childp:last-childSelects all <p> elements that are the last child of their parent.
:first-of-typep:first-of-typeSelects all <p> elements those are the first child, of a particular type, of their parent.
:last-of-typep:last-of-typeSelects all <p> elements those are the last child, of a particular type, of their parent.
:nth-child()h1:nth-child(1)Selects all first <h1> elements, regardless of type, of their parent.
:nth-last-child()p:nth-last-child(1)Selects all last <p> elements, regardless of type, of their parent.
:nth-of-type()p:nth-of-type(1)Selects all first <p> elements, of a particular type, of their parent.
:nth-last-of-type()p:nth-last-of-type(1)Selects all last <p> elements, of a particular type, of their parent.
:only-of-typep:only-of-typeSelects all <p> elements that have no siblings with the same element name.
:only-childp:only-childSelects all <p> elements that are the only child of their parent.
(prev + next)("h1 + p")Selects all <p> elements that are placed immediately after <h1> elements.
(prev ~ next)("h1 ~ p")Selects all <p> elements that are placed after <h1> elements
(parent > child)(div > p)Selects only <p> that are direct children of <div>.
[attribute|='value'][placeholder|='Your']Selects all elements with a placeholder attribute value starting with "Your-".
[attribute*='value'][placeholder*='our']Selects all elements with a placeholder attribute value contains the substring of "our"
[attribute~='value'][placeholder~='Date']Selects all elements with a placeholder attribute containing the word "Date".
[attribute='value'][placeholder='Your Age']Selects all elements with a placeholder attribute containing the exact word "Your Age".
[attribute!='value'][placeholder!='Your Age']Selects all elements with a placeholder attribute does not containing the exact word "Your Age".
[attribute$='value'][placeholder$='Age']Selects all elements with a placeholder attribute value ending with "Age".
[attribute^='value'][placeholder^='Your']Selects all elements with a placeholder attribute value starting with "Your".
("[attrFilter1][attrFilter2][attrFilterN]")[type='text'][placeholder!='Your Age']Selects elements that match all of the specified attribute filters.

Reminder

Hi Developers, we almost covered 99.5% of jQuery Tutorials with examples for quick and easy learning.

We are working to cover every Single Concept in jQuery.

Please do google search for:

Join Our Channel

Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.

This channel is primarily useful for Full Stack Web Developer.

Meet the Author