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.
- Tag: No marker, use the tag directly
- Attribute with value:
- Attribute starts with value
[attributeName ^= 'value']
- Attribute ends with value
- Attribute contains value
[attributeName *= 'value']
- Any descendant: Space between selectors
- Direct children:
- Adjacent sibling following the first:
- Non-adjacent sibling following the first:
,(comma) between selector
attribute which contains some special characters like
the characters need to be escaped using two backslashes
the selectors will be framed like,
Elements can be selected by jQuery using jQuery Selectors. The function returns either an element or a list of elements.
Each time you use a selector in jQuery the DOM is searched for elements that match your query. Doing this too often or repeatedly will decrease performance. If you refer to a specific selector more than once you should add it to the cache by assigning it to a variable:
This would replace:
Caching this selector could prove helpful if your website needs to show/hide this element often. If there are multiple elements with the same selector the variable will become an array of these elements:
NOTE: The element has to exist in the DOM at the time of its assignment to a variable. If there is no element in the DOM with a class called
child you will be storing an empty array in that variable.
Remember to reassign the selector to the variable after adding/removing elements in the DOM with that selector.
Note: When caching selectors, many developers will start the variable name with a
$ to denote that the variable is a jQuery object like so:
Consider following DOM Structure
Descendant and child selectors
Given a parent
parentUl find its descendants (
This gets all matching descendants of the specified ancestor all levels down.
$('parent > child')
$('ul.parentUl > li')
This finds all matching children (only 1st level down).
Context based selector -
This works same as 1. above.
This works same as 1. above.
This works same as 2. above.
Group Selector : ","
<ul> elements AND all
<li> elements AND all
<span> elements :
Multiples selector : "" (no character)
<ul> elements with class
Adjacent Sibling Selector : "+"
<li> elements that are placed immediately after another
General Sibling Selector : "~"
<li> elements that are siblings of other
DOM Elements as selectors
jQuery accepts a wide variety of parameters, and one of them is an actual DOM element. Passing a DOM element to jQuery will cause the underlying array-like structure of the jQuery object to hold that element.
jQuery will detect that the argument is a DOM element by inspecting its nodeType.
The most common use of a DOM element is in callbacks, where the current element is passed to the jQuery constructor in order to gain access to the jQuery API.
Such as in the
each callback (note: each is an iterator function).
HTML strings as selectors
jQuery accepts a wide variety of parameters as "selectors", and one of them is an HTML string. Passing an HTML string to jQuery will cause the underlying array-like structure of the jQuery object to hold the resulting constructed HTML.
jQuery uses regex to determine if the string being passed to the constructor is an HTMLstring, and also that it must start with
<. That regex is defined as
rquickExpr = /^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/ (explanation at regex101.com).
The most common use of an HTML string as a selector is when sets of DOM elements need to be created in code only, often this is used by libraries for things like Modal popouts.
For example, a function which returned an anchor tag wrapped in a div as a template
Would return a jQuery object holding
if called as
Types of Selectors
In jQuery you can select elements in a page using many various properties of the element, including:
- Possession of Attribute
- Attribute Value
- Indexed Selector
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
<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
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
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
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
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.
This would select an
<a> element that:
- Has the following classes:
class1, class2, and class3
- Has the following ID:
- Has the following Attribute:
- Has the following Attributes and values:
- Has the following states:
You can also separate different selectors with a comma:
This would select:
- All elements that have the class
- An element with the id
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: