BeginnersBook

  • Home
  • Java
    • Java OOPs
    • Java Collections
    • Java Examples
  • C
    • C Examples
  • C++
    • C++ Examples
  • DBMS
  • Computer Network
  • Python
    • Python Examples
  • More…
    • jQuery
    • Kotlin
    • WordPress
    • SEO
    • JSON
    • JSP
    • JSTL
    • Servlet
    • MongoDB
    • XML
    • Perl

jQuery hasClass() Method

By Chaitanya Singh | Filed Under: jQuery

In this tutorial, you will learn how to use jQuery hasClass() method. This method checks if a specified class assigned to the specified element.

Syntax of hasClass() method

$(selector).hasClass(classname)

Here, classname specifies the class that needs to be checked. This method returns true if the element selected by the selector, has the classname assigned to it.

jQuery hasClass() method example

In the following example, a class big is assigned to a paragraph. On the button click event, we are using hasClass() method to check whether the class big is assigned to any paragraph present in the html page.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    alert($("p").hasClass("big"));
  });
});
</script>
<style>
.big {
  font-size: 200%;
  color: green;
}
</style>
</head>
<body>

<h1>jQuery hasClass() example on BeginnersBook.com</h1>

<p class="big">This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<p>This is the last paragraph.</p>

<button>Is "big" class assigned to any p element?</button>

</body>
</html>

Output Screen before the click event:
jQuery hasClass() Method
Output Screen after the click event:
jQuery hasClass() Method

jQuery hasClass() Example 2: Displaying result on same page

In this example, we are displaying the result of the hasClass() method in the html page itself. Here, we have two paragraphs, the first paragraph has the id “para1” and the second paragraph has the id “para2”. We are checking whether the first and second paragraph are green using the hasClass() method. This method returns boolean value true or false.

<!DOCTYPE html>
<html>
<head>
<title>jQuery hasClass() example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
  $("#result1").text( $("p#para1").hasClass("green") );
  $("#result2").text( $("p#para2").hasClass("green") );
});
</script>
<style>
  .green { color:green; }
  .red { color:red; }
</style>
</head>
<body>
<h1>jQuery hasClass() example on BeginnersBook.com</h1>
<p class="green" id="para1">This is first paragraph.</p>
<p class="red" id="para2">This is second paragraph.</p>
Is first paragraph green? <div id="result1">I</div>
is second paragraph green? <div id="result2"></div>
</body>
</html>

Output:
jQuery hasClass() Method

❮ jQuery addClass()jQuery removeClass() ❯

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

jQuery Tutorial

  • jQuery Tutorial
  • jQuery Selectors
  • jQuery Events

jQuery Effects

  • jQuery Show & Hide
  • jQuery Fading
  • jQuery Sliding
  • jQuery Animate
  • jQuery stop()
  • jQuery Callback Function
  • jQuery Chaining

jQuery HTML/CSS

  • jQuery html()
  • jQuery addClass()
  • jQuery hasClass()
  • jQuery removeClass()
  • jQuery toggleClass()
  • jQuery after()
  • jQuery before()
  • jQuery append()
  • jQuery appendTo()
  • jQuery clone()
  • jQuery insertBefore()
  • jQuery insertAfter()
  • jQuery attr()
  • jQuery text()
  • jQuery val()
  • jQuery css()
  • jQuery prepend()
  • jQuery remove()
  • jQuery empty()
  • jQuery detach()

Copyright © 2012 – 2022 BeginnersBook . Privacy Policy . Sitemap