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.
.#(), 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/Example | Description |
|---|---|
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']").
$("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/Example | Description |
|---|---|
[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/Example | Description |
|---|---|
:contains() |
Select all elements that contain the specified text. |
:empty |
Select all elements that have no children (including text nodes). |
:has() |
Selects elements which contain at least one element that matches the specified selector. |
:parent |
Inverse 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/Example | Description |
|---|---|
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/Example | Description |
|---|---|
:button Selector |
Selects all button elements and elements of type button. |
:checkbox Selector |
Selects all elements of type checkbox. |
:checked Selector |
Matches all elements that are checked or selected. |
:disabled Selector |
Selects all elements that are disabled. |
:enabled Selector |
Selects all elements that are enabled. |
:file Selector |
Selects all elements of type file. |
:focus Selector |
Selects element if it is currently focused. |
:image Selector |
Selects all elements of type image. |
:input Selector |
Selects all input, textarea, select and button elements. |
:password Selector |
Selects all elements of type password. |
:radio Selector |
Selects all elements of type radio. |
:reset Selector |
Selects all elements of type reset. |
:selected Selector |
Selects all elements that are selected. |
:submit Selector |
Selects all elements of type submit. |
:text Selector |
Selects 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/Example | Description |
|---|---|
:hidden Selector |
Selects all elements that are hidden. |
:visible Selector |
Selects 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/Example | Description |
|---|---|
:animated Selector |
Select all elements that are in the progress of an animation at the time the selector is run. |
:eq() Selector |
Select the element at index n within the matched set. |
:even Selector |
Selects even elements, zero-indexed. |
:odd Selector |
Selects odd elements, zero-indexed. |
:first Selector |
Selects the first matched element. |
:last Selector |
Selects the last matched element. |
:focus Selector |
Selects element if it is currently focused. |
:gt() Selector |
Select all elements at an index greater than index within the matched set. |
:lt() Selector |
Select all elements at an index less than index within the matched set. |
:header Selector |
Selects all elements that are headers, like h1, h2, h3 and so on. |
:lang() Selector |
Selects all elements of the specified language. |
:not() Selector |
Selects all elements that do not match the given selector. |
:root Selector |
Selects the element that is the root of the document. |
:target Selector |
Selects 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 !!