jQuery ID Selector ("#id")

What Is the #id Selector?

$("#id") (since jQuery 1.0) selects the single element whose id attribute equals that value. Bare ID lookups use document.getElementById() — extremely fast — and return a set of zero or one element.

$("#myDiv")                      // element with id="myDiv"
$("h2#pageTitle")                // same id, must also be an h2
$("#myID\\.entry\\[1\\]")         // escape . and [ ] in the id
$("#sidebar .item")              // descendants under #sidebar

// Returns a jQuery object with 0 or 1 element
// Prefer unique, simple ids (letters, numbers, hyphens, underscores)

How to Use #id

Put a unique id on the element, then select it with $("#…").

1. Add id="myDiv" to the target element (unique in the page).
2. Call $("#myDiv") — jQuery uses getElementById.
3. Chain methods: .text(), .on(), .hide(), and so on.
4. Check .length before assuming the element exists.
5. Escape ., [, ], :, etc. if the id contains them.

Pseudocode

call $("#idValue")

el = document.getElementById("idValue")
if el is null:
    return empty jQuery set
else if selector has extra parts (e.g. h2#id):
    if el also matches those parts:
        return jQuery set with el
    else:
        return empty set
else:
    return jQuery set with el

Cheat Sheet

Keep these facts handy for everyday ID lookups.

Live Preview

Enter an id (without #) and Run to see if $("#…") finds it.

Ready — enter an id and click Run.

jQuery Examples

Short, copy-ready snippets. Open DevTools, or use Try It Yourself for a live editor.

$("#myDiv").append(" [selected]");

notMe
myDiv [selected]

$("#myID\\.entry\\[1\\]").append(" [selected]");

entry[0]
entry[1] [selected]
entry[2]

$("h2#pageTitle").append(" [h2 match]");
$("#log").text(
  "h2#pageTitle → " + $("h2#pageTitle").length +
  " | div#pageTitle → " + $("div#pageTitle").length
);

Correct h2 title [h2 match]
h2#pageTitle → 1 | div#pageTitle → 0

var lines = [];
var $found = $("#existingPanel");
if ($found.length) {
  $found.append(" [found]");
  lines.push("existingPanel → found");
}
var $missing = $("#missingPanel");
lines.push(
  $missing.length
    ? "missingPanel → found"
    : "missingPanel → not found (.length 0)"
);
$("#log").text(lines.join("\n"));

Existing panel [found]
existingPanel → found
missingPanel → not found (.length 0)

$("#sidebar .item.active").append(" [sidebar]");

Home
Settings [sidebar]
Main active (ignored)

Performance Notes

Official docs highlight that bare ID selectors use getElementById(). Prefer an id hook when you mean exactly one element.

Key Takeaways