jQuery kodlarını Javascript'e çevirin

Performansın özellikle önemli olduğu şu günlerde, basit işlemler için jQuery kütüphanesinin tamamını sayfanıza dahil etmek yerine, jQuery'de kullandığınız kodları nasıl javascript ile yazabileceğinizi öğrenmek, sayfanızın performansını artırmak için güzel bir yöntemdir.

Bildiğiniz gibi zaten jQuery, Javascript ile yazılmış bir kütüphanedir. Ancak syntax'ının kolaylığından dolayı, jQuery'i javascript bilmeden öğrenen kişiler için Javascirpt sanki çok zormuş gibi bir algı oluşuyor. Bu algı biraz doğru, zor yanları elbette var ancak jQuery'nin kullanım alanları için bunun çok geçerli olduğu söylenemez. Tek dezavantajı bazı komplike kodların tarayıcılar arası uyumsuzluğu ve bazı kodların jquery'e göre javascript tarafında daha uzun şekilde yazılıyor olması.

Ancak günümüzde artık modern tarayıcılar popülerleştiği için, Internet Explorer gibi çağ dışı tarayıcıları düşünmek zorunda kalmıyoruz. O yüzden basit işlemleri Javascript ile yazmamızda hiçbir sakınca yok.

$() - Etiketleri Seçme

Etiketleri seçmenin bir çok yolu olduğunu CSS'den biliyoruz. ID niteliğine, class niteliğine etiketin adına etiketin niteliklerine göre bir çok şekilde etiketi ya da etiketleri seçme şansımız var. Ancak jQuery'de tüm işlemler için $() fonksiyonu kullanılıyor. Peki şimdi jQuery'deki bazı örnekleri Javascript'de nasıl yazabaileceğimizi öğrenelim.

// etiket adına göre seçmek
$('ul')

// id niteliğine göre seçmek
$('#popup')

// sınıf niteliğine göre seçmek
$('.button')

// seçim tekniği farketmeksizin tek bir etiketi seçmek
$('.button i')

// seçim tekniği farketmeksizin birden fazla etiketi seçmek
$('nav.menu ul.list li')

// etiket adına göre seçmek
document.getElementsByTagName('ul')

// id niteliğine göre seçmek
document.getElementById('popup')

// sınıf niteliğine göre seçmek
document.getElementsByClassName('button')

// seçim tekniği farketmeksizin tek bir etiketi seçmek
document.querySelector('.button i')

// seçim tekniği farketmeksizin birden fazla etiketi seçmek
document.querySelectorAll('nav.menu ul.list li')

show() / hide()

Etiketleri gizlemek ve göstermek için bu metodları kullanıyoruz. Javascript'de ise, style objesine erişerek ilgili display özelliğini değiştirmemiz yeterli oluyor.

// gizlemek
$(el).hide()

// göstermek
$(el).show()

// gizlemek
el.style.display = 'none'

// göstermek
el.style.display = ''

toggle()

Bu metodu kullandığımızda eğer ilgili etiket gizliyse gösterir, gizli değilse gizler. Yani show/hide arasında geçiş yapmamızı sağlar. Bunu javascript'de bir kontrol ile yapmamız mümkün.

$(el).toggle()

el.style.display = !el.style.display ? 'none' : ''

addClass() / removeClass() / toggleClass() / hasClass()

addClass() sınıf eklemek için, removeClass() sınıfı silmek için, toggleClass() sınıf varsa silmek yoksa eklemek için, hasClass() ise etikete ait öyle bir sınıf olup olmadığını kontrol etmek için kullanılıyor.

Bu işlemi javascript'de classList objesinin altında add(), remove(), toggle() ve contains() metodlarını kullanarak yapıyoruz.

// sınıf eklemek
$(el).addClass('active')

// sınıf silmek
$(el).removeClass('active')

// sınıfı ekleyip/silmek
$(el).toggleClass('active')

// sınıf olup olmadığını kontrol etmek
$(el).hasClass('active')

// sınıf eklemek
el.classList.add('active')

// sınıf silmek
el.classList.remove('active')

// sınıfı ekleyip/silmek
el.classList.toggle('active')

// sınıf olup olmadığını kontrol etmek
el.classList.contains('active')

text() / html()

text() etiketin içindeki yazıyı almak ya da yeni yazı tanımlamak için, html() etiketin html yapısını almak ya da yeni yapı tanımlamak için kullanılıyor.

Javascript'de ise innerText ve innerHTML metodları işimizi çözüyor.

// yazı değerini almak
let text = $(el).text();

// yeni yazı değeri tanımlamak
$(el).text('yeni değer')

// html değerini almak
let html = $(el).html()

// yeni html değeri tanımlamak
$(el).html('<strong>prototurk.com</strong>')

// yazı değerini almak
let text = el.innerText;

// yeni yazı değeri tanımlamak
el.innerText = 'yeni değer'

// html değerini almak
let html = el.innerHTML

// yeni html değeri tanımlamak
el.innerHTML = '<strong>prototurk.com</strong>'

css()

css() ile etiketin css değerlerini alabilir ya da yeni css değerleri tanımlayabiliriz.

Javascript tarafında değer almak ve değer tanımlamak iki farklı işlem. Değerini almak için getComputedStyle() metodunu kullanıyoruz. Değer belirlemek için etiketin style objesinde ilgili css özelliğine erişerek tanımlama yapıyoruz.

// css özelliğinin değerini almak
$(el).css('box-sizing')

// css özelliğine yeni değer atamak
$(el).css('box-sizing', 'border-box')

// css özelliğinin değerini almak
getComputedStyle(el)['box-sizing']

// css özelliğine yeni değer atamak
el.style.boxSizing = 'border-box'

parent()

Bir üst nesneye çıkmak için parent() kullanılıyor. Javascript'de ise parentNode olarak kullanıyoruz.

$(el).parent()

el.parentNode

prev() / next()

Önceki ve sonraki etiketleri seçmek için bu metodlar kullanılıyor. Javascript'de ise previousElementSibling ve nextElementSibling objeleriyle bu işlemi yapıyoruz.

// önceki etiket
$(el).prev()

// sonraki etiket
$(el).next()

// önceki etiket
el.previousElementSibling

// sonraki etiket
el.nextElementSibling

remove()

Etiketi silmek için bu özelliği kullanıyoruz. Javascript'de önce etiketin parent'ına parentNode ile çıkıp daha sonra removeChild() metodu ile ilgili nesnesi siliyoruz.

$(el).remove()

el.parentNode.removeChild(el)

attr() / removeAttr()

Etiketlere nitelik eklemek ya da değerini almak için attr() nitelik silmek içinse removeAttr() kullanıyoruz. Javascript'de ise setAttribute() ve getAttribute() metodlarını kullanıyoruz.

// nitelik eklemek için
$(el).attr('tabindex', 1)

// niteliğin değerini almak için
$(el).attr('class')

// nitelik silmek için
$(el).removeAttr('disabled')

// nitelik eklemek için
el.setAttribute('tabindex', 1)

// niteliğin değerini almak için
el.getAttribute('class')

// nitelik silmek için
el.removeAttribute('disabled')

append() / prepend()

Seçilen etiketin başına ve sonuna ekleme yapmak için bu özellikler kullanılıyor. Javascript'de ise append() için appendChild() ve prepend() için insertBefore() kullanılıyor.

$(parent).append(el)
$(parent).prepend(el)

parent.appendChild(el)
parent.insertBefore(el, parent.firstChild)

before() / after()

Seçilen etiketin öncesine ve sonrasına ekleme yapmak için bu özellikler kullanılıyor. Javascript'de ise insertAdjacentElement() metodu kullanılıyor.

$(target).before(el)
$(target).after(el)

target.insertAdjacentElement('beforebegin', el)
target.insertAdjacentElement('afterend', el)