
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Add Class Using jQuery 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 −
Advertisements