All Jquery selectors type with example

A jQuery selectors selects or finds a DOM (document object model) element in an HTML document. It is used to select HTML elements based on id, name, types, attributes, class and etc. It is based on existing CSS selectors. 

Elements can be selected by jQuery using jQuery Selectors. The function returns either an element or a list of elements

Basic selectors 

$("*")                                             //All elements
$("div")                                          // All <div> elements     
$(".blue")                                       // All elements with class=blue
$(".blue.red")                                 // All elements with class=blue AND class=red
$(".blue,.red")                                // All elements with class=blue AND class=red
$("#headline")                               // The (first) element with id=headline
$("[href]")                                     // All elements with an href attribute
$("[href='example.com']")            // All elements with href=example.com

Relational operators

$("div span")                               // All <span>s that are descendants of a <div>
$("div > span")                           // All <span>s that are a direct child of a <div>
$("a ~ span")                              // All <span>s that are siblings following an <a> 
$("a + span")                              // All <span>s that are immediately after an <a>

Types of Selectors 

In jQuery you can select elements in a page using many various properties of the element, including:

  • Type
  • Class
  • ID
  • Possession of Attribute
  • Attribute Value
  • Indexed Selector
  • Pseudo-state 

If you know CSS selectors you will notice selectors in jQuery are the same (with minor exceptions).
Take the following HTML for example: 

<a href="index.html"></a>                          <!-- 1 -->
<a id="second-link"></a>                            <!-- 2 -->
<a class="example"></a>                             <!-- 3 -->
<a class="example" href="about.html">      <!-- 4 -->
</a> <span class="example"></span>        <!-- 5 -->

Selecting by Type: 
The following jQuery selector will select all <a> elements, including 1, 2, 3 and 4. 


Selecting by Class:
The following jQuery selector will select all elements of class example (including non-a elements), which are 3, 4 and 5. 



Selecting by ID:
The following jQuery selector will select the element with the given ID, which is 2. 


Selecting by Possession of Attribute:
The following jQuery selector will select all elements with a defined href attribute, including 1 and 4. 


Selecting by Attribute Value:
The following jQuery selector will select all elements where the href attribute exists with a value of index.html, which is just 1. 


Selecting by Indexed Position (Indexed Selector):
The following jQuery selector will select only 1, the second <a> ie. the second-link because index supplied is 1 like eq(1(Note that the index starts at hence the second got selected here!). 


Selecting with Indexed Exclusion:
To exclude an element by using its index :not(:eq()) 
The following selects <a> elements, except that with the class example, which is 1 


Selecting with Exclusion:
To exclude an element from a selection, use :not() 
The following selects <a> elements, except those with the class example, which are 1 and 2. 


Selecting by Pseudo-state:
You can also select in jQuery using pseudo-states, including :first-child, :last-child, :first-of-type, :lastof-type, etc. 
The following jQuery selector will only select the first <a> element: number 1.


Combining jQuery selectors:
You can also increase your specificity by combining multiple jQuery selectors; you can combine any number of them or combine all of them. You can also select multiple classes, attributes and states at the same time. 

$("a.class1.class2.class3#someID[attr1][attr2='something'][attr3='something']:first-of-type:first- child"

This would select an <a> element that:

  • Has the following classes: class1class2and class3
  • Has the following ID: someID
  • Has the following Attribute: attr1
  • Has the following Attributes and values: attr2 with value something, attr3 with value something
    Has the following states: first-child and first-of-type 

You can also separate different selectors with a comma: 

$("a, .class1, #someID"

This would select:

  • All <a> elements
  • All elements that have the class class1
  • An element with the id #someID 

Child and Sibling selection:
jQuery selectors generally conform to the same conventions as CSS, which allows you to select children and siblings in the same way.

  • To select a non-direct child, use a space
  • To select a direct child, use a >
  • To select an adjacent sibling following the first, use a +
  • To select a non-adjacent sibling following the first, use a ~ 

Wildcard selection:
There might be cases when we want to select all elements but there is not a common property to select upon (class, attribute etc). In that case we can use the * selector that simply selects all the elements: 

$('#wrapper *'// Select all elements inside #wrapper element