jQuery Selectors
Selectors are the heart of jQuery. Before you can hide, animate, or read anything on a page, you first have to point jQuery at the right elements. A selector is simply the instruction that says which elements you mean, and jQuery borrows the same syntax you already use in CSS.
What is a jQuery selector?
Every jQuery action starts with the dollar function, written as $(). You pass it a selector string, and jQuery hands you back a collection of the matching elements wrapped in a jQuery object. From there you can call methods on the whole collection at once, which is what makes jQuery feel so compact compared to plain JavaScript.
The general pattern is always the same: $(selector).action(). The selector decides the target, and the action decides what happens to it. If the selector matches five paragraphs, the action runs on all five without you writing a loop.
The basic selector patterns
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<p>Sample paragraph</p>
<p id="intro">Introduction paragraph</p>
<p class="note">A note paragraph</p>
<script>
// Select by element name (every <p> on the page)
$("p").hide();
// Select by id (the one element with id="intro")
$("#intro").hide();
// Select by class (every element with class="note")
$(".note").hide();
</script>
</body>
</html>The three selectors you will use most
- Element selector: $("p") grabs all elements of that tag type, such as every paragraph or every list item.
- ID selector: $("#header") grabs the single element whose id attribute matches. IDs are meant to be unique, so this returns at most one element.
- Class selector: $(".active") grabs every element carrying that class, which is perfect for styling or toggling groups of items together.
Combining and filtering selectors
You are not limited to one rule at a time. You can target several groups by separating selectors with a comma, and you can narrow a search down using jQuery's filter selectors like :first, :even, or :contains(). This lets you describe surprisingly specific targets in a single readable line.
Grouping and filter selectors
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<h1>Main Heading</h1>
<h2>Sub Heading</h2>
<p>Sample paragraph</p>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<a href="https://example.com" target="_blank">Visit example.com</a>
<script>
// Grab headings and paragraphs together
$("h1, h2, p").addClass("highlight");
// Only the first list item inside the menu
$("#menu li:first").css("font-weight", "bold");
// Every link that opens in a new tab
$("a[target='_blank']").css("color", "green");
</script>
</body>
</html>Exercise: jQuery Selectors
What does the selector $("#menu") match?
