How to add or remove class in JQuery

hasClass Returns true if an element has the specified class otherwise false
addClass Adds one or more specified classes. To add multiple classes separate them with a space.
removeClass Removes one or multiple or all classes. To remove multiple classes separate them with a space. To remove all classes, don't specify any class name.
toggleClass Toggles one or more specified classes. If the element has the specified class then it is removed, if the class is not present then it is added.
  1. <html>  
  2.     <head>  
  3.         <title></title>  
  4.         <script src="jquery-1.11.2.js"></script>  
  5.         <style>  
  6. .boldClass {  
  7. font-weight: bold;  
  8. }  
  9. .italicsClass {  
  10. font-style: italic;  
  11. }  
  12. .colorClass {  
  13. color: red;  
  14. }  
  15. </style>  
  16.         <script type="text/javascript">  
  17. $(document).ready(function () {  
  18. $('#btn1').click(function () {  
  19. $('p').addClass('colorClass');  
  20. });  
  21. $('#btn2').click(function () {  
  22. $('p').removeClass('colorClass');  
  23. });  
  24. $('#btn3').click(function () {  
  25. $('p').addClass('colorClass italicsClass');  
  26. });  
  27. $('#btn4').click(function () {  
  28. $('p').removeClass('colorClass italicsClass');  
  29. });  
  30. $('#btn5').click(function () {  
  31. $('p').addClass('colorClass italicsClass boldClass');  
  32. });  
  33. $('#btn6').click(function () {  
  34. $('p').removeClass();  
  35. });  
  36. });  
  37. </script>  
  38.     </head>  
  39.     <body style="font-family:Arial">  
  40.         <p>C Sharp</p>  
  41.         <table>  
  42.             <tr>  
  43.                 <td>  
  44.                     <input id="btn1" style="width:250px" type="button"  
  45. value="Add Color Class" />  
  46.                 </td>  
  47.                 <td>  
  48.                     <input id="btn2" style="width:250px" type="button"  
  49. value="Remove Color Class" />  
  50.                 </td>  
  51.             </tr>  
  52.             <tr>  
  53.                 <td>  
  54.                     <input id="btn3" style="width:250px" type="button"  
  55. value="Add Color and Italics Classes" />  
  56.                 </td>  
  57.                 <td>  
  58.                     <input id="btn4" style="width:250px" type="button"  
  59. value="Remove Color and Italics Classes" />  
  60.                 </td>  
  61.             </tr>  
  62.             <tr>  
  63.                 <td>  
  64.                     <input id="btn5" style="width:250px" type="button"  
  65. value="Add Color, Italics & Bold Classes" />  
  66.                 </td>  
  67.                 <td>  
  68.                     <input id="btn6" style="width:250px" type="button"  
  69. value="Remove All Classes" />  
  70.                 </td>  
  71.             </tr>  
  72.         </table>  
  73.     </body>  
  74. </html>