jQuery’de en çok kullandığımız özelliklerinden birisi de sınıf tanımlama, silme, varlığını kontrol etme ve toggleClass.

Peki bunların normal javascript’te karşılığı var mı ve bu kadar kolay kullanabiliyor muyuz? Elbette. Sırası ile inceleyelim.

Sınıf (class) ekleme

Seçtiğimiz elemana bir sınıf tanımlamak istediğimizde

jQuery ile

  $el.addClass('aktif');

Normal Js ile

  el.classList.add('aktif');

çok benzer tanımlar.

Sınıf (class) silme

Seçtiğimiz elemana ait sınıfı silmek istediğimizde

jQuery ile

  $el.removeClass('aktif');

Normal Js ile

 el.classList.remove('aktif');

yine çok benzer tanımlar.

Sınıfın varlığını kontrol edelim

Bir çok yerde seçilen eleman atanmış bir sınıfın olup olmadığını kontrol ederiz ve buna göre işlem yaparız.

jQuery ile

 $el.hasClass('aktif');

Normal Js ile

 el.classList.contains('aktif');

benzer kullanım.

Sınıf geçişi (toggle)

Çok tercih edilen bir diğer sınıf işlemedir.

jQuery ile

 $el.toggleClass('aktif');

Normal Js ile

 el.classList.toggle('aktif');

çok kullanışlı bu özelliğin normal js olması süper.

Sonuç

jQuery’den esinlenerek classList API’yi geliştirdiler. Artık aynı yetenekler normal javascript’te de var.

jQuery ile aynı kolaylıkta bir kullanım sağlayan normal js çözümlerini tercih etmek bize hız kazandıracaktır.

IE10 ve sonrası için desteği olan bu özellikleri rahatlıkla kullanabiliriz.

Kaynaklar

jQuery closest yerine closest() metodunu kullanalım

jQuery'de nkurtulma yöntemlerine devam ediyoruz. Bu sefer closest anlattık Devamını oku

Terminali (iTerm) güzelleştirmek ve iyileştirmek

19 September 2018 tarihinde yayınlandı.

Kitap incelemesi Beyond jQuery - Nicholus, Ray

12 September 2018 tarihinde yayınlandı.