Author
jQuery selectors are used to find (select) HTML elements on a webpage so that you can perform actions on them — such as hiding, showing, or changing their content, attributes, or style.
They are based on CSS selectors, which means if you already know CSS, using jQuery selectors will feel very familiar.
Syntax:
$(selector).action();
Example:
$("p").hide(); // Hides all <p> elements on the page
1. Element Selector
Selects all elements with a specific HTML tag name.
$("p").css("color", "blue");
// Changes text color of all <p> elements to blue
2. ID Selector
Selects an element by its unique ID.
$("#demo").hide();
// Hides the element with id="demo"
3. Class Selector
Selects all elements with a given class name.
$(".note").css("font-size", "18px");
// Changes text size for elements with class="note"
4. Universal Selector
Selects all HTML elements in the document.
$("*").css("margin", "5px");
5. Group Selector
Selects multiple elements at once, separated by commas.
$("h1, p, .highlight").css("background", "yellow");
6. Descendant Selector
Selects all elements that are descendants of a specified element.
$("div p").hide();
// Hides all <p> elements inside <div>
7. Child Selector (>)
Selects only direct child elements of a specific parent.
$("div > p").css("color", "red");
Adjacent Sibling (+)
Selects the element that is immediately next to another element.
$("h2 + p").css("font-style", "italic");
General Sibling (~)
Selects all siblings after a specified element.
$("h2 ~ p").css("color", "green");
9. First and Last Selector
Selects the first or last element from a group.
$("p:first").css("font-weight", "bold");
$("p:last").css("color", "green");
10. Even and Odd Selectors
Often used with lists or tables for styling alternate rows.
$("li:even").css("background", "#f2f2f2"); // Even-indexed elements
$("li:odd").css("background", "#ddd"); // Odd-indexed elements
11. Attribute Selectors
Used to select elements based on their attributes and values.
$("[href]").css("color", "blue"); // All elements with href
$("input[type='text']").css("border", "2px solid blue");
$("a[target='_blank']").css("color", "orange");
Additional Attribute Filters:
$("a[href^='https']").css("color", "green"); // Starts with
$("a[href$='.pdf']").css("font-weight", "bold"); // Ends with
$("a[href*='google']").css("color", "purple"); // Contains
12. Filter Selectors
Fine-tune your selections using filters.
$("p:not(.intro)").css("color", "gray"); // Excludes .intro
$("p:contains('Hello')").css("color", "red"); // Contains text
$("div:empty").css("background", "#ccc"); // Empty elements
$("div:parent").css("border", "2px solid green"); // Non-empty
13. Form Selectors
Special selectors for working with forms.
| Selector | Description |
|---|---|
:input |
Selects all input, textarea, select, and button elements |
:text |
Selects text fields |
:password |
Selects password fields |
:radio |
Selects radio buttons |
:checkbox |
Selects checkboxes |
:submit |
Selects submit buttons |
:reset |
Selects reset buttons |
:button |
Selects button elements |
:file |
Selects file input fields |
:checked |
Selects all checked checkboxes or radio buttons |
:selected |
Selects selected <option> elements |
Example:
$(":checkbox:checked").css("outline", "2px solid blue");
$(":text").val("Enter your name");
<!DOCTYPE html>
<html>
<head>
<title>jQuery Selectors Example</title>
<script src="<https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js>"></script>
<script>
$(document).ready(function() {
// Hide paragraph when clicked
$("p").click(function() {
$(this).hide();
});
// Change color of first heading
$("h1:first").css("color", "darkblue");
// Highlight all input fields
$(":input").css("background", "#eef");
});
</script>
</head>
<body>
<h1>Welcome to jQuery Selectors</h1>
<h2>Click any paragraph to hide it</h2>
<p>This is paragraph one.</p>
<p>This is paragraph two.</p>
<form>
<input type="text" placeholder="Type here...">
<input type="checkbox" checked> I agree
</form>
</body>
</html>
| Category | Description | Example |
|---|---|---|
| Basic Selectors | Select elements by tag, ID, class | $("p"), $("#id"), $(".class") |
| Hierarchy Selectors | Select elements based on parent-child/sibling relationships | $("div > p"), $("h2 + p") |
| Attribute Selectors | Select by attribute or attribute value | $("[href]"), $("input[type='text']") |
| Filter Selectors | Select based on position or content | $(":first"), $(":contains('text')") |
| Form Selectors | Select form fields easily | $(":text"), $(":checkbox"), $(":selected") |