jQuery addClass() with Example

jQueryWeb DevelopmentFront End Technology

The addClass() method in jQuery is used to add one or more class names to the selected elements.

Example

Let us now see an example to implement the jQuery addClass() method −

<!DOCTYPE html>
<html>
<head>
<style>
   .demo * {
      display: block;
      border: 3px dashed red;
      padding: 3px;
      margin: 25px;
   }
   .one {
      border: 2px solid yellow;
   }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
   $(document).ready(function(){
      $("span.test").next().addClass("one");
   });
</script>
</head>
<body>
<h1>Heading One</h1>
<div class="demo" style="width:600px;">This is our demo text in div.
<p>child
<span>grandchild</span>
<span class="test">grandchild</span>
<span>grandchild</span>
</p>
<p>child
<span>grandchild</span>
</p>
</div>
</body>
</html>

Output

This will produce the following output −

Let us now see another example to implement the jQuery addClass() method −

<!DOCTYPE html>
<html>
<head>
<style>
   .one {
      color: white;
      background-color: red;
      font-size: 18px;
      border: 2px blue dashed;
   }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
   $(document).ready(function(){
      $("[id]").addClass("one");
   });
</script>
</head>
<body>
<h1>Car Details</h1>
<p id="demo">Car is XUV500</p>
<p>2179 cc</p>
<p>Independent Suspension</p>
<p>Fuel Tank Capacity: 70 litres</p>
</body>
</html>

Output

This will produce the following output −

raja
Published on 12-Nov-2019 12:46:49
Advertisements