jQuery Add Class - Remove Class Kullanımı

Merhaba arkadaşlar bugün jQuery'de sık sık kullanabilceniz 2 tane fonksiyondan bahsedicem.

• addClass
• removeClass

Şimdi belki diceksiniz bunlar benim ne işime yarıcak ? kısaca şöyle açıklıyım, sayfayı hiç post etmeden direkt olarak tarayıcı üstünden nesnenize class eklemenize olanak sağlayacak böylelikle aktif olarak sayfanızda nesnelerinize css ile yapabilceğiniz herşeyi ekleyebilirsiniz.

Kullanımına gelirsek öncelikle addClass'tan başlayalım.

addClass:

<div id="baslik">ekipcalismasi.blogspot.com</div>

Css kodlarını ise şu şekilde yapalım

div
{
    background-color:#DDD;
}

standart bir div oluşturduk arkaplan rengini gri yaptık şimdi jquery ile değiştirelim bunları
bir tane buton koyalım butona tıklandımı css ile başka değişiklikler yapalım.

Öncelikle css tanımlayalım

<style type="text/css">
.kirmizi
{
 background-color:#F00;
 width:100px;
 height:100px;
}
</style>

kirmizi diye class tanımladık tıkladımı classımız eklencek arkaplan kırmızı olcak ve yükseklik genişlik değişecek.

Şimdide jquery kodlarımızı ekleyelim

<script type="text/javascript">

$(document).ready(function(e) {
    $("#css").click(function(e){
  $("#baslik").addClass("kirmizi");
  });
});

</script>

Kodumuzda dedik ki id'si css olan butona tıklandıgında id'si başlık olan nesneye kirmizi classını ekle.

Aşşağıdaki demodan inceleyebilirsiniz uygulamamızı

Demo

removeClass:

removeClass ise eklediğimiz herhangi bir classı silmemize yarayan jquery kodudur.

Kullanımı ise basittir.

<script type="text/javascript">

$(document).ready(function(e) {
    $("#css").click(function(e){
  $("#baslik").removeClass("kirmizi");
  });
});

burada ise üstte eklediğimiz classı sildik. Sorularınızı ve görüşlerinizi yorum olarak bildirirseniz memnun kalırız.