ID Selector ("#id”)

jQuery

previous page next page

ID Selector (“#id”)

Categories: Selectors > Basic

id selector

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

  • version added: 1.0jQuery( "#id" )

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

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.

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.

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.

Examples:

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
                                  

                                    

                                      
                                        <!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>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
                                  

                                    

                                      
                                        <!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>
 POWERED BYHERONOTE
previous page start next page