jQuery'də CSS əməliyyatları

Elementlərin jquery vasitəsilə CSS stillərinə əlavələr etmək, dəyişdirmək, silmək kimi əməliyyatlar üçün dörd əsas funksiyamız vardır.

- addClass() ifadə edilən elementə stil əlavə edir.
- removeClass() ifadə edilən elementdəki stili silir.
- toggleClass() ifadə edilən elementdə stili dəyişdirir.
- css() ifadə edilən element üçün stil təyin etməyə yarayır.

Əvvəlcədən stil əlavə edilməmiş HTML elementinə stil əlavə etmək üçün addClass("stil adı") istifadə etməliyik. Stil adı, əvvəlcədən CSS stil faylımızda və ya stillərimiz arasında ifadə edilmiş olmalıdır.

Stili olan html elementindən bu stili silmək üçün removeClass("stil adı") istifadə etməliyik. Silmək istədiyimiz stil adını düzgün yazmaq lazımdır.

Stili olan elementin stilini dəyişdirmək üçün isə toggleClass("stil adı") istifadə etməliyik.

Aşağıdakı nümunəni araşdıraq:
<style type="text/css">
.qirmizi {color: #FF0000;}
.mavi {color: #0000FF;}
</style>
<div>Mənim rəngim necədir?</div>
<button id="btn1">Stil əlavə et</button>
<button id="btn2">Stili sil</button>
<button id="btn3">Stili dəyişdir</button>
<script>
$("#btn1").click(function(){
   $("div").addClass("qirmizi");
 });
$("#btn2").click(function(){
   $("div").removeClass("qirmizi");
 });
$("#btn3").click(function(){
   $("div").toggleClass("mavi");
 });
</script>
Nəticəni görmək üçün klikləyin
 
Kodları tətbiq etdikdə 1-ci düymə yazı rəngini qırmızı edir, yəni class="qirmizi" əlavə edir, 2-ci düymə qırmızı olan yazı rəngini yenidən qaraya çevirir, yəni class="qirmizi" stilini silir, 3-cü düymə isə stil nə olsa da mavi rəngə çevirir, yenidən basdıqda isə yaratdığı stili silir.
 
jQuery css() funksiyası
css("xüsusiyyət","dəyər") formasında istifadə edilən bu funksiya, elementin stillərində dəyişikliklər etməyə yarayır.

Məsələn bir mətnin arxa fon rəngini ağdan sarıya çevirən kod yazaq:
<p id="p1">Arxa fon rəngini dəyişdirmək istəyirsənsə kliklə!</p>
<button id="btn4">Rəng əlavə et</button>
<script>
$("#btn4").click(function(){
   $("#p1").css("background-color","yellow");
 });
</script>
Nəticəni görmək üçün klikləyin
 
Bəs birdən çox dəyişikliyi bir funksiya ilə edə bilərikmi? Bəli. Bunun üçün {} işarələri içində "xüsusiyyət": "dəyər" şəklində yazaraq aralarında vergül qoymalıyıq. Məsələn:
<p id="p1">Arxa fon rəngini dəyişdirmək istəyirsənsə kliklə!</p>
<button id="btn4">Rəng əlavə et</button>
<script>
$("#btn4").click(function(){
   $("p").css({"background-color":"yellow","font-size":"200%"});
 });
</script>
Nəticəni görmək üçün klikləyin

Nəticəyə baxsaq bu dəfə görərik ki, arxa fonun rənginin sarı olması ilə yanaşı, yazılar da böyüyəcəkdir.
jQuery