Search within TutorialsPark

Jquery Working with Classes


Learn to use jQuery to apply CSS properties to HTML Documents .


jQuery Manipulation: Working with Classes

jQuery provides several methods to add CSS classes to HTML document, causing the browser to appply as set of CSS properties defined in a style element.


Table : Methods for Working with Classes

Method Description
addClass(name name) To add all of the elements in a jQuery object to the specified class.
addClass(function) To assign the elements in a jQuery object to classes dynamically.
hasClass(name) To return true if at least one of the element in the jQuery object is a member of the specified class.
removeClass(name name) To remove the elements in the jQuery object from the specified class.
removeClass(function) To remove the elements in the jQuery object from the specified class.
toggleClass() To toogle all of the classes that the elements in the jQuery object belong to.
toggleClass(boolean) To toggle all of the classes that the elements in the jQuery object belong to in one direction.
toggleClass(name)
toggleClass(name name)
To toggle one or more named classes for all of the elements in the jQuery Object.
toggleClass(name, boolean) To toogle a name class for all of the elements in the jQuery object in one direction.
toggleClass(function, boolean) To toogle classes dynamically for all of the elements in a jQuery object.

jQuery Add Class using addClass() Method

The jQuery Method addClass() is used to add one or more classes to each element in the set of matched elements.

Example: jQuery Add Class using addClass() Method

Give it a TRY! » Note: It returns a jQuery Object, which can be used for chaining purposes


Test the presence of a Class using hasClass() Method

The jQuery hasClass() method is used to check if atleast one of the elements in the jQuery object is member of the specified class.

Example: Test the presence of a Class using hasClass() Method

Give it a TRY! » Note:The hasClass() method only examines the first matched element.


Removing CSS classes using removeClass() method

The jQuery method of removeClass() is used to remove one or all classes from each element in the set of matched elements.

If a class name is included as a parameter, then only that class will be removed from the set of matched elements

Example: Removing CSS classes using removeClass() method

Give it a TRY! » Note:If no class names are specified in the parameter, all classes will be removed.


Toggling Classes using toggleClass() method

The jQuery method of toggleClass() is used toggle(i.e ON/OFF) CSS classes.

If a class is present, toggleClass() removes it from each element in the set of matched elements; if it is not present, it adds the class.

Example: Toggling Classes using toggleClass() method

Give it a TRY! » Note:The method can take one or more class names as its parameter.


Adding and Removing Classes using function

The jQuery method of addClass(function) and removeClass(function) can have a function has a parameter, which can be used to add or remove classes dynamically

Example: Adding and Removing Classes using addClass(function) method

Give it a TRY! » Note: The method is used to set class to multiple elements using a single Function


Toggling Multiple Classes using toggleClass() method

The jQuery method of toggleClass() can be supplied multiple class names, seperated by a space, so that different classes can be toggled upon an element.

Example: Toggling Multiple Classes using toggleClass() method

Give it a TRY! » Note:The parameter of the method removeAttr() is an attribute


Toggling Classes in one Direction using toggleClass()

The jQuery method of toggleClass() can be assigned a boolean argument inorder to limit the way toggling is performed.

If the value passed as argument is false , then the class is removed, and if the value passed is true, then the CSS class is added.

Example: Toggling Classes in one Direction using toggleClass() method

Give it a TRY! » Note: The same effect can be achieved using addClass() and removeClass() method.


Toggling Classes Dynamically using toggleClass() method

The jQuery method of toggleClass() can be assigned a function which can toggle the classes dynamically.

Example: Toggling Classes Dynamically using toggleClass() method

Give it a TRY! » Note: Different styles are applied to list items based on their index value using a function.