Open In App
Related Articles

jQuery Selectors Complete Reference

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

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>
    <script src=
    </script>
  
    <script>
        $(document).ready(function () {
            $(".GEEKS").css("background-color", "green");
        });
    </script>
</head>
  
<body>
    <p class="GEEKS">GeeksforGeeks</p>
  
    <span class="GEEKS">
        jQuery|.class selector
    </span>
</body>
  
</html>

                    

Output:

 

All the jQuery selectors are listed below:

jQuery Selectors

Description

Example

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


Last Updated : 29 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads