jQuery Selectors – Complete List

jQuery selectors are perhaps most important aspect of the jQuery library. These selectors use CSS like syntax to allow developers to easily select any set of page elements and perform operations on them. Understanding jQuery selectors is the key to using the jQuery library most effectively.

A jQuery statement typically follows the syntax pattern:

$(selector).methodName();

The selector is a string expression that identifies the set of DOM elements that will be collected into a matched set to be operated upon. jQuery selectors return jQuery objects, not DOM objects which are returned from javascript selectors.

If you want to use any of the meta characters, such as .#(), as a part of a class/id/name, you will need to escape the character with \\ two backslashes. For example, if you have an element with id="my.element", you would use the selector $("#my\\.element").

jQuery provides numerous ways to apply these selectors. Broadly, you can seperate them in below categories:

Basic Selectors
Attribute Selectors
Content Selectors
Hierarchy Selectors
Form Selectors
Visibility Selectors
Filtered Selectors

Basic jQuery Selectors

The basic selectors focus on the id attribute, class attribute, and tag name of HTML elements.

Syntax/ExampleDescription
All Selector ("*")Selects all elements in the page
Class Selector (".className")Selects all elements with the given class.
Element Selector ("element")Selects all elements with the given tag name.
ID Selector ("#id")Selects a single element with the given id attribute.
Multiple Selector ("selector1, selector2, selectorN")Selects the combined results of all the specified selectors.

Attribute jQuery Selectors

Another way to use jQuery selectors is to select HTML elements by their attribute values. It can be a default attribute or any custom attribute. Attribute values are denoted in the selector syntax by being enclosed in [] brackets e.g. $("a[rel='nofollow']").

These selectors see attribute values as a single string. For example, $("a[rel='nofollow']"), will select <a href=”example.html” rel=”nofollow”>Some text</a> but not <a href=”example.html” rel=”nofollow otherValue”>Some text</a>.
Syntax/ExampleDescription
[attributeName]Selects elements that have the specified attribute, with any value.
[attributeName = "value"]Selects elements that have the specified attribute with a value exactly equal to a certain value.
[attributeName != "value"]Selects elements that have the specified attribute with a value beginning exactly with a given string.
[attributeName ^= "value"]Selects elements that have the specified attribute with a value beginning exactly with a given string.
[attributeName $= "value"]Selects elements that have the specified attribute with a value ending exactly with a given string. The comparison is case sensitive.
[attributeName ~= "value"]Selects elements that have the specified attribute with a value containing a given word, delimited by spaces.
[attributeName *= "value"]Selects elements that have the specified attribute with a value containing a given substring.
[attributeName |= "value"]Selects elements that have the specified attribute with a value either equal to a given string or starting with that string followed by a hyphen (-).
[attributeName = "value"][attributeName2="value2"]Matches elements that match all of the specified attribute filters.

Content Selectors

Content selectors allow you to select HTML elements based on the content inside the HTML element.

Syntax/ExampleDescription
:contains()Select all elements that contain the specified text.
:emptySelect all elements that have no children (including text nodes).
:has()Selects elements which contain at least one element that matches the specified selector.
:parentInverse of :empty. Select all elements that have at least one child node (either an element or text).

Hierarchy Selectors

Hierarchy selectors allow you to select HTML elements based on the DOM hierarchy. This enables you to write dynamic code that is more content aware by only selecting elements based on parents, children, or other elements around them in the DOM tree.

Syntax/ExampleDescription
Child Selector ("parent > child")Selects all direct child elements specified by “child” of elements specified by “parent”.
Descendant Selector ("ancestor descendant")Selects all elements that are descendants of a given ancestor.
Next Adjacent Selector ("prev + next")Selects all next elements matching “next” that are immediately preceded by a sibling “prev”.
Next Siblings Selector ("prev ~ siblings")Selects all sibling elements that follow after the “prev” element, have the same parent, and match the filtering “siblings” selector.

Form Selectors

Form selectors enable you to select elements in the form based on the state of the form element.

Syntax/ExampleDescription
:button SelectorSelects all button elements and elements of type button.
:checkbox SelectorSelects all elements of type checkbox.
:checked SelectorMatches all elements that are checked or selected.
:disabled SelectorSelects all elements that are disabled.
:enabled SelectorSelects all elements that are enabled.
:file SelectorSelects all elements of type file.
:focus SelectorSelects element if it is currently focused.
:image SelectorSelects all elements of type image.
:input SelectorSelects all input, textarea, select and button elements.
:password SelectorSelects all elements of type password.
:radio SelectorSelects all elements of type radio.
:reset SelectorSelects all elements of type reset.
:selected SelectorSelects all elements that are selected.
:submit SelectorSelects all elements of type submit.
:text SelectorSelects all input elements of type text.

Visibility Selectors

If you are using visibility to control the flow and interactions of your web page components, using the visibility jQuery selectors makes it simple to select the HTML elements that are hidden or visible.

Syntax/ExampleDescription
:hidden SelectorSelects all elements that are hidden.
:visible SelectorSelects all elements that are visible.

Filtered Selectors

Often you will need to refine your jQuery selectors down to a more specific subset. One way to accomplish that is to use filtered selectors. Filtered selectors append a filter on the end of the selector statement that limits the results returned by the selector.

Syntax/ExampleDescription
:animated SelectorSelect all elements that are in the progress of an animation at the time the selector is run.
:eq() SelectorSelect the element at index n within the matched set.
:even SelectorSelects even elements, zero-indexed.
:odd SelectorSelects odd elements, zero-indexed.
:first SelectorSelects the first matched element.
:last SelectorSelects the last matched element.
:focus SelectorSelects element if it is currently focused.
:gt() SelectorSelect all elements at an index greater than index within the matched set.
:lt() SelectorSelect all elements at an index less than index within the matched set.
:header SelectorSelects all elements that are headers, like h1, h2, h3 and so on.
:lang() SelectorSelects all elements of the specified language.
:not() SelectorSelects all elements that do not match the given selector.
:root SelectorSelects the element that is the root of the document.
:target SelectorSelects the target element indicated by the fragment identifier of the document’s URI.

Giving example of all above jQuery selectors is not possible in single place so we will learn about these selectors in their separate posts.

Happy Learning !!

Was this post helpful?

Join 7000+ Fellow Programmers

Subscribe to get new post notifications, industry updates, best practices, and much more. Directly into your inbox, for free.

Leave a Comment

HowToDoInJava

A blog about Java and its related technologies, the best practices, algorithms, interview questions, scripting languages, and Python.