Skip to content
Related Articles

Related Articles

jQuery Selectors Complete Reference

Improve Article
Save Article
  • Last Updated : 24 Nov, 2022
Improve Article
Save Article

jQuery selectors are used to select the HTML element(s) and allow you to manipulate the HTML element(s) in a 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

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

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!