jquery  Add Remove Toggle css class

jquery css

the jquery provides number of methods for css manipulation.look likes --

  • addclass()      - adds one or more classes to the matched elements.
  • removeclass() - removes one or more classes from the matched elements.
  • toggleclass()  - toggles between adding/removing classes from the matched elements.

jquery addclass() method.

the jquery addclass() method is used to adds one or more class names to the matched elements.

note :-this method does not replace a class.it simply adds the class,appending it to any which may already be assigned to the elements.

the jquery addClass method syntax :-

       $( selector ).addclassclassname ) ;

classname :- specifies one or more space-separated classes.

jquery addclass method example

         <script>
          
                   $(document).ready(function(){
                   
                   $("button").click(function(){
                   
                   $("p:first").addclass("first");
                   
                   $("p:last").addclass("last");
                   
                        }); });
                        
          </script>
          

jquery addClass method examples - addClass(classname1 classname2) and addClass(function(){});


jquery removeclass() method.

the jquery removeclass() method is used to removes one or more class names from the matched elements.

note :-if no class names are specified in the parameter, all classes will be removed.

the jquery removeClass method syntax :-

     $( selector ).removeclassclassname ) ;

classname :- specifies one or more space-separated classes.

jquery removeClass Method example

         $(document).ready(function(){
                   
                   $("button").click(function(){
                   
                   $("div").removeclass("bg_color");
                   
                      }); });
         

jquery toggleclass() method.

the jquery toggleclass() method toggles between adding and removing one or more class names from the selected elements.

the jquery toggleClass method syntax :-

   $( selector ).toggleclassclassname ) ;

classname :- specifies one or more space-separated class names to add or remove.

jquery toggleClass method example

          $(document).ready(function(){
                   
                   $("button").click(function(){
                   
                   $("p:first").toggleclass("first border");
                   
                   $("p:last").toggleclass("last border");
                                       
                     }); });