hey Guys,
welcome to our website wearewriter.com
If you want more update regarding jquery so visit the official website jquery.com
Yesterday we discuss about the jquery html(),text() and val() method .
Today we will discuss the Class methods
- addClass() method
- removeClass() method
- toggleClass() method
- hasClass()method
So let’s start
Table of Contents
Jquery addClass() method
The addClass() method is used to add one or more class to the selected element.
SYNTAX-
$(selector).addClass(classname)
EXAMPLE-
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p:first").addClass("intro");
});
});
</script>
<style>
.intro {
font-size: 150%;
color: blue;
}
</style>
</head>
<body style="color: black; background-color:white ;">
<h1>welcome to my article by wearewriter.com</h1>
<p>Jquery addClass() method</p>
<hr>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Add a class name to the first p element</button>
</body>
</html>OUTPUT-
Jquery remove elements
The jQuery removeclass( ) method removes one or more class to the selected element.
To remove elements and content, there are mainly two jQuery methods:
remove()– Removes the selected element (and its child elements)empty()– Removes the child elements from the selected element
1. jQuery remove() Method
The jQuery remove() method removes the selected element(s) and its child elements.
SYNTAX-
$(selector).remove()
EXAMPLE-
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").remove();
});
});
</script>
</head>
<body>
<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:pink;">
This is some text in the div.
<p>This is a paragraph in the div.</p>
<p>This is another paragraph in the div.</p>
</div>
<br>
<button>Remove div element</button>
</body>
</html>
OUTPUT
2. jQuery empty() Method
The jQuery empty() method removes the child elements of the selected element(s).
SYNTAX-
$(selector).empty()
EXAMPLE-
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").empty();
});
});
</script>
</head>
<body style="color: white; background-color:gray;">
<h1>welcome to my article by wearewriter.com</h1>
<p>Jquery empty() method</p>
<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:pink;">
This is some text in the div.
<p>This is a paragraph in the div.</p>
<p>This is another paragraph in the div.</p>
</div>
<br>
<button>Empty the div element</button>
</body>
</html>OUTPUT–
Note– you can use also removeClass() method as well
jQuery toggleClass() Method
This method toggles between adding/removing classes from the selected elements:
The following example will show how to use the jQuery toggleClass() method.
SYNTAX-
$(selector).toggleClass(classname,function(index,currentclass),switch)
EXAMPLE-
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1, h2, p").toggleClass("blue");
});
});
</script>
<style>
.blue {
color: yellow;
}
</style>
</head>
<body style="color: white; background-color:gray;">
<h1>welcome to my article by wearewriter.com</h1>
<p>Jquery toggleClass() method</p>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Toggle class</button>
</body>
</html>
OUTPUT
jQuery hasClass() Method
The jQuery hasClass() method is used to check whether selected elements have specified class name or not. It returns TRUE if the specified class is present in any of the selected elements otherwise it returns FALSE.
SYNTAX
$(selector).hasClass(classname)
EXAMPLE-
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert($("p").hasClass("writer"));
});
});
</script>
<style>
.writer{
font-size: 150%;
color: Blue;
}
</style>
</head>
<body style="color: white; background-color:gray;">
<h1>welcome to my article by wearewriter.com</h1>
<p>Jquery hasClass() method</p>
<hr>
<h1>Look here, I am a heading.</h1>
<p class="writer">This is a paragraph.</p>
<p>This is also a paragraph.</p>
<button>Click here to check if any p element have an "WRITER" class?</button>
</body>
</html>OUTPUT–
I hope this tutorial help you to learn jquery method .
So thank you guys to read my article if you like it please share with your frinds.
jQuery wrap()
this jquery wrap () method we will discuss next session
