JQUERY İLE CLASS İŞLEMLERİ

Jquery ile class işlemlerinde , javascript'te olduğu gibi classList nesnesini kullanmamıza gerek kalmıyor. Seçiciden sonra doğrudan class ile ilgili işlemi yazabiliyoruz.

CLASS EKLEME  addClass()

Class eklemek için addClass() metodunu kullanıyoruz. Aşağıdaki örnekte #kutu id'li div'e "bg-danger" class'ı eklenirken , #box id'li div'e hem bg-danger hemde text-primary class'ları eklenmiş olur.  

<div id="kutu" class="">
<div id="box" class="">

<scritpt> 
      $("#kutu").addClass("bg-danger");   // bg-danger class'ı ekleniyor
      $("#box").addClass("bg-danger text-primary");  // bg-danger ve text-primary class'ı ekleniyor
</script>

<div id="kutu" class="bg-danger">
<div id="box" class="bg-danger text-primary">

CLASS ÇIKARMA  removeClass()

Class eklemek için removeClass() metodunu kullanıyoruz. Aşağıdaki örnekte #kutu id'li div'den "bg-danger" class'ı , #box id'li div'den ise hem bg-danger hemde text-primary class'ları çıkarılmış olur.  

<div id="kutu" class="bg-danger">
<div id="box" class="bg-danger text-primary">

<scritpt> 
   $("#kutu").removeClass("bg-danger");
   $("#box").removeClass("bg-danger text-primary");
</script>

<div id="kutu" class="">
<div id="box" class="">

CLASS TOOGLE  toggleClass()

Class'ları yoksa eklemek, varsa çıkarmak için toggleClass() metodunu kullanıyoruz. Aşağıdaki örnekte "kutu" id'li elemana "bg-danger" class'ı  , mevcut clas'lar içerisinde olmadığı için eklenmiş olur. Birden fazla class'ı aynı anda toggle işlemine almak için yine ekle ve çıkarda yaptığımız gibi class'lar arasına virgül eklenir.

<div id="kutu" class="">

<scritpt> 
   $("#kutu").toggleClass("bg-danger");
</script>

<div id="kutu" class="bg-danger">