ID ('#id') JQ Home  <<  Selectors  <<  ID ('#id')

• <<    Element Selector
• Multiple ('selector1,selector2,selectorn')     >>

ID selector.

Shorthand version $('#id')

Description

The ('#id') selector, selects a single element with the specified id attribute value.

• When used this method calls the JavaScript getElementById() function 'under the hood' which is extremely performant.
• Using jQuery() or $() with an id selector argument will return a jQuery object containing a collection of either zero or one DOM element.
• If an id selector contains characters such as . or : these have to be escaped with a double backslash \\.

Syntax

Parameters

Return

N/A.

ID ('#id') Examples Selectors  <<  Top

Selects a single element with the specified id attribute value.

The following example will select the paragraph with the 'id' attribute of 'backGreen' and turn the background colour green.

$(function(){
  $('#btn1').on('click', function() {
    $('#backGreen').css('backgroundColor', 'green');
  });
}); 

The following example will select the button with the 'id' attribute of 'btn2' and turn the text colour blue.

$(function(){
  $('#btn2').on('click', function() {
    $('#btn2').css('color', 'blue');
  });
}); 

The following example will select the left sidebar with the 'id' attribute of 'sidebarleft' and turn the background colour silver.

$(function(){
  $('#btn3').on('click', function() {
    $('#sidebarleft').css('backgroundColor', 'silver');
  });
}); 

Related Tutorials

jQuery Basic Tutorials - Lesson 3 - CSS Selectors

• <<    Element Selector
• Multiple ('selector1,selector2,selectorn')     >>