JQUERY İLE CLASS EKLEME

JQUERY ile sayfa içerisindeki elamanlara basit bir şekilde class ekleyebiliriz. Bunun için addClass()   metodunu kullanıyoruz.. 

ELEMANLARA CLASS EKLEME

Sayfadaki herhangi bir elemana class eklemek için  addClass metodunu kullanacağız.

GENEL KULLANIM

$(seçici).addClass( "classAdı1" , "classAdı2" ) ;

Örneğin , sayfadaki P etiketlerine ".yesil" class'ını , kutu id'li elemanada "mavi" class'ını eklyelim. Tabi bunun için öncelikle JQUERY bağlantısını oluşturuyoruz...

HTML

<p> JQUERY CLASS EKLEME </h2>
<p> addClass() Metodu </p>
<div id="kutu"> Farklı seçicilere uygulanabilir..</div>

JQUERY

<!-- JQUERY BAĞLANTISI -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> 

<script>
       $("p").addClass("yesil"); 
       $("#kutu").addClass("mavi"); 
</script>

 Yukarıdaki Jquery bloğu çalıştığında , sayfadaki tüm P etiketlerine .yesil class'ı , kutu id'li div'e ise mavi class'ı eklenecek ve HTML aşağıdaki gibi olacaktır...

SONUÇ

<p class="yesil"> JQUERY CLASS EKLEME </h2>
<p class="yesil"> addClass() Metodu </p>
<div id="kutu" class="mavi"> Farklı seçicilere uygulanabilir..</div>

BELİRLİ BİR ELEMANA CLASS EKLEME

Eğer sayfadaki tüm elemanlara değilde belli bir elemana class eklemek isterseniz , JQUERY seçicinizi ona göre ayarlamanız gerekir. Örneğin yukarıda tüm sayfadaki DIV etiketleri değil sadece "kutu" id'li elemana class tamış olduk... Bu şekilde farklı jquery seçicileri ile istenilen elemana class atanbilir.. Aynı HTML bloğunda sadece ilk P etiketine class eklemek isteseydik, JQUERY seçicisi ve kodu aşağıdaki gibi olacaktı.

JQUERY

 $("p:first").addClass("yesil"); 

SONUÇ

<p class="yesil"> JQUERY CLASS EKLEME </h2>
<p> addClass() Metodu </p>
<div id="kutu"> Farklı seçicilere uygulanabilir..</div>

p:first seçicisi sadece sayfadaki ilk P etiketine "yesil" class'ını eklemiş olur...

BİRDEN FAZLA CLASS EKLEME

addClass() ile aynı anda birden fazla class  eklenebilir. Bunun için addClass parantezinde aralarına virgül  eklenerek Class isimleri yazılır. Örneğin "yesil" class'ı ile beraber birde "font1rem" class'ı ekleyelim..

JQUERY

 $("p:first").addClass("yesil","font1rem"); 

SONUÇ

<p class="yesil font1rem"> JQUERY CLASS EKLEME </h2>
<p> addClass() Metodu </p>
<div id="kutu"> Farklı seçicilere uygulanabilir..</div>

İlk P etiketine hem "yesil" hemde "font1rem" Class'ları eklenmiş olur..

Görüüşmek üzere...