jQuery Selector Reference: Target Elements with Precision
Explore jQuery's extensive selector options to precisely target elements by attributes, position, or relationships. Comprehensive guide to jQuery selectors.
jQuery: Selector Reference
jQuery provides a variety of selectors to target elements based on their attributes, position, or relation to other elements. Here's a comprehensive reference of jQuery selectors:
| Selector Pattern | Example | Description |
|---|---|---|
| Element | $('div') |
Selects all <div> elements |
| :first | $('div:first') |
Selects the first <div> element in a DOM hierarchy. |
| :last | $('div:last') |
Selects the last <div> element in a DOM hierarchy. |
| Multiple elements | $('p, div, code') |
Selects <p>, <div>, and <code> elements |
| parent descendant | $('div p') |
Selects all <p> elements which are descendants of <div> |
| parent child | $('div > p') |
Selects <p> elements which are direct children of <div> |
| * | $('*') |
Selects all elements |
| #Id | $('#myDiv') |
Selects the element whose ID is myDiv |
| element#id | $('div#myDiv') |
Selects <div> element whose ID is myDiv |
| Multiple Ids | $('#myDiv1, #myDiv2') |
Selects multiple elements whose IDs are myDiv1 or myDiv2. |
| .class | $('.myCSSClass') |
Selects all elements with class myCSSClass |
| .class .class | $('.myCSSClass1, .myCSSClass2') |
Selects all elements with class myCSSClass1 or myCSSClass2 |
| element.class | $('div.myCSSClass') |
Selects all <div> elements with class myCSSClass |
| :first-child | $('p:first-child') |
Selects all <p> elements which are the first child of their parent element. |
| :last-child | $('p:last-child') |
Selects all <p> elements which are the last child of their parent element. |
| :nth-child(n) | $('p:nth-child(5)') |
Selects all <p> elements which are the 5th child of their parent element. |
| :nth-last-child(n) | $('p:nth-last-child(2)') |
Selects all <p> elements which are the 2nd last child of their parent element. |
| :only-child | $('p:only-child') |
Selects all <p> elements which are the only child of their parent element. |
| [attribute] | $('[class]') |
Selects all elements with the class attribute |
| element[attribute] | $('div[class]') |
Selects all <div> elements that have a class attribute |
| element[attribute = value] | $('div[class="myCls"]') |
Selects all <div> elements whose class attribute is equal to myCls |
| element[attribute |= value] | $('div[class|="myCls"]') |
Selects all <div> elements whose class attribute is either equal to myCls or starts with myCls followed by a hyphen. |
| element[attribute *= "value"] | $('div[class *= "myCls"]') |
Selects <div> elements whose class attribute contains myCls |
| element[attribute ~= "value"] | $('div[class ~= "myCls"]') |
Selects <div> elements whose class attribute contains myCls, delimited by spaces. |
| element[attribute $= "value"] | $('div[class $="myCls"]') |
Selects <div> elements whose class attribute value ends with myCls (case sensitive). |
| element[attribute != "value"] | $('div[class != "myCls"]') |
Selects <div> elements which do not have a class attribute or whose value does not equal myCls |
| element[attribute ^= "value"] | $('div[class ^= "myCls"]') |
Selects <div> elements whose class attribute value starts with myCls |
| :contains("value") | $('div:contains('tutorialsarena')') |
Selects all <div> elements that contain the text tutorialsarena |
| :input | $(':input') |
Selects all input elements |
| :button | $(':button') |
Selects all input elements where type is button |
| :radio | $(':radio') |
Selects all input elements where type is radio |
| :text | $(':text') |
Selects all input elements where type is text |
| :checkbox | $(':checkbox') |
Selects all input elements where type is checkbox |
| :submit | $(':submit') |
Selects all input elements where type is submit |
| :password | $(':password') |
Selects all input elements where type is password |
| :reset | $(':reset') |
Selects all input elements where type is reset |
| :image | $(':image') |
Selects all input elements where type is image |
| :file | $(':file') |
Selects all input elements where type is file |
| :enabled | $(':enabled') |
Selects all enabled input elements |
| :disabled | $(':disabled') |
Selects all disabled input elements |
| :selected | $(':selected') |
Selects all selected input elements |
| :checked | $(':checked') |
Selects all checked input elements |
| :hidden | $(':hidden') |
Selects all hidden elements |
| :visible | $(':visible') |
Selects all visible elements |
| :odd | $('tr:odd') |
Selects all odd rows (1, 3, 5, 7...) |
| :even | $('tr:even') |
Selects all even rows (0, 2, 4, 6...) |
Example Usage:
HTML
<!DOCTYPE html><br>
<html><br>
<head><br>
<title>jQuery Selectors Example</title><br>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script><br>
<script><br>
$(document).ready(function() {<br>
// Select all <div> elements<br>
$('div').css('background-color', 'yellow');<br>
// Select the first <p> element<br>
$('p:first').css('font-weight', 'bold');<br>
// Select all <p> elements inside <div> elements<br>
$('div p').css('color', 'blue');<br>
// Select the element with id "myDiv"<br>
$('#myDiv').text('Updated text');<br>
// Select all elements with class "myCSSClass"<br>
$('.myCSSClass').css('border', '1px solid red');<br>
});<br>
</script><br>
</head><br>
<body><br>
</body><br>
</html>
<body><br>
<div id="myDiv">Original text</div><br>
<p>First paragraph</p><br>
<div><br>
<p>Paragraph inside div</p><br>
</div><br>
<p class="myCSSClass">Styled paragraph</p><br>
</body><br>
</html>
Output
The HTML document will have the following changes:
- All elements will have a yellow background.
- The first element will be bold.
- All
elements inside
elements will have blue text.
- The with ID "myDiv" will have its text updated to "Updated text".
- All elements with class "myCSSClass" will have a red border.