Open In App

jQuery Selectors Complete Reference

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
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

#id Specifies an id for an element to be selected.
Try

.class Specifies the class for an element to be selected.
Try

.class, .class select multiple classes of an HTML document.
Try

element Select and modify HTML elements based on the element name.
Try

element1, element2 Select multiple elements of an HTML document.
Try

:first Select the first element of the specified type. 
Try

:last Select the last element of the specified type.
Try

:even Select an even number index from the elements.
Try

:odd Select an odd number index from the elements.
Try

;first-child Select every element that is the first child of its parent element.
Try

:first-of-type Select all elements that are the first child, of a particular type, of their parent.
Try

:last-child It is a jQuery Selector used to select every element that is the last child of its parent. 
Try

:last-of-type Select 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-child Select every element that is the only child of its parent i.e only a single child is selected. 
Try

:only-of-type Select all the elements that are the only child of their parent. 
Try

parent > child Select all elements that are the direct child of their parent element. 
Try

parent descendant Selects every element which is descendant to a specific(parent) element. 
Try

element + next Select the just “next” element of the specified “element”. 
Try

element ~ siblings Select 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

:header Select all the heading elements that are from (<h1> to <h6>).
Try

animated Select the element that is currently animated.
Try

:focus select 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

:empty It is used to select empty elements.
Try

:parent Select all elements that are the parent of another element, including text nodes. 
Try

:hidden selects hidden elements to work upon. 
Try

:visible Select 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

:input It is used to select input elements. This selector is also used with a button element.
Try

:text Select an input element with a text field i.e (type==text). 
Try

:password Select the input element having a password field. i.e (type==password)
Try

:radio Select 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

:reset Select 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

:image Select the input elements with a type equal to the image
Try

:file Selects the input element having a file field.(type==file) 
Try

:enabled Select 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