jQuery - Element Class Selector

Description

The element class selector selects all the elements which match with the given class of the elements.

Syntax

Here is the simple syntax to use this selector −

$('.classid')

Parameters

Here is the description of all the parameters used by this selector −

classid − This is class ID available in the document.

Returns

Like any other jQuery selector, this selector also returns an array filled with the found elements.

Example

$('.big') − Selects all the elements with the given class ID big.
$('p.small') − Selects all the paragraphs with the given class ID small.
$('.big.small') − Selects all the elements with a class of big and small.

Following example would select all divisions with class .big and will apply yellow color to its background −

Live Demo

<html>
   <head>
      <title>The Selecter Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
   
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            /* This would select second division only*/
            $(".big").css("background-color", "yellow");
         });
      </script>
   </head>
	
   <body>
      <div class = "big" id="div1">
         <p>This is first division of the DOM.</p>
      </div>

      <div class = "medium" id = "div2">
         <p>This is second division of the DOM.</p>
      </div>

      <div class = "small" id = "div3">
         <p>This is third division of the DOM</p>
      </div>
   </body>
</html>

This will produce following result −

jquery-selectors.htm