In this article we will show you the solution of add class jquery, each selected element can have additional properties added using the addClass() method, which is a built-in method in jQuery.
The element's chosen property may also be changed using this method.
Step By Step Guide On Add Class jQuery :-
The selected components are given one or even more class names by the addClass() function.
The only change made by this procedure is the addition of one or even more multiple classes to the class attribute; no existing class attributes are removed.
Use spaces to divide the class names if you want to add over than one.
Syntax:
$(selector).addClass(classname,function(index,oldclass))
Each selected element can have additional properties added using the addClass() method, which is a built-in method in jQuery.
The element's chosen property may also be changed using this method.
There are two ways you can apply this technique :-
1. Directly by including a Class name:
The element that will be chosen in this case can directly use the Class name.
Syntax:
$(selector).addClass(className);
Parameters - The name of a class that will be added is accepted as a parameter and is called "className."
Return Value - The elements that were chosen together with the new class are returned.
2. Through the passing of a method to create a new class:
The element's.addClass() method may accept a function argument.
Syntax:
$(selector).addClass(function);
Parameters - It takes the parameter "function" as one of its parameters.
Return Value - The element that was chosen along with the function is returned.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p:first").addClass("intro");
});
});
</script>
<style>
.intro {
font-size: 150%;
color: red;
}
</style>
</head>
<body>
<h1>Welcome to Talkerscode</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click here to Add a class name to the first p element</button>
</body>
</html>
- As you can see, our code begins with HTML and HEAD Tags.
- Next, a script is used to import the jQuery library.
- After that, we launch our jQuery script.
- In the script, the ready() method is used to run the jQuery code.
- Next, the onclicking button is handled by the.click() function.
- Following that, you will notice that we utilise the addclass function for the first paragraph, which uses the intro as a value.
- After that, we end our script.
- After that, style is used to give the introduction some style.
- Next, we begin our body.
- Using the H1 Tag, we write the heading in the body.
- Using the P Tag, we then compose two paragraphs.
- Next, we make the button that may be clicked to add a class to our initial function.
- Finally, we add BODY & HTML elements to finish off our code.
Conclusion :-
Consequently, we were able to understand the add class jquery concept. Additionally, we discovered that the addclass() method can be employed to add one or even more class names to the chosen element.
Only one or even more class names may be added to the attribute values using this technique; the current class attributes may not be changed.
I hope this article on add class jquery helps you and the steps and method mentioned above are easy to follow and implement.
About Ashish
