The jQuery library harnesses the power of Cascading Style Sheets (CSS) selectors to let us quickly and easily access elements or groups of elements in the Document Object Model (DOM).
A jQuery Selector is a function which makes use of expressions to find out matching elements from a DOM based on the given criteria. Simply you can say, selectors are used to select one or more HTML elements using jQuery. Once an element is selected then we can perform various operations on that selected element.
The $() factory function
jQuery selectors start with the dollar sign and parentheses − $(). The factory function $() makes use of following three building blocks while selecting elements in a given document −
S.N. Selector & Description
1 Tag Name
Represents a tag name available in the DOM. For example $('p') selects all paragraphs
in the document.
2 Tag ID
Represents a tag available with the given ID in the DOM. For example $('#some-id') selects the single element in the document that has an ID of some-id.
3 Tag Class
Represents a tag available with the given class in the DOM. For example $('.some-class') selects all elements in the document that have a class of some-class.
All the above items can be used either on their own or in combination with other selectors. All the jQuery selectors are based on the same principle except some tweaking.
NOTE − The factory function $() is a synonym of jQuery() function. So in case you are using any other JavaScript library where $ sign is conflicting with some thing else then you can replace $ sign by jQuery name and you can use function jQuery() instead of $().
Example
Following is a simple example which makes use of Tag Selector. This would select all the elements with a tag name p and will set their background to "yellow".
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("p").css("background-color", "yellow");
});
</script>
</head>
<body>
<div>
<p class = "myclass">This is a paragraph.</p>
<p id = "myid">This is second paragraph.</p>
<p>This is third paragraph.</p>
</div>
</body>
</html>
This will produce following result −
How to use Selectors?
The selectors are very useful and would be required at every step while using jQuery. They get the exact element that you want from your HTML document.
Following table lists down few basic selectors and explains them with examples.
S.N. Selector & Description
1 Name
Selects all elements which match with the given element Name.
2 #ID
Selects a single element which matches with the given ID.
3 .Class
Selects all elements which match with the given Class.
4 Universal (*)
Selects all elements available in a DOM.
5 Multiple Elements E, F, G
Selects the combined results of all the specified selectors E, F or G.
Selectors Examples
Similar to above syntax and examples, following examples would give you understanding on using different type of other useful selectors −
Here, you have different type of other useful selectors −
You can use all the above selectors with any HTML/XML element in generic way. For example if selector $("li:first") works for
element then $("p:first") would also work for
element.
All Selector ("*")
Selects all elements.
:animated Selector
Select all elements that are in the progress of an animation at the time the selector is run.
Attribute Contains Prefix Selector [name|="value"]
Selects elements that have the specified attribute with a value either equal to a given string or starting with that string followed by a hyphen (-).
Attribute Contains Selector [name*="value"]
Selects elements that have the specified attribute with a value containing the a given substring.
Attribute Contains Word Selector [name~="value"]
Selects elements that have the specified attribute with a value containing a given word, delimited by spaces.
Attribute Ends With Selector [name$="value"]
Selects elements that have the specified attribute with a value ending exactly with a given string. The comparison is case sensitive.
Attribute Equals Selector [name="value"]
Selects elements that have the specified attribute with a value exactly equal to a certain value.
Attribute Not Equal Selector [name!="value"]
Select elements that either don’t have the specified attribute, or do have the specified attribute but not with a certain value.
Attribute Starts With Selector [name^="value"]
Selects elements that have the specified attribute with a value beginning exactly with a given string.
:button Selector
Selects all button elements and elements of type button.
:checkbox Selector
Selects all elements of type checkbox.
:checked Selector Matches all elements that are checked or selected.
Child Selector ("parent > child")
Selects all direct child elements specified by “child” of elements specified by “parent”.
Class Selector (“.class”)
Selects all elements with the given class.
:contains() Selector
Select all elements that contain the specified text.
Descendant Selector ("ancestor descendant")
Selects all elements that are descendants of a given ancestor.
:disabled Selector
Selects all elements that are disabled.
Element Selector (“element”)
Selects all elements with the given tag name.
:empty Selector
Select all elements that have no children (including text nodes).
:enabled Selector
Selects all elements that are enabled.
:eq() Selector
Select the element at index n within the matched set.
:even Selector
Selects even elements, zero-indexed. See also odd.
:file Selector
Selects all elements of type file.
:first-child Selector
Selects all elements that are the first child of their parent.
:first-of-type Selector
Selects all elements that are the first among siblings of the same element name.
:first Selector
Selects the first matched element.
:focus Selector
Selects element if it is currently focused.
:gt() Selector
Select all elements at an index greater than index within the matched set.
Has Attribute Selector [name]
Selects elements that have the specified attribute, with any value.
:has() Selector
Selects elements which contain at least one element that matches the specified selector.
:header Selector
Selects all elements that are headers, like h1, h2, h3 and so on.
:hidden Selector
Selects all elements that are hidden.
ID Selector (“#id”)
Selects a single element with the given id attribute.
:image Selector
Selects all elements of type image.
:input Selector
Selects all input, textarea, select and button elements.
:lang() Selector
Selects all elements of the specified language.
:last-child Selector
Selects all elements that are the last child of their parent.
:last-of-type Selector
Selects all elements that are the last among siblings of the same element name.
:last Selector
Selects the last matched element.
:lt() Selector
Select all elements at an index less than index within the matched set.
Multiple Attribute Selector [name="value"][name2="value2"] Matches elements that match all of the specified attribute filters.
**Multiple Selector (“selector1, selector2, selectorN”)
Selects the combined results of all the specified selectors.
Next Adjacent Selector (“prev + next”)
Selects all next elements matching “next” that are immediately preceded by a sibling “prev”.
Next Siblings Selector (“prev ~ siblings”)
Selects all sibling elements that follow after the “prev” element, have the same parent, and match the filtering “siblings” selector.
:not() Selector
Selects all elements that do not match the given selector.
:nth-child() Selector
Selects all elements that are the nth-child of their parent.
:nth-last-child() Selector
Selects all elements that are the nth-child of their parent, counting from the last element to the first.
:nth-last-of-type() Selector
Selects all elements that are the nth-child of their parent, counting from the last element to the first.
:nth-of-type() Selector
Selects all elements that are the nth child of their parent in relation to siblings with the same element name.
:odd Selector
Selects odd elements, zero-indexed. See also even.
:only-child Selector
Selects all elements that are the only child of their parent.
:only-of-type Selector
Selects all elements that have no siblings with the same element name.
:parent Selector
Select all elements that have at least one child node (either an element or text).
:password Selector
Selects all elements of type password.
:radio Selector
Selects all elements of type radio.
:reset Selector
Selects all elements of type reset.
:root Selector
Selects the element that is the root of the document.
:selected Selector
Selects all elements that are selected.
:submit Selector
Selects all elements of type submit.
:target Selector
Selects the target element indicated by the fragment identifier of the document’s URI.
:text Selector
Selects all elements of type text.
:visible Selector
Selects all elements that are visible.
