Class ('.class') JQ Home  <<  Selectors  <<  Class ('.class')

• <<    All Selector ('*')
• Element Selector     >>

Class selector.

Shorthand version $('.class')

Description

The ('.class') selector, selects all elements that have the specified class.

• An element can have multiple classes but we only need to match on one of them.
• This method calls JavaScript's getElementsByClassName() function 'under the hood' to return the appropriate elements if the browser supports it.

Syntax

Parameters

Return

N/A.

Class ('.class') Examples Selectors  <<  Top

Selects all elements that have the specified class.

The following example will select any element with a class of 'backGreen' and change the background colour to green.

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

The following example will select any element with a class of 'js' (code examples) and change the background colour to yellow.

$(function(){
  $('#btn2').on('click', function() {
    $('.js').css('backgroundColor', 'yellow');
  });
}); 

The following example will select any element with a class of 'copyright' (titles in bottom bar) and change the colour to orange.

$(function(){
  $('#btn3').on('click', function() {
    $('.copyright').css('color', 'orange');
  });
}); 

Related Tutorials

jQuery Basic Tutorials - Lesson 3 - CSS Selectors

• <<    All Selector ('*')
• Element Selector     >>