jQuery Selectors Types of Selectors

Example

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"></a>  <!-- 4 -->
<span class="example"></span>              <!-- 5 -->

Selecting by Type:

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

$("a")

Selecting by Class

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

$(".example")

Selecting by ID

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

$("#second-link")

Selecting by Possession of Attribute

The following jQuery selector will select all elements with a defined href attribute, including 1 and 4.

$("[href]")

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.

$("[href='index.html']")

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 0 hence the second got selected here!).

$("a:eq(1)")

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

$("a").not(":eq(0)")

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.

$("a:not(.example)")

Selecting by Pseudo-state

You can also select in jQuery using pseudo-states, including :first-child, :last-child, :first-of-type, :last-of-type, etc.

The following jQuery selector will only select the first <a> element: number 1.

$("a:first-of-type")

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: class1, class2, and 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