Jquery 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"></a> <!-- 4 -->
<span class="example"></span> <!-- 5 -->Selecting by Type:
The following jQuery selector will select all 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 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 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 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, :lastof-type, etc.
The following jQuery selector will only select the first 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:firstchild")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