Jquery Types of Selectors
In jQuery you can select elements in a page using many various properties of the element, including:
Possession of Attribute
If you know CSS selectors you will notice selectors in jQuery are the same (with minor exceptions).
Take the following HTML for example:
Selecting by Type:
The following jQuery selector will select all 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 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!).
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
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.
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.
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.
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:
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 ~
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: