🏷️ jQuery Selectors – Targeting HTML Elements Like a Pro
🧲 Introduction – Why Master jQuery Selectors?
In jQuery, everything starts with selectors. Whether you’re manipulating a DOM element, binding an event, or updating styles dynamically, selectors allow you to target exactly the elements you want.
🎯 In this tutorial, you’ll learn:
- How jQuery selectors work
- Types of selectors (basic, attribute, hierarchical)
- Real examples using each type
- Advanced selector patterns
- Performance best practices
🔤 What Are jQuery Selectors?
jQuery selectors are CSS-style expressions used with the $() function to identify and work with DOM elements.
✅ Basic Syntax:
$(selector)
This creates a jQuery object containing all matched DOM elements.
📘 Basic Selectors
These match standard HTML elements:
| Selector | Matches |
|---|---|
"*" | All elements |
"p" | All <p> elements |
"#id" | Element with ID id |
".class" | Elements with class class |
"div p" | All <p> inside <div> |
"ul > li" | Direct child <li> of <ul> |
🔍 Example:
$("#header").css("color", "blue");
$(".active").hide();
$("ul > li").addClass("highlight");
🔐 Attribute Selectors
Target elements based on attributes and values.
| Selector | Description |
|---|---|
[name] | Elements with name attribute |
[type='text'] | Input elements of type text |
[href^='https'] | Elements with href starting with https |
[data-id$='01'] | Attributes ending in ’01’ |
[title*='info'] | Attribute contains the word ‘info’ |
🧪 Example:
$("input[type='checkbox']").prop("checked", true);
$("[data-toggle='dropdown']").slideDown();
🔁 Positional & Form Filters
🔢 Positional Filters:
| Selector | Description |
|---|---|
:first | First matched element |
:last | Last matched element |
:even | Even-indexed elements (0, 2, 4…) |
:odd | Odd-indexed elements (1, 3, 5…) |
:eq(n) | Element at index n |
📝 Form Selectors:
| Selector | Description |
|---|---|
:input | All input, textarea, select, button |
:text | Input type text |
:checkbox | All checkboxes |
:radio | All radio buttons |
:checked | Checked inputs |
:selected | Selected <option>s |
:disabled | Disabled elements |
:enabled | Enabled elements |
🔎 Hierarchical Selectors
Use these to narrow scope based on element relationships.
| Selector | Description |
|---|---|
parent > child | Direct child relationship |
ancestor descendant | Any descendant of an ancestor |
prev + next | Immediately following sibling |
prev ~ siblings | All siblings after prev |
✅ Example:
$("form input:enabled").css("border", "1px solid green");
$("table tr:odd").addClass("row-alt");
🧠 Advanced jQuery Selectors
🔁 Content-Based:
| Selector | Description |
|---|---|
:contains('txt') | Elements containing the text txt |
:empty | Elements with no children |
:has(selector) | Elements with at least one match inside |
:not(selector) | Elements not matching the selector |
:visible, :hidden | Elements shown or hidden |
🔍 Example:
$("div:contains('Error')").addClass("error");
$("p:empty").remove();
$("ul li:not(.active)").fadeOut();
📘 Selector vs Vanilla JS Comparison
| Task | jQuery | Vanilla JS |
|---|---|---|
| Select by ID | $("#id") | document.getElementById("id") |
| Select by class | $(".class") | document.querySelectorAll(".class") |
First <li> in a list | $("li:first") | document.querySelector("li") |
| All checked checkboxes | $("input:checked") | document.querySelectorAll("input:checked") |
⚠️ Pitfalls to Avoid
| Mistake | Correction |
|---|---|
| Using incorrect selector syntax | Always wrap selectors in quotes |
| Not checking if the element exists | Use .length > 0 or conditionals |
| Selecting too many elements (performance) | Use IDs or specific selectors |
| Conflicting selectors | Be as specific as needed |
📘 Best Practices
📘 Be specific with selectors for better performance
💡 Cache your selectors for reuse:
var $btn = $("#submitBtn");
$btn.prop("disabled", true);
📘 Avoid overusing universal selectors (*) — they’re costly in large DOMs
💡 Combine class and tag for precision:
$("button.save").fadeIn();
🧠 Use Cases of jQuery Selectors
| Use Case | Selector Example |
|---|---|
| Validate forms | $("input:required") |
| Highlight active rows | $("tr.active") |
| Toggle based on state | $(".tab:not(.active)") |
| Fetch dynamic content | $("#results li:contains('offer')") |
| Build responsive UIs | $("div:visible"), $("nav li:first") |
📌 Summary – Recap & Next Steps
jQuery selectors provide unmatched power and convenience when navigating and modifying the DOM. By mastering them, you gain precise control over user interaction and UI behavior.
🔍 Key Takeaways:
- jQuery uses CSS-style selectors
- Supports ID, class, tag, attribute, and positional filtering
- Use
:visible,:checked,:not(), etc. for dynamic filtering - Combine selectors for deep targeting and chaining
⚙️ Real-World Relevance:
Selectors are used in nearly every jQuery script — from toggling menus, validating forms, to AJAX responses in CMS platforms, admin panels, and hybrid web apps.
❓ FAQ – jQuery Selectors
❓ Can I combine multiple selectors?
✅ Yes! Use commas to combine:
$("h1, h2, .highlight").hide();
❓ What does $(this) refer to in jQuery?
✅ It refers to the current DOM element in the context (usually inside an event handler).
❓ How do I select elements with a specific attribute?
✅ Use:
$("[type='checkbox']")
❓ How to select the first or last element?
✅ Use :first or :last:
$("li:first").addClass("top");
❓ What’s the fastest jQuery selector?
✅ $("#id") is the fastest, since IDs are unique and direct.
Share Now :
