jQuery Selectors

Click each button to see jQuery select and highlight elements live on the page.

$("#id")

1. ID Selector

// Selects ONE unique element by its id
 
$("#welcome-msg").css({
  background: "#fff3cd",
  outline: "2px solid #ffc107"
});
 
// HTML being targeted:
// <h3 id="welcome-msg">...</h3>

👋 Welcome to jQuery Selectors!

This paragraph is NOT targeted (no matching id).

$(".class")

2. Class Selector

// Selects ALL elements sharing a class
 
$(".fruit-item").css({
  background: "#d1f5d3",
  outline: "2px solid #28a745"
});
 
// HTML being targeted:
// <li class="fruit-item">...</li>
// <li class="fruit-item">...</li>
  • 🍎 Apple
  • 🍌 Banana
  • 🥦 Broccoli (no class)
  • 🍊 Orange

$("element")

3. Element (Tag) Selector

// Selects ALL elements of a tag type
 
$("p").css({
  background: "#cce5ff",
  outline: "2px solid #007bff"
});
 
// Targets every <p> inside the demo

First paragraph — will be selected.

Second paragraph — also selected.

This heading is NOT a <p> tag.

Third paragraph — selected too!

$("[attr]") / $("[attr='val']")

4. Attribute Selector

// Select by attribute presence
$("[data-role]").css({ outline: ... });
 
// Select by attribute + exact value
$("input[type='text']").css({ ... });
 
// HTML targeted:
// <p data-role="info">...</p>
// <input type="text" />

📌 I have data-role="info"

⚠️ I have data-role="warning"

❌ I have NO data-role attribute.