Introduction to jQuery addClass()
In the following article, we will learn about jQuery addClass(). It will be a bit tough to learn jQuery without having the knowledge of the JavaScript programming language. jQuery has many inbuilt methods. This method is one of them. By using the addClass() method we can add specified class or classes to the selected element from the set of matched elements. The class attributes which already exists this method does not remove them. This method can take one or more class names. To add more than one class, the class names are separated by a space character.
Syntax for jQuery addClass() method:
In simple words, we can say that the addClass() method is used to add a class or classes for the element(s). The addClass() method syntax in the jQuery. It is an inbuilt method in jQuery.
$(selector) .addClass(className [ , duration] [, easing][,options])
Parameters of jQuery addClass()
It contains some parameters some of the details of the parameters are:
- className: The className should be of string type. It can take one or more class names they are separated by spaces.
- Duration: The duration can be a string or a number. It can be either a time in milliseconds or it can be preset. The default value of the duration is 400 milliseconds. It can take slow, fast or normal as a string parameter. This helps us to control the slide animation based on our requirements.
- Easing: The easing should be of string type. It is used for transition. The default value is swing.
- Function: It is an optional parameter that returns the class names. It takes the index position and class name of an element.
- Queue: The queue takes the Boolean value. If the Boolean value is true it indicates whether to place or not to place the animation. If the Boolean value is false the animation will take place immediately.
- Complete: This function is called once the animation is completed on an element.
- Children: Children take the Boolean value. It is helpful to determine which descendant to animate.
Examples to Implement jQuery addClass()
This is a simple example of the addClass() method. In this example, we can observe the addClass() method effect on the paragraph. We have passed the two class names in this example they are a highlight and main we can see in the code they are separated by space in addClass() method.
Example #1
Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$("p").addClass("highlight main");
});
});
</script>
<style>
.highlight {
font-size: 200%;
color: white;
display: block;
border: 5px solid red;
}
.main {
margin: 100px;
background:purple;
}
</style>
</head>
<body>
<button id = "btn"> Click on the button to see addClass effect</button>
<p>Example for the addClass effect</p>
</body>
</html>
Output:
- In the output, we can observe before clicking on the button “click on the button to see addClass effect”.
- The paragraph content is in normal font size without background and color as shown in the below figure.
- In the output after clicking on the button “click on the button to see addClass effect”.
- We can observe in the below image that the font size, background color, border, margin, and the display got applied to the paragraph as we mentioned all of them in the addClass() method in the code.
Example #2
This is another example of the addClass() method by using the function.
4.5 (2,830 ratings)
View Course
Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("li").addClass(function(n){
return "listitem_" + n;
});
});
});
</script>
<style>
p {
margin: 8px;
font-size: 20px;
font-weight: bolder;
cursor: pointer;
border: 5px solid blue;
}
.main {
background: orange;
}
.listitem_1, .listitem_3,.listitem_5 {
color: Brown;
}
.listitem_0, .listitem_2 ,.listitem_4{
color: green;
}
</style>
</head>
<body>
<ul>
<h1>List of student names</h1>
<li><p class="main">Chanukya</p></li>
<li><p class="main">Uma</p></li>
<li><p class="main">Swathi</p></li>
<li><p class="main">Nitya</p></li>
<li><p class="main">Fathima</p></li>
<li><p class="main">Deep</p></li>
</ul>
<script>
$( "p" ).click(function() {
$( this ).addClass( "main" );
});
</script>
<button>Click on the button for addClass effects</button>
</body>
</html>
Output:
- Before clicking on the button “click on the button for addClass effects” we can see a list of the student names are getting displayed with black color text, the background is filled with an orange color and the names are surrounded with a blue border.
- After clicking on the button “click on the button for addClass effects” we can observe that the list of student names with even and odd order is with different text colors. The even number list is changed to the green color as we have mentioned in the code i.e., list_item with 0,2,4 should apply the green color and the odd number list list_item with 1,3,5 should apply the brown color. The changes got applied to the output as we can see in the below image.
Example #3
This is another example of the addClass() method by removing the existing effects by removeClass() method and adding the new effect by the addClass() method.
Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").removeClass("highlight").addClass("main");
});
});
</script>
<style>
.highlight {
font-size: 200%;
color: blue;
display: block;
border: 15px solid Brown;
}
.main {
background-color: violet;
}
</style>
</head>
<body>
<p class="highlight">addClass() method example</p>
<button>Click on the button to see addClass effect</button>
</body>
</html>
Output:
- In this example, the .highlight class has font-size, color, display, and border. This class name is passed to the removeClass() method. Before clicking on the button “Click on the button to see addClass effect” the output contains all the effects of the .highlight class as they are not removed by the removeClass() method as we can see in the below image.
- After clicking on the button “Click on the button to see addClass effect” we can observe that the effects of font-size, color, display and border of .highlight class got removed by the removeClass() method and the effect of the background-color i.e., violet of .main() class got applied by the addClass() method as we can see it in the below image.
These are some of the examples of the addClass() method by using some of the parameters and functions.
Recommended Articles
This is a guide to jQuery addClass(). Here we discuss syntax and parameters of jQuery addClass() along with different examples and its code implementation. You may also look at the following articles to learn more –
