jQuery API

ID Selector (“#id”)

Categories: Selectors > Basic

id selector

version added: 1.0jQuery('#id')

  • id
    An ID to search for, specified via the id attribute of an element.

Description: Selects a single element with the given id attribute.

For id selectors, jQuery uses the JavaScript function document.getElementById(), which is extremely efficient. When another selector is attached to the id selector, such as h2#pageTitle, jQuery performs an additional check before identifying the element as a match.

Each id value must be used only once within a document. If more than one element has been assigned the same ID, queries that use that ID will only select the first matched element in the DOM. This behavior should not be relied on, however; a document with more than one element using the same ID is invalid.

If the id contains characters like periods or colons you have to escape those characters with backslashes.

As always, remember that as a developer, your time is typically the most valuable resource. Do not focus on optimization of selector speed unless it is clear that performance needs to be improved.

Examples:

Example: Finds the element with the id "myDiv". 

<!DOCTYPE html>
<html>
<head>
  <style>
  div {
    width: 90px;
    height: 90px;
    float:left;
    padding: 5px;
    margin: 5px;
    background-color: #EEEEEE;
  }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
	<div id="notMe"><p>id="notMe"</p></div>

  <div id="myDiv">id="myDiv"</div>
<script>$("#myDiv").css("border","3px solid red");</script>
</body>
</html>

Demo:

Example: Finds the element with the id "myID.entry[1]". See how certain characters must be escaped with backslashes. 

<!DOCTYPE html>
<html>
<head>
  <style>
  div {
    width: 300px;
    float:left;
    padding: 2px;
    margin: 3px;
    background-color: #EEEEEE;
  }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
	<div id="myID.entry[0]">id="myID.entry[0]"</div>

  <div id="myID.entry[1]">id="myID.entry[1]"</div>
  <div id="myID.entry[2]">id="myID.entry[2]"</div>
<script>$("#myID\\.entry\\[1\\]").css("border","3px solid red");</script>
</body>
</html>

Demo:

Comments

  • Support requests, bug reports, and off-topic comments will be deleted without warning.

  • Please do post corrections or additional examples for ID Selector (“#id”) below. We aim to quickly move corrections into the documentation.
  • If you need help, post at the forums or in the #jquery IRC channel.
  • Report bugs on the bug tracker or the jQuery Forum.
  • Discussions about the API specifically should be addressed in the Developing jQuery Core forum.
  • jamesfurey
    To cut a long story short, when selecting an element that's been replaced by swfobject with a swf, I can't call functions in it set by flash (using ExternalInterface). Eg:

    $('#img-uploader')[method_name](); // DOESN'T WORK...

    document.getElementById('img-uploader')[method_name](); // WORKS...
  • Scott
    How would I accomplish this using a dynamically generated id for the div?
  • Hexodus
    What happens when the specifyed selector doesen't exist?
  • Ryan
    The link to ‘escape those characters with backslashes’ is broken.
  • Updated the link. Thanks.