Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
jQuery addClass() with Example
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 −
Updated on: 12-Nov-2019
437 Views
Advertisements