<!DOCTYPE html>
<html>
<head>

<script>

$(document).ready(function(){
    $("#btn1").click(function(){
        $("h1, h2, p").addClass("blue");
        $("#div2").addClass("important");
$("#div1").addClass("important blue");
    });

$("#btn2").click(function(){
        $("h1, h2, p").removeClass("blue");
    });
$("#btn3").click(function(){
        $("h1, h2, p").toggleClass("blue");
    });
});

</script>
<style>
.blue {
    color: blue;
}
</style>
</head>
<body>

<h1>Heading 1</h1>
<h2>Heading 2</h2>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<div  id="div2">This is some important text!</div><br>
<div id="div1">This is some text.</div>
<button id="btn1">افزوردن کلاس</button>
<button id="btn2">حذف کلاسها</button>
<button id="btn3">تغییر وضعیت کلاسها</button>

</body>
</html>

Heading 1

Heading 2

This is a paragraph.

This is another paragraph.

This is some important text!

This is some text.