jQuery Selectors

Learn how to select and target HTML elements with jQuery

🎯 What are jQuery Selectors?

jQuery selectors allow you to find and select HTML elements. They use the same syntax as CSS selectors, making them easy to learn and use. 


// Basic selector syntax
$("selector").action();

// Example: Select all paragraphs
$("p").hide();

Result:

All paragraphs will be hidden

Types of Selectors

#️⃣

ID Selector

Select element by ID 

$("#myId")
🏷️

Class Selector

Select elements by class 

$(".myClass")
📝

Element Selector

Select by HTML tag 

$("p")  // All paragraphs
$("div") // All divs
🌟

Universal Selector

Select all elements 

$("*")

🔹 Basic Selectors

The most commonly used jQuery selectors: 

// Select by ID (use # symbol)
$("#header").css("color", "blue");

// Select by Class (use . symbol)  
$(".highlight").css("background", "yellow");

// Select by Element/Tag
$("h1").css("font-size", "24px");

// Select All Elements
$("*").css("margin", "0");
<!-- HTML Example -->
<h1 id="header">Main Title</h1>
<p class="highlight">Important text</p>
<p>Regular paragraph</p>

Output:

Main Title

Important text

Regular paragraph

🔹 Attribute Selectors

Select elements based on their attributes: 

// Select by attribute
$("[href]").css("color", "red");           // All elements with href
$("[type='text']").css("border", "2px solid blue"); // Input type text
$("[class*='btn']").css("padding", "10px"); // Class contains 'btn'
<a href="#">Link</a>
<input type="text" placeholder="Name">
<button class="btn-primary">Submit</button>

Output:

Link

🔹 Position Selectors

Select elements by their position: 

// First and last elements
$("li:first").css("font-weight", "bold");
$("li:last").css("color", "red");

// Even and odd elements  
$("tr:even").css("background", "#f0f0f0");
$("tr:odd").css("background", "#ffffff");

// Specific position
$("li:eq(2)").css("color", "green");  // Third item (0-based)
<ul>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
    <li>Last item</li>
</ul>

Output:

  • First item
  • Second item
  • Third item
  • Last item

🔹 Multiple Selectors

Select multiple elements at once: 

// Multiple selectors (comma-separated)
$("h1, h2, h3").css("color", "navy");

// Descendant selector (space)
$("div p").css("font-style", "italic");

// Child selector (>)
$("ul > li").css("list-style", "none");

// Adjacent sibling (+)
$("h2 + p").css("margin-top", "0");
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p>Paragraph after h2</p>
<div>
    <p>Paragraph inside div</p>
</div>

🔹 Filter Selectors

Filter elements based on their state or content: 

// Visibility filters
$(":visible").css("border", "1px solid green");
$(":hidden").show();

// Form filters
$(":input").css("background", "#f9f9f9");    // All form inputs
$(":text").css("border", "1px solid blue");  // Text inputs only
$(":checked").css("transform", "scale(1.2)"); // Checked checkboxes

// Content filters
$(":empty").css("background", "red");        // Empty elements
$(":contains('jQuery')").css("font-weight", "bold"); // Contains text
<input type="text" value="Name">
<input type="checkbox" checked> Subscribe
<p>This paragraph contains jQuery</p>
<div></div> <!-- Empty div -->

🔹 Practical Examples

Real-world selector usage:

🔸 Form Validation Styling 

// Style required fields
$("input[required]").css("border-left", "3px solid orange");

// Style invalid fields
$("input:invalid").css("border-color", "red");

// Style valid fields
$("input:valid").css("border-color", "green");

🔸 Navigation Menu 

// Highlight current page
$("nav a[href='" + window.location.pathname + "']").addClass("active");

// Dropdown menu
$("nav li:has(ul)").addClass("has-dropdown");

🔸 Table Styling 

// Zebra striping
$("table tr:even").css("background", "#f8f8f8");
$("table tr:odd").css("background", "#ffffff");

// Highlight header
$("table th").css("background", "#333").css("color", "white");

🧠 Test Your Knowledge

Which selector selects all elements with class "button"?