jQuery'e İhtiyacınız Yok

Önyüz ortamları bugünlerde çok hızlı gelişiyor, öyle ki modern tarayıcılar DOM/DOM APİ'lere ait önemli gereklilikleri çoktan yerine getirdiler. DOM işleme ve olaylar için, en baştan jQuery ögrenmemize gerek kalmadı. Bu arada, üstünlükleri ile jQuery'i önemsizleştiren ve doğrudan DOM değişikliklerinin bir Anti-pattern olduğunu gösteren, React, Angular ve Vue gibi gelişmiş önyüz kütüphanelerine ayrıca teşekkür ederiz. Bu proje, çoğunluğu jQuery yöntemlerine alternatif olan yerleşik uygulamaları içerir.

Kod örnekleri, sürekli güncellenen (evergreen) tarayıcıların güncel sürümlerini hedefler (Chrome, Edge, Firefox, Safari). Internet Explorer artık Microsoft tarafından desteklenmediği için IE'ye özgü yedek (fallback) kodlar kaldırıldı. Bunlara hâlâ ihtiyacınız varsa, IE uyumlu son sürüme göz atabilirsiniz.

Çeviriler

Sorgu seçiciler

Yaygın olan class, id ve özellik seçiciler yerine, document.querySelector yada document.querySelectorAll kullanabiliriz. Ayrıldıkları nokta:

document.querySelector ilk seçilen öğeyi döndürür
document.querySelectorAll Seçilen tüm öğeleri statik bir NodeList olarak geri döndürür. NodeList forEach metodunu destekler ve Array.from(document.querySelectorAll(selector)) kullanarak bir diziye dönüştürülebilir.
Herhangi bir öğe seçilemezse, jQuery boş bir jQuery nesnesi ve document.querySelectorAll boş bir NodeList döndürürken, document.querySelector null döndürür.

Uyarı: document.getElementById, document.getElementsByClassName ve document.getElementsByTagName, querySelector* metodlarından biraz daha hızlıdır; ancak getElementsBy* metodları, DOM değiştikçe kendiliğinden güncellenen canlı (live) bir HTMLCollection döndürür. Ölçerek tespit ettiğiniz bir darboğaz yoksa querySelector* metodlarını tercih ediniz.

1.0 Seçici ile sorgu

// jQuery
$('selector');

// Yerleşik
document.querySelectorAll('selector');

1.1 Sınıf ile sorgu

// jQuery
$('.class');

// Yerleşik
document.querySelectorAll('.class');

// yada
document.getElementsByClassName('class');

1.2 Id ile sorgu

// jQuery
$('#id');

// Yerleşik
document.querySelector('#id');

// yada
document.getElementById('id');

1.3 Özellik ile sorgu

// jQuery
$('a[target=_blank]');

// Yerleşik
document.querySelectorAll('a[target=_blank]');

1.4 Öğe erişimi

Node'a erişim

// jQuery
$el.find('li');

// Yerleşik
el.querySelectorAll('li');

Body'e erişim

// jQuery
$('body');

// Yerleşik
document.body;

Özelliğe erişim

// jQuery
$el.attr('foo');

// Yerleşik
el.getAttribute('foo');

Data özelliğine erişim

// jQuery
$el.data('foo');

// Yerleşik
el.dataset.foo;

// yada
el.getAttribute('data-foo');

1.5 Kardeş/Önceki/Sonraki öğeler

Kardeş öğeler

// jQuery
$el.siblings();

// Yerleşik
[...el.parentNode.children].filter((child) =>
  child !== el
);

Önceki öğeler

// jQuery
$el.prev();

// Yerleşik
el.previousElementSibling;

Sonraki öğeler

// jQuery
$el.next();

// Yerleşik
el.nextElementSibling;

1.6 En yakın

Verilen seçici ile eşleşen ilk öğeyi döndürür, geçerli öğeden başlayarak document'a kadar geçiş yapar.
```
// jQuery
$el.closest(selector);

// Yerleşik
el.closest(selector);
```

1.7 Önceki atalar

Verilen seçici ile eşleşen öğe veya DOM node veya jQuery nesnesi hariç, mevcut öğe ile aradaki tüm önceki ataları bir set dahilinde verir.

// jQuery
$el.parentsUntil(selector, filter);

// Yerleşik
function parentsUntil(el, selector, filter) {
  const result = [];

  // eşleştirme, atadan başlar
  el = el.parentElement;
  while (el && !el.matches(selector)) {
    if (!filter || el.matches(filter)) {
      result.push(el);
    }
    el = el.parentElement;
  }
  return result;
}

1.8 Form

Input/Textarea

// jQuery
$('#my-input').val();

// Yerleşik
document.querySelector('#my-input').value;

e.currentTarget ile .radio arasındaki dizini verir

// jQuery
$('.radio').index(e.currentTarget);

// Yerleşik
[...document.querySelectorAll('.radio')].indexOf(e.currentTarget);

1.9 Iframe İçeriği

Mevcut Iframe için $('iframe').contents() yerine contentDocument döndürür.

Iframe İçeriği

// jQuery
$iframe.contents();

// Yerleşik
iframe.contentDocument;

Iframe seçici

// jQuery
$iframe.contents().find('.css');

// Yerleşik
iframe.contentDocument.querySelectorAll('.css');

⬆ üste dön

CSS & Stil

2.1 CSS

Stili verir

// jQuery
$el.css('color');

// Yerleşik
// NOT: Çözümlenmiş değeri döndürür, örneğin '#f01' yerine 'rgb(255, 0, 17)'
getComputedStyle(el).color;

Stil değiştir

// jQuery
$el.css({ color: '#f01' });

// Yerleşik
el.style.color = '#f01';

Birden fazla stili değiştir

// jQuery
$el.css({ color: '#f01', 'border-color': '#f02' });

// Yerleşik
Object.assign(el.style, { color: '#f01', borderColor: '#f02' });

Sınıf ekle

// jQuery
$el.addClass(className);

// Yerleşik
el.classList.add(className);

Sınıf çıkart

// jQuery
$el.removeClass(className);

// Yerleşik
el.classList.remove(className);

sınfı var mı?

// jQuery
$el.hasClass(className);

// Yerleşik
el.classList.contains(className);

Sınfı takas et

// jQuery
$el.toggleClass(className);

// Yerleşik
el.classList.toggle(className);

2.2 Genişlik ve Yükseklik

Genişlik ve Yükseklik teorik olarak aynı şekilde, örnek olarak Yükseklik veriliyor

Window Yüksekliği

// jQuery
$(window).height();

// kaydırma çubuğu olmaksızın, jQuery ile aynı
window.document.documentElement.clientHeight;

// kaydırma çubuğu ile birlikte
window.innerHeight;

Document yüksekliği

// jQuery
$(document).height();

// Yerleşik
const body = document.body;
const html = document.documentElement;
const height = Math.max(
  body.offsetHeight,
  body.scrollHeight,
  html.clientHeight,
  html.offsetHeight,
  html.scrollHeight
);

Öğe yüksekliği

// jQuery
$el.height();

// Yerleşik
function getHeight(el) {
  const styles = window.getComputedStyle(el);
  const height = el.offsetHeight;
  const borderTopWidth = parseFloat(styles.borderTopWidth);
  const borderBottomWidth = parseFloat(styles.borderBottomWidth);
  const paddingTop = parseFloat(styles.paddingTop);
  const paddingBottom = parseFloat(styles.paddingBottom);
  return height - borderBottomWidth - borderTopWidth - paddingTop - paddingBottom;
}

// Tamsayı olarak daha doğru olanı (`border-box` iken, `height - border` esas; `content-box` ise, `height + padding` esas alınır)
el.clientHeight;

// Ondalık olarak daha doğru olanı (`border-box` iken, `height` esas; `content-box` ise, `height + padding + border` esas alınır)
el.getBoundingClientRect().height;

Öğe dış yüksekliği

Padding ve border dahil yükseklik, isteğe bağlı olarak margin de dahil.

// jQuery
$el.outerHeight();

// Yerleşik (tamsayıya yuvarlanır, CSS transform dikkate alınmaz)
el.offsetHeight;

// jQuery
$el.outerHeight(true);

// Yerleşik
function getOuterHeight(el) {
  const styles = window.getComputedStyle(el);
  return el.offsetHeight + parseFloat(styles.marginTop) + parseFloat(styles.marginBottom);
}

2.3 Pozisyon ve Ara-Açıklığı

Pozisyon

// jQuery
$el.position();

// Yerleşik
const position = { left: el.offsetLeft, top: el.offsetTop };

Ara-Açıklığı

// jQuery
$el.offset();

// Yerleşik
function getOffset (el) {
  const box = el.getBoundingClientRect();

  return {
    top: box.top + window.scrollY,
    left: box.left + window.scrollX
  };
}

2.4 Üste kaydır

// jQuery
$(window).scrollTop();

// Yerleşik
window.scrollY;

⬆ üste dön

DOM düzenleme

3.1 Çıkartma

// jQuery
$el.remove();

// Yerleşik
el.remove();

3.2 Metin

Get text

// jQuery
$el.text();

// Yerleşik
el.textContent;

Set text

// jQuery
$el.text(string);

// Yerleşik
el.textContent = string;

3.3 HTML

HTML'i alma

// jQuery
$el.html();

// Yerleşik
el.innerHTML;

HTML atama

// jQuery
$el.html(htmlString);

// Yerleşik
el.innerHTML = htmlString;

3.4 Sona ekleme

Ata öğenin son çocuğundan sonra öğe ekleme

// jQuery: DOMString ve Node nesneleri için ortak söz dizimi
$parent.append(newEl | '<div id="container">Hello World</div>');

// Yerleşik (Element veya metin): dizeler HTML olarak ayrıştırılmaz, düz metin olarak eklenir
parent.append(newEl | 'Hello World');

// Yerleşik (HTML dizesi)
parent.insertAdjacentHTML('beforeend', '<div id="container">Hello World</div>');

3.5 Öne ekleme

// jQuery: DOMString ve Node nesneleri için ortak söz dizimi
$parent.prepend(newEl | '<div id="container">Hello World</div>');

// Yerleşik (Element veya metin): dizeler HTML olarak ayrıştırılmaz, düz metin olarak eklenir
parent.prepend(newEl | 'Hello World');

// Yerleşik (HTML dizesi)
parent.insertAdjacentHTML('afterbegin', '<div id="container">Hello World</div>');

3.6 Öncesine Ekleme

Seçili öğeden önceki yere yeni öğe ekleme

// jQuery
$newEl.insertBefore(selector);

const el = document.querySelector(selector);

// Yerleşik (Element)
el.before(newEl);

// Yerleşik (HTML dizesi)
el.insertAdjacentHTML('beforebegin', '<div id="container">Hello World</div>');

3.7 Sonrasına ekleme

Seçili öğeden sonraki yere yeni öğe ekleme

// jQuery
$newEl.insertAfter(selector);

const el = document.querySelector(selector);

// Yerleşik (Element)
el.after(newEl);

// Yerleşik (HTML dizesi)
el.insertAdjacentHTML('afterend', '<div id="container">Hello World</div>');

3.8 eşit mi?

Sorgu seçici ile eşleşiyor ise true döner

// jQuery için not: `is` aynı zamanda `function` veya `elements` için de geçerlidir fakat burada bir önemi bulunmuyor
$el.is(selector);

// Yerleşik
el.matches(selector);

3.9 Klonlama

Mevcut öğenin bir derin kopyasını oluşturur

// jQuery. Olay işleyicilerini ve verileri de kopyalamak için `true` parametresi veriniz.
$el.clone();

// Yerleşik. Derin kopya için `true` parametresi veriniz; olay dinleyicileri hiçbir zaman kopyalanmaz.
el.cloneNode(true);

⬆ üste dön

Ajax

Fetch API, ajax için XMLHttpRequest yerine kullanılan standarttır ve tüm modern tarayıcılarda çalışır. $.ajax'ın aksine fetch, 404 veya 500 gibi HTTP hata durumlarında promise'i reddetmez; response.ok değerini kendiniz kontrol etmelisiniz. JSONP istekleri için fetch-jsonp deneyiniz.

4.0 JSON verisi alma

// jQuery
$.getJSON(url).done(handleData).fail(handleError);

// Yerleşik
fetch(url)
  .then((response) => {
    if (!response.ok) {
      throw new Error(`HTTP ${response.status}`);
    }
    return response.json();
  })
  .then(handleData)
  .catch(handleError);

4.0.1 JSON verisi gönderme (POST)

// jQuery
$.ajax({
  url,
  method: 'POST',
  contentType: 'application/json',
  data: JSON.stringify(data),
});

// Yerleşik
fetch(url, {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(data),
});

4.0.2 İsteği iptal etme ve zaman aşımı

// jQuery
const jqXHR = $.ajax({ url, timeout: 5000 });
jqXHR.abort();

// Yerleşik
const controller = new AbortController();
fetch(url, { signal: controller.signal });
controller.abort();

// Yerleşik (zaman aşımı)
fetch(url, { signal: AbortSignal.timeout(5000) });

4.1 Sunucudan veri yükleme ve dönen HTML'i eşleşen öğenin içine yerleştirme

// jQuery
$(selector).load(url, completeCallback)

// Yerleşik
fetch(url)
  .then((response) => response.text())
  .then((html) => {
    document.querySelector(selector).innerHTML = html;
  })
  .then(completeCallback);

⬆ üste dön

Olaylar

5.1 on ile bir öğeye bağlama

// jQuery
$el.on(eventName, eventHandler);

// Yerleşik
el.addEventListener(eventName, eventHandler);

5.1.1 one ile bir öğeye yalnızca bir kez bağlama

// jQuery
$el.one(eventName, eventHandler);

// Yerleşik
el.addEventListener(eventName, eventHandler, { once: true });

5.1.2 Olay delegasyonu

// jQuery
$el.on(eventName, selector, eventHandler);

// Yerleşik
el.addEventListener(eventName, (event) => {
  const target = event.target.closest(selector);
  if (target && el.contains(target)) {
    eventHandler.call(target, event);
  }
});

5.2 off ile bir bağlamayı sonlandırma

// jQuery
$el.off(eventName, eventHandler);

// Yerleşik
el.removeEventListener(eventName, eventHandler);

// Yerleşik: jQuery namespace'lerinde olduğu gibi birden fazla dinleyiciyi tek seferde kaldırma
const controller = new AbortController();
el.addEventListener('click', onClick, { signal: controller.signal });
el.addEventListener('keydown', onKeydown, { signal: controller.signal });
controller.abort();

5.3 Tetikleyici

// jQuery
$(el).trigger('custom-event', {key1: 'data'});

// Yerleşik. jQuery olayları üst öğelere doğru yayılır (bubble); yerleşik olaylar ise `bubbles: true` verilmedikçe yayılmaz.
// Verileri, olay işleyicisi içinde `event.detail` üzerinden okuyunuz.
const event = new CustomEvent('custom-event', {
  bubbles: true,
  cancelable: true,
  detail: { key1: 'data' },
});

el.dispatchEvent(event);

⬆ üste dön

Araçlar

6.1 isArray

// jQuery
$.isArray(array);

// Yerleşik
Array.isArray(array);

6.2 Trim

// jQuery
$.trim(string);

// Yerleşik
string.trim();

6.3 Nesne atama

deep parametresi olmadan çağrılan $.extend gibi, Object.assign ve spread söz dizimi de yalnızca yüzeysel (shallow) bir kopya oluşturur.

// jQuery
$.extend({}, object1, object2);

// Yerleşik
Object.assign({}, object1, object2);

// Yerleşik (spread)
({ ...object1, ...object2 });

Tek bir nesnenin derin kopyasını oluşturma:

// jQuery
$.extend(true, {}, object);

// Yerleşik. Fonksiyonlar ve DOM düğümleri kopyalanamaz
structuredClone(object);

6.4 İçerme

// jQuery
$.contains(el, child);

// Yerleşik
el !== child && el.contains(child);

⬆ üste dön

Alternatifler

jQuery'e İhtiyacınız Yok - Yaygın olan olay, öğe ve ajax işlemlerinin yalın Javascript'teki karşılıklarına ait örnekler
MDN Web Docs - Burada kullanılan tüm DOM API'leri için başvuru kaynağı
Baseline - Hangi web platformu özelliklerinin tarayıcılar arasında güvenle kullanılabileceğini gösterir

Tarayıcı Desteği


Latest ✔	Latest ✔	Latest ✔	Latest ✔	Latest ✔

Bazı örnekler daha yeni API'ler kullanır: Promise.withResolvers() (2024), el.replaceChildren() (2020) ve AbortSignal.timeout() (2022). Daha eski tarayıcıları da destekliyorsanız Baseline üzerinden kontrol ediniz.

Lisans

MIT

Navigation Menu

Repository navigation

README-tr.md

README-tr.md

jQuery'e İhtiyacınız Yok

İçerik Tablosu

Çeviriler

Sorgu seçiciler

CSS & Stil

DOM düzenleme

Ajax

Olaylar

Araçlar

Alternatifler

Tarayıcı Desteği

Lisans

FilesExpand file tree

README-tr.md

Latest commit

History

README-tr.md

File metadata and controls

jQuery'e İhtiyacınız Yok

İçerik Tablosu

Çeviriler

Sorgu seçiciler

CSS & Stil

DOM düzenleme

Ajax

Olaylar

Araçlar

Alternatifler

Tarayıcı Desteği

Lisans