jQuery selectors are expressions that match one or more HTML elements on the page. They follow CSS selector syntax and return a jQuery object containing all matched elements.
Why does it matter?
Selectors are the foundation of all jQuery code. Every interaction starts with selecting the right element. Knowing all selector types lets you target any element precisely without modifying HTML.
Master jQuery selectors — ID, class, tag, attribute, pseudo, and filter selectors with practical examples.
Real-World Use Cases
📋Dynamic table filtering - Use attribute selectors to find rows matching a filter value — highlight or hide them instantly without page reload.
📝Form validation UI - Select all required inputs, all invalid fields, or all checkboxes at once to apply error styling in bulk.
🎨Theming components - Select all elements of a component type (e.g., all .card elements) to apply a theme change in one jQuery call.
🔔Badge counters - Select all .notification-badge elements and update their counts from an API response in a single loop.
Basic Selectors
// CSS-style selectors — same syntax as CSS
$('*') // all elements
$('p') // all
tags
$('#header') // element with id="header"
$('.btn') // elements with class="btn"
$('div, p, span') // multiple selectors (comma = OR)
$('div p') // p elements inside div (descendant)
$('div > p') // direct child p of div
$('h2 + p') // p immediately after h2 (adjacent)
Attribute Selectors
$('[href]') // has href attribute
$('[href="https://example.com"]') // exact match
$('[href^="https"]') // starts with https
$('[href$=".pdf"]') // ends with .pdf
$('[name*="user"]') // contains user
$('input[type="text"]') // text inputs only
$('input[type!="submit"]') // not submit inputs
Filter and Pseudo Selectors
$('li:first') // first list item
$('li:last') // last list item
$('li:eq(2)') // third item (0-indexed)
$('li:even') // even-index items (0,2,4...)
$('li:odd') // odd-index items (1,3,5...)
$('p:contains("PHP")') // contains specific text
$(':visible') // only visible elements
$(':hidden') // only hidden elements
$('input:checked') // checked checkboxes/radios
$('input:disabled') // disabled form fields
$('input:focus') // currently focused element
Q: What is the difference between $(this) and $(event.target)?
$(this) inside a jQuery event handler refers to the element the handler was attached to. $(event.target) refers to the exact element that was clicked, which may be a child of the handler element. Use $(this) when you want the bound element; use $(event.target) when you need the element that triggered the event.
🧩
Test Your Knowledge
50 questions · Takes ~1500 seconds
Answer these questions to confirm you understood the article. Instant feedback on every answer.
Q1
What is the primary purpose of this topic in DSA development?
Q2
In a DSA technical interview, what do interviewers test?
Q3
What is the time/space complexity consideration for this DSA topic?
Q4
When should a DSA developer apply this technique?
Q5
What is the most common mistake when using this DSA pattern?
Team Lead and Full-Stack Developer with experience in PHP, JavaScript, SQL, DSA, and System Design. Passionate about software engineering, scalable web technologies, and helping developers prepare for coding interviews and tech careers through practical tutorials and professional guidance.
Comments (0)
No comments yet. Be the first!
Leave a Comment