Jquery Class methods

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

  1. addClass() method
  2. removeClass() method
  3. toggleClass() method
  4. hasClass()method

So let’s start

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:

  1. remove() – Removes the selected element (and its child elements)
  2. 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

jquery remove() method

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

jquery empty () method

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 toggleClass() method

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

Jquery hasClass() method

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

Leave a Comment

Show Buttons
Hide Buttons