jQuery ID Selector

The ID selector targets one specific element on the page using its unique id attribute. It is the most precise and fastest selector in jQuery. When you want to work with exactly one element — not a group — the ID selector is the right choice.

What is an ID Selector?

In HTML, every element can have an id attribute. The id must be unique — no two elements on the same page should share the same ID. The jQuery ID selector uses the # symbol followed by the ID name.

Syntax

$("#idName")

Examples:
$("#header")    → selects the element with id="header"
$("#loginBtn")  → selects the element with id="loginBtn"
$("#price")     → selects the element with id="price"

Diagram: ID Selector Flow

  HTML Page:
  ┌──────────────────────────────────────────┐
  │  <div id="header">Welcome!</div>         │  ← Selected ✓
  │  <p id="intro">Some text here.</p>       │
  │  <button id="loginBtn">Login</button>    │
  └──────────────────────────────────────────┘

  $("#header").css("background", "yellow");
       │
       └── Only the element with id="header" gets yellow background
           All other elements stay the same

Real-Life Analogy

Think of an ID like an Aadhaar card number or a passport number. It belongs to only one person. The ID selector works the same way — it finds the one and only element with that exact ID, no matter how many elements are on the page.

Basic Example

HTML:
<p id="welcome">Hello, User!</p>
<button id="changeBtn">Change Text</button>

jQuery:
$(document).ready(function() {
    $("#changeBtn").click(function() {
        $("#welcome").text("Welcome to jQuery!");
    });
});

When the button is clicked, only the paragraph with id="welcome" changes its text.

Hiding and Showing with ID Selector

$(document).ready(function() {
    $("#hideBtn").click(function() {
        $("#box").hide();
    });

    $("#showBtn").click(function() {
        $("#box").show();
    });
});

Two buttons control one specific box using its ID. This is a very common pattern in web pages.

Changing CSS with ID Selector

$(document).ready(function() {
    $("#mainTitle").css({
        "color": "red",
        "font-size": "32px",
        "text-align": "center"
    });
});

Multiple CSS properties apply to one specific element identified by its ID.

ID Selector vs Element Selector

Why ID Selector is the Fastest

Browsers store element IDs in a special lookup table. When jQuery uses an ID selector, the browser finds the element in one step — like searching a dictionary by the exact word. Other selectors scan through all elements on the page, which takes more time.

Diagram: Speed Comparison

  ID Selector:
  $( "#loginBtn" )
  Browser: "I know loginBtn, found it immediately!"  → 1 step

  Element Selector:
  $( "button" )
  Browser: "Let me check every element..."
           → Checks <div> → Not button
           → Checks <p>   → Not button
           → Checks <button> → Match!
           → Continues checking rest of page  → Many steps

Getting Value from an Input Using ID

HTML:
<input type="text" id="userName" />
<button id="getNameBtn">Get Name</button>

jQuery:
$(document).ready(function() {
    $("#getNameBtn").click(function() {
        var name = $("#userName").val();
        alert("You entered: " + name);
    });
});

The ID selector precisely targets the input field and reads its value.

Common Mistakes

• Missing the # sign: $("loginBtn") looks for a tag named loginBtn — not an ID. Always use $("#loginBtn").
• Duplicate IDs: If two elements have the same ID, jQuery only selects the first one. IDs must be unique.
• Case sensitivity: ID names are case-sensitive. #LoginBtn and #loginBtn are different.

Quick Summary

• Use $("#idName") to select one specific element by its ID.
• The # symbol tells jQuery you are selecting by ID.
• IDs must be unique on a page — only one element per ID.
• ID selector is the fastest among all jQuery selectors.
• Use ID selectors when you need to target a single, specific element.