jQuery Selectors Complete Reference

Last Updated : 18 Apr, 2025

jQuery selectors are used to select the HTML element(s) and allow you to manipulate the HTML element(s) in the way we want. It selects the HTML elements on a variable parameter such as their name, classes, id, types, attributes, attribute values, etc.

Syntax:

$("")

Example: In this example, we will select a class by using jQuery .class Selector.

HTML

<!DOCTYPE html>
<html> 

<head> 
    <!-- Ensure that jQuery is properly linked -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 

    <script> 
        $(document).ready(function () { 
            // Set background color to green for elements with class 'GEEKS'
            $(".GEEKS").css("background-color", "green"); 
        }); 
    </script> 
</head> 

<body> 
    <!-- Paragraph with class 'GEEKS' -->
    <p class="GEEKS">GeeksforGeeks</p> 

    <!-- Span with class 'GEEKS' -->
    <span class="GEEKS">jQuery | .class selector</span> 
</body> 

</html>

Output:

jQuery Selectors

All the jQuery selectors are listed below:

jQuery Selectors	Description
*	Selects all the elements in the document, including HTML, body, and head.
#id	Specifies an id for an element to be selected.
.class	Specifies the class for an element to be selected.
.class, .class	select multiple classes of an HTML document.
element	Select and modify HTML elements based on the element name.
element1, element2	Select multiple elements of an HTML document.
:first	Select the first element of the specified type.
:last	Select the last element of the specified type.
:even	Select an even number index from the elements.
:odd	Select an odd number index from the elements.
;first-child	Select every element that is the first child of its parent element.
:first-of-type	Select all elements that are the first child, of a particular type, of their parent.
:last-child	It is a jQuery Selector used to select every element that is the last child of its parent.
:last-of-type	Select all elements which are the last child of their parent.
:nth-child()	Selects all elements that are the nth-child of their parent elements.
:nth-last-child()	Select all elements that are the nth last child of their parent.
:nth-of-type()	Select all the nth-child elements of the specified parent.
:nth-last-of-type()	Select all children of a parent with the same element name, counting from the last to the first.
:only-child	Select every element that is the only child of its parent i.e only a single child is selected.
:only-of-type	Select all the elements that are the only child of their parent.
parent > child	Select all elements that are the direct child of their parent element.
parent descendant	Selects every element which is descendant to a specific(parent) element.
element + next	Select the just “next” element of the specified “element”.
element ~ siblings	Select all elements that are siblings of the specified element.
eq()	It is used to locate the selected elements directly and returns an element with a specific index.
:gt()	Select all elements with an index greater than the index mentioned in the matched set.
:lt()	Selects elements using an index number that works on less than a specified number.
:not()	Select all the elements which are not selected.
:header	Select all the heading elements that are from (<h1> to <h6>).
animated	Select the element that is currently animated.
:focus	select all the elements that have focused on the document currently.
:contains()	It is used to select elements containing the specified string.
:has()	Select all elements that have one or more elements inside of them, that match the specified selector.
:empty	It is used to select empty elements.
:parent	Select all elements that are the parent of another element, including text nodes.
:hidden	selects hidden elements to work upon.
:visible	Select all the elements that are currently visible in the document.
:root	Select the root element of the HTML document.
:lang()	Select all the elements which have the lang attribute with the specified value.
[attribute]	Select all the elements with the specified attribute.
[attribute!=value]	Select each element that doesn’t have the specified attribute and value.
[attribute$=value]	Select each element with a specific attribute, with a specific ending string.
[attribute\|=value]	Select each element with a specific attribute, with a specific string value (like “geeks”).
[attribute^=value]	Select all elements with the given attribute specified by the attribute parameter.
[attribute~=value]	Select all elements with a name attribute that contains the specific string.
[attribute*=value]	Select all elements with attributes specified by the attribute parameter.
:input	It is used to select input elements. This selector is also used with a button element.
:text	Select an input element with a text field i.e (type==text).
:password	Select the input element having a password field. i.e (type==password)
:radio	Select all elements of type radio.
:checkbox	Selects input elements with type=checkbox.
:submit	Select the submit button and input the element having the submitted type field.
:reset	Select the input element having a reset field button.i.e <input type=”button”>.
:button	Selects button elements and input elements with type=”button”.
:image	Select the input elements with a type equal to the image
:file	Selects the input element having a file field.(type==file)
:enabled	Select all enabled form elements.
:disabled	Selecting all disabled form elements.
:selected	Select option elements that are pre-selected.
:checked	Checked checkboxes, radio buttons, and options of select elements.

jQuery Event Methods Complete Reference

Vishal_Khoda

Improve

Article Tags :

jQuery Selectors Complete Reference

Similar Reads

jQuery Selectors

jQuery Events

jQuery Effects

jQuery HTML/CSS

jQuery Traversing

Thank You!

What kind of Experience do you want to share?