tarihinde Fatih Hayrioğlu

jQuery’nin en büyük avantajlarından birisi seçici kullanımının basitiliğidir. CSS seçicilerini javascript’e kazandıran bu kullanım kolaylığı sizzle kütüphanesinden gelir. Javascript bu konuda daha sığ ve beceriksiz kaldı. Tabi sonra işler değişti ve artık aynı yeteneklere sahip.

Seçicilerdeki bu büyük atılımı sağlayan iki özellik var querySelector ve querySelectorAll.

Element.querySelector()

Belirtilen öğenin ilk alt elemanını döndürür.

element = anaElement.querySelector(secici);

Buradaki secici kısmında aklınıza gelecek tüm CSS seçicileri konabiliyor. İşte süperlik buradan kaynaklanıyor. a:before, p[title], p > span, ul li ~ li, vs.

Eğer element bulunamazsa null değeri döner.

Element.querySelectorAll()

Belirtilen öğe grubunun tüm alt elemanlarını döndürür.

elementList = baseElement.querySelectorAll(seciciler);

Buradaki seciciler kısmında aklınıza gelecek tüm CSS seçicileri konabiliyor.

Yukarıdaki özelliğin çoklusu. Bu seçici sonucunda bir dizi element döner.

var el = document.querySelector('#test'); 
var aktifElemanlar = el.querySelectorAll('div.aktif > p');

aktif eleman altındaki tüm paragrafları yakalamamızı sağlar.

Tarayıcı desteği konusunda da çok iyi bir durumdalar. IE8+ destekleri var.

Javascript seçicilerini iki gruba ayıracağız.

  • Ana eleman seçicileri
  • DOM ilişkilerine dayanan seçiciler

Ana eleman seçicileri

CSS derslerinden alışık olduğumuz gibi seçiciler javascript dünyasında da önemli bir yere sahiptir. Kod yazarlarının en çok kullandığı araçlardan biridir seçiciler. Seçiciler ne kadar gelişmiş olursa, bizlere kod yazarken o kadar rahatlık sağlıyor.

Tekil (ID) seçiciler

CSS’den alışık olduğumuz ID seçiciler sayfada bir tane bulunan bir elemanı yakalamak için kullanılır. En büyük avanatjı hızdır.

<div id="trabzon"></div>

Sayfamızda tek bir trabzon id’li elemanı yakalamak için

jQuery ile

var trabzon = $('#trabzon');

Javascript ile

var trabzon = document.getELementById('trabzon');

Tarayıcı desteğinin IE5.5+ olması ne kadar eski olduğunu gösteriyor.

veya

var tarabzon = document.querySelector('#trabzon');

her ne kadar daha yavaş olasa da bir tercih olarak kenarda dursun.

Sınıf (class) seçicileri

Sayfada birden fazla elemanı yakalamk için kullandığımız HTML özniteliğidir.

jQuery ile

var sehir = $('.sehir');

Javascript ile

var sehir = document.getElementsByClassName('sehir');

Bu seçici tüm class=”sehir” tanımlı elemanları bulur ve bize bir dizi olarak döner.

Tüm yeni nesil tarayıcılar ve IE8+ desteği vardır.

veya

var sehir = document.querySelectorAll('.sehir');

her ne kadar daha yavaş olasa da bu da bir tercih.

Etiket (tag) seçicisi

HTML etiketlerini kullanarak seçim yapmamızı sağlar.

jQuery

var katman = $('div');

Javascript ile

var katman = document.getElementsByTagName('div');

Bu seçici tüm <div> etiketli elemanları bulur ve bize bir dizi olarak döner.

IE5.5+ desteği var.

veya

var katman = document.querySelectorAll('div');

her ne kadar daha yavaş olasa da bu da bir tercih.

Öznitelik (attribute) seçicileri

Özellik Seçicileri HTML dokümanlarındaki seçilen etiketin özelliklerine veya özellik değerlerine göre seçim yapmamızı sağlar.

<img src="logo.gif" alt="Logo" width="32" height="41" />

jQuery ile

$('[alt="logo"]');

Javascript ile

document.querySelectorAll('[alt="logo"]');

jQuery benzer bir kullanım var.

Sözde sınıf (Pseudo-class) seçicileri

Aslında bir HTML sınıfı olmamasına rağmen sözde olarak oluşturulan sınıfları yakalamak için kullanılır. CSS’ten alışık olduğumuz bir seçici.

jQuery ile

var metinAlani = $('input:focus');

Javascript ile

var metinAlani = document.querySelectorAll('input:focus');

Süper değil mi?

Sonuç

jQuery’nin elindeki en büyük kozlardan birisi olan kolay seçici kullanımını aynı kolaylık ile javascript ile yapabiliyor olmak sevindirici.

Bir sonraki yazımda DOM ilişkilerine dayanan seçicilerden bahsedeceğim.

Kalın sağlıcakla.

Kaynaklar

tarihinde Fatih Hayrioğlu

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

tarihinde Fatih Hayrioğlu

Uzun seneler web siteleri kodlarken nimetlerinden yararlandığımız jQuery, mobilin yükselişi ile gündemin ana maddesi olan performans sonrası yerini sorgulatıyor. Acaba normal javascript ile ben jquery’nin yaptıklarını yapamaz mıyım. Aslında Javascript’in hızlı yenilenmesi ile birlikte bir çok özelliği, metodu, fonksiyonu normal javascript ile yapabiliyoruz.

Bu yazı dizisini de şu an üzerinde çalıştığım zingat.com‘da üzerine uzun süredir kafa yorduğumuz performans işlerinin bir sonucu olarak “acaba jQuery kaldırsak daha mı hızlanırız?” sorunundan sonra başladım.

Jquery’nin sağladığı avantajları bilip bunlara karşı çözümler aramalıyız.

  • Kolay yazım
  • Tarayıcı desteği
  • Geniş topluluk desteği
  • jQuery kütüphanelerinin yaygınlığı
  • Dokümantasyon ve makale bolluğu

Kolay yazım

jQuery bir çok işimizi kolaylaştıran seçiciler, manipülasyon işleri ve kullanışlı metotlar sayesinde kod yazanlara kolaylıklar sağlar.

Gelişen javascript sürümleri ile jQuery ile yaptığımız kolaylıkta bu işleri artık javascripte yapabiliyoruz.

Tarayıcı desteği

Farklı tarayıcılar için çözüm oluşturmak için jQuery birebir.

Tarayıcıların otomatik güncellenmesi ile bu sorun büyük oranda azaldı.

Geniş topluluk desteği, jQuery kütüphanelerinin yaygınlığı ve Dokümantasyon ve makale bolluğu

jQuery geliştiren ve çözüm üreten bir çok insan var.

Performans sorunları sonrası bu ibre normal javascript tarafına yöneliyor.

Şimdi jquery ile yaptığımız işleri native javascript ile nasıl yapacağımıza tek tek bakalım.

İlk konu basit olsun. Javascript DOM işleri ile uğraştığımız için javascript’in çalışması için genelde DOM’un yüklenmesini bekleriz.

Meşhur jquery girişi:

	$(document).ready(function() { 
	  // DOM hazır
	});

veya kısa şekli

	$(function() {
	  // DOM hazır
	});

Peki bu kodu javascript ile nasıl yaparız. İki yöntem var tercih sizin.

DOMContentLoaded

	document.addEventListener('DOMContentLoaded', function() {
	  // DOM hazır
	});

onreadystatechange

	document.onreadystatechange = function () {
	  if (document.readyState == "complete") {
	    // DOM hazır
	  }
	}

Nasıl güzel değil mi?

Kalın sağlıcakla.

Kaynaklar