jQuery ID Selector (#id)

What You’ll Learn

The ID selector matches one element with a given id attribute using #value syntax. Standard CSS since jQuery 1.0; jQuery uses document.getElementById() for bare ID lookups — the fastest selector path.

Introduction

Every interactive page needs reliable hooks — a main container, a submit button, a modal root. The ID selector targets exactly one element when you assign a unique id attribute and select it with #idName in jQuery.

jQuery has supported ID selectors since version 1.0. Official documentation states that jQuery uses document.getElementById() for ID lookups, which is extremely efficient. The returned jQuery object contains zero or one element — chain .css(), .text(), or .on() just like any other collection.

Understanding the ID Selector

The hash prefix means “match this exact id attribute value”:

• <div id="myDiv"> + $("#myDiv") → matches.
• <div id="notMe"> + $("#myDiv") → no match.
• Duplicate IDs in one document → invalid HTML; only the first node is found.
• Missing ID → empty jQuery collection (.length === 0).

📝 Syntax

Official jQuery API form (since 1.0):

jQuery( "#id" )

// typical usage:
$( "#myDiv" )
$( "#header" )
$( "h2#pageTitle" )

// escape special characters in id values:
$( "#myID\\.entry\\[1\\]" )

// scope descendants from an ID root:
$( "#sidebar .nav-link" )

Parameters

• id — the value of the element’s id attribute, written after # without quotes in the selector string.

Return value

• A jQuery object with zero or one DOM element.
• Empty collection when no element has that id.

Official jQuery API examples

// Example 1 — simple id:
$( "#myDiv" ).css( "border", "3px solid red" );

// Example 2 — escape dots and brackets in id:
$( "#myID\\.entry\\[1\\]" ).css( "border", "3px solid red" );

Examples Gallery

Examples 1–2 follow the official jQuery ID demos. Examples 3–5 cover tag+id combination, zero-or-one checks, and scoping descendants from an ID root.

$( "#myDiv" ).css( "border", "3px solid red" );

#myDiv → 3px solid red border
#notMe → unchanged gray box

$( "#myID\\.entry\\[1\\]" ).css( "border", "3px solid red" );

myID.entry[1] → red border
myID.entry[0] and [2] → unchanged

$( "h2#pageTitle" ).css( "color", "#2563eb" );
// div#pageTitle would NOT match — wrong tag

h2#pageTitle → blue text
div#pageTitle → no match (tag mismatch)

var $el = $( "#missingPanel" );
if ( $el.length ) {
  $el.addClass( "active" );
} else {
  console.log( "Panel not found" );
}

#existingPanel → .length is 1, class added
#missingPanel → .length is 0, logs "Panel not found"

$( "#sidebar .item.active" ).css( "fontWeight", "bold" );

Active .item inside #sidebar → bold
Same class inside #main → unchanged

🚀 Common Use Cases

• Page landmarks — $("#header"), $("#footer"), $("#app").
• Form submit — attach handlers to $("#signupForm").
• Modals — show/hide $("#dialog") with one unique hook.
• SPA roots — mount widgets under $("#root").
• Scoped lists — $("#cart .line-item") limits search area.
• Legacy IDs — escape dots/brackets in auto-generated id values.

📝 Notes

• Available since jQuery 1.0 — standard CSS selector.
• Each id must be unique per document — duplicate ids are invalid HTML.
• Uses document.getElementById() for bare #id — fastest jQuery selector path.
• Escape ., :, [, and other CSS-special chars in id values.
• Compound tag#id adds a tag verification step after lookup.
• Do not start id values with digits in HTML — invalid; use a letter prefix.

💡 Best Practices