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 Class Selector

Last Updated: April 20, 2019 by Chaitanya Singh | Filed Under: jQuery

In this tutorial, we will learn jQuery class Selector with examples. If you wondering what is a selector, refer my detailed guide on jQuery Selectors.

jQuery class Selector Syntax

$ sign followed by parenthesis and class name mentioned in the parenthesis prefixed with a . (dot).

$(".myclass")

This will select all the elements with the class value as myclass

jQuery class Selector Example

In the following example we have marked three elements with the class value cl, we have marked h2 element, p element and the button element with class cl.

In the jQuery function, on the button click event we are selecting and then changing the background colour of those elements that have the class value equals to cl. Since we have three elements with this class, the background of these elements are changed when the button is clicked.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $(".cl").css("background-color", "green");
  });
});
</script>
</head>
<body>

<h2 class="cl">jQuery class selector example</h2>
<p class="cl">This jQuery class selector example is published on
beginnersbook.com</p>
<p>Class selector selects all the elements that has the specified class</p>
<button class="cl">Click Me!</button>

</body>
</html>

Output: The following two screenshots are taken before and after clicking the Click Me! button.
Before clicking the button:
jQuery class Selector example
After clicking the button:
jQuery class Selector output

❮ PreviousNext ❯

Top Related Articles:

  1. jQuery html() method
  2. jQuery multiple classes Selector
  3. jQuery val()
  4. jQuery Events
  5. jQuery removeClass() Method

About the Author

I have 15 years of experience in the IT industry, working with renowned multinational corporations. Additionally, I have dedicated over a decade to teaching, allowing me to refine my skills in delivering information in a simple and easily understandable manner.

– Chaitanya

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 – 2025 BeginnersBook . Privacy Policy . Sitemap