jQuery .class Selector

Quiz

The .class selector in jQuery is used to select all HTML elements that have a specific class attribute.

The class attribute in HTML is used to assign one or more class names to an HTML element, allowing CSS and JavaScript to select and manipulate elements with specific classes.

Syntax

Following is the syntax of jQuery .class selector −

$(".class")

Parameters

The class selector specifies the class of the element you want to select.

Example 1

The following example selects the element with the class "highlight" and changes their background color to yellow −

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function(){
    $("button").click(function(){
        $(".highlight").css("background-color", "yellow");
    })
  });
</script>
</head>
<body>
  <p class="highlight">This text will be highlighted.</p>
  <button>Click</button>
</body>
</html>

After clicking the button, the selected (paragraph) element with class "highlight" will be highlighted with a yellow background color.

Example 2

In this example, we are selecting all the elements with the class "highlight" −

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function(){
    $("button").click(function(){
        $(".highlight").css("background-color", "yellow");
    })
  });
</script>
</head>
<body>
  <p class="highlight">Paragraph element with (class "highlight").</p>
  <p>This text won't be highlighted.</p>
  <p class="highlight">Paragraph element with (class "highlight").</p>
  <p>This text won't be highlighted.</p>
  <p class="highlight">Paragraph element with (class "highlight").</p>
  <button>Click</button>
</body>
</html>

when we click the button, all the paragraph elements with class "highlight" will be highlighted with a yellow background color.

Example 3

This example selects the element with the class "content" and replaces its content with a new text −

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function(){
    $("button").click(function(){
        $(".content").html("Content modified...");
    })
  });
</script>
</head>
<body>
  <div class="content">Hello mate, click the button below.</div>
  <button>Click</button>
</body>
</html>

After clicking the button, the content in the <div> element with "content" will be replaced with "Content modified...".

jquery_ref_selectors.htm

Print Page