jQuery

Orijinal Yazar(lar) John Resig
Geliştirici(ler) The jQuery Team
İlk Sürüm 26 Ağustos 2006
Stabil Sürüm 3.4.1
Depo github.com/jquery/jquery
Yazılmış JavaScript
Platform Tarayıcı desteine bakın.
Boyut 30-263 KB
Tip JavaScript Kütüphanesi
Lisans MIT
Web Sitesi jquery.com

jQuery; sırayla tüm HTML DOM düğümlerinin ziyaretini ve manipülasyonunu basitleştirmek, olay işleme, CSS animasyonu ve Ajax’ı basitleştirmek için tasarlanmış bir JavaScript kütüphanesidir. Müsamahakâr MIT Lisansı’nı kullanan özgür, açık kaynak bir yazılımdır. Mayıs 2019 itibarıyla jQuery en popüler 10 milyon web sitesinin %73’ü tarafından kullanılıyor. Web analizi; herhangi bir diğer JavaScript kütüphanesinden 3 ila 4 kat daha fazla kullanım alanını, büyük bir farkla en yaygın kullanılan JavaScript kütüphanesi olduğunu gösterir.

jQuery’nin söz dizimi; bir dokümanda gezinmeyi, DOM elemanlarını seçmeyi, animasyonlar oluşturmayı, olayları ele almayı ve Ajax uygulamaları geliştirmeyi kolaylaştırmak için tasarlanmıştır. jQuery ayrıca geliştiricilere JavaScript kütüphanesinin üstüne eklentiler oluşturma yetenekleri sunar. Bu, geliştiricilerin düşük seviyeli etkileşim ve animasyon, soyut efektler ve üst düzey temalı widget’ler için soyutlamalar oluşturmasını sağlar. JQuery kütüphanesine modüler yaklaşım, güçlü dinamik web sayfaları ve Web uygulamaları oluşturulmasını sağlar.

jQuery çekirdek özellikleri seti (DOM elemanı seçimleri, geçiş ve manipülasyon); seçici motoru (v1.3’ten “Sizzle” olarak adlandırılmış) tarafından etkinleştirildi, algoritmalar ve DOM veri yapılarını birleştiren yeni bir “programlama stili” yarattı. Bu stil; daha sonra standart Selectors API’sının oluşturulmasını teşvik eden YUI v3 ve Dojo gibi diğer JavaScript yazılım iskeletlerinin mimarisini etkiledi. Daha sonra bu stil, D3.js yazılım iskeleti olan jQuery mirasçısında daha derin bir algoritma-veri birleşimi ile geliştirilmiştir.

Microsoft ve Nokia, platformlarında jQuery paketini kullanıyor. Microsoft; bunu Microsoft’un ASP.NET AJAX ve ASP.NET MVC yazılım iskeletleri içinde kullanmak için Visual Studio’ya eklerken Nokia bunu Web Run-Time widget’i geliştirme platformuna entegre etti.

Genel Bakış

Örneğin; jQuery dokümandaki belirli bir özelliğe sahip (örneğin; h1 etiketi olan tüm elemanlar) bir elemanı bulmak, özniteliklerinden birini veya daha fazlasını değiştirmek (örneğin; renk, görünürlük) veya bir olaya (rneğin; bir fare tıklaması) yanıt vermek için kullanılabilir.

jQuery ayrıca temel DOM elemanı seçimi ve manipülasyonunun ötesine geçen olay yönetimi için bir paradigma sağlar. Olay ataması ve olay geri çağırma fonksiyonu tanımı, koddaki tek bir konumda tek bir adımda yapılır. jQuery ayrıca diğer çok kullanılan JavaScript fonksiyonlarını da eklemeyi amaçlamaktadır (örneğin; elemanları gizlerken solmalar ve kararmalar, CSS özelliklerini işleyerek animasyonlar).

jQuery ile geliştirme prensipleri şunlardır:

  • JavaScript ve HTML’nin Ayrılması: jQuery kütüphanesi, JavaScript fonksiyonlarını çağırmak için HTML olayı öznitelikleri eklemek yerine JavaScript’e DOM kullanarak olay işleyicileri eklemek için basit söz dizimi sağlar. Bu nedenle geliştiricileri JavaScript kodunu HTML işaretlemesinden tamamen ayırmaya teşvik eder.
  • Kısalık ve netlik: jQuery; “zincirlenebilir” fonksiyonlar ve kısayol fonksiyon adları gibi özelliklerle kısalık ve netliği arttırır.
  • Çapraz tarayıcı uyumsuzluklarının ortadan kaldırılması: Farklı tarayıcıların JavaScript motorları biraz farklı olduğundan bir tarayıcı için çalışan JavaScript kodu başka biri için çalışmayabilir. Diğer JavaScript araç kitleri gibi jQuery de tüm bu tarayıcılar arası tutarsızlıkları ele alır ve farklı tarayıcılarda çalışan tutarlı bir arayüz sağlar.
  • Genişletilebilirlik: Yeni olaylar, elemanlar ve yöntemler kolayca eklenebilir ve daha sonra bir eklenti olarak yeniden kullanılabilir.

Tarihçe

jQuery aslen Ocak 2006’da BarCamp NYC’de John Resig tarafından Dean Edwards’ın önceki cssQuery kütüphanesinden etkilenerek oluşturuldu. Hâlen Timmy Willison liderliğindeki bir geliştirici ekibi tarafından sürdürülmektedir (jQuery seçici motoru olan Sizzle, Richard Gibson tarafından yönetilmektedir).

jQuery; ilk olarak CC BY-SA 2.5 kapsamında lisanslanmıştır ve 2006’da MIT lisansıyla yeniden lisanslanmıştır. 2006’nın sonunda GPL ve MIT lisansları altında çift lisanslıdır. Bu bir karışıklığa neden olduğu için 2012’de GPL düşürüldü ve şimdi yalnızca MIT lisansı altında lisanslandı.

Popülerlik

  • 2015 yılında jQuery ilk 1 milyon web sitesinin %63’ünde (BuiltWith’e göre) ve tüm İnternet sitelerinin %17’sinde kullanıldı.
  • 2017 yılında jQuery ilk 1 milyon web sitesinin %69,2’sinde (Libscore’ye göre) kullanıldı.
  • 2018 yılında jQuery ilk 1 milyon web sitesinin %73’ünde ve tüm web sitelerinin %22.4’ünde (BuiltWith’e göre) kullanıldı.
  • Mayıs 2019 itibarıyla jQuery en popüler 10 milyon web sitesinin %73’ü tarafından kullanıldı (W3Techs’e göre).

Kullanım yüzdesi çok yüksek olsa bile kütüphaneyi React, Angular veya Vue gibi bildirimsel yazılım iskeletleri lehine yeni projelerde kullanmaktan kaçınılmalıdır. Yerel API’ların nasıl kullanılacağını ve gerçekten jQuery’e ihtiyacınız olmadığını gösteren web siteleri bile var. Ayrıca %73 kullanım sürekli azalmakta olan gerçek ilgi ile ilişkili değildir.

Özellikler

jQuery aşağıdaki özellikleri içerir:

  • jQuery projesinin bir parçası olan çoklu tarayıcı açık kaynak seçme motoru Sizzle kullanarak DOM elemanı seçimleri
  • DOM’de düğüm seçmek için kriter olarak elemanların adlarını ve özniteliklerini, örneğin; id ve sınıf gibi kullanan CSS seçicilerini, temel alan DOM manipülasyon
  • Olaylar
  • Efektler ve animasyonlar
  • Ajax
  • Zaman uyumsuz işlemeyi denetlemek için Deferred ve Promise nesneleri
  • JSON ayrıştırma
  • Eklentiler aracılığıyla genişletilebilirlik
  • Özellik algılama gibi yardımcı programlar
  • Modern tarayıcılarda yerel olarak kullanılabilen ancak jQuery.inArray() ve jQuery.each () gibi eski tarayıcılar için geri dönüşlere ihtiyaç duyan uyumluluk yöntemleri.
  • Çapraz tarayıcı desteği.

Tarayıcı Desteği

jQuery 3.0 ve daha üstü, Firefox (ve ESR), Chrome, Safari ve Edge’nin yanı sıra Internet Explorer 9 ve daha yeni sürümlerin “current-1 versiyonlarını” (tarayıcının geçerli sürümünün ve önceki sürümünün anlamıdır) destekler. Cep telefonunda iOS 7 ve daha yenisini ve Android 4.0 ve daha yenisini destekliyor.

Dağıtım

jQuery kütüphanesi; DOM, Events ve Ajax fonksiyonları dâhil olmak üzere tüm arayüzlerini tanımlayan tek bir JavaScript dosyası olarak dağıtılır. Bir Web sayfasına yerel bir kopyaya bağlanarak ya da genel sunuculardan alabileceğiniz birçok kopyadan birine bağlanarak eklenebilir. jQuery, MaxCDN tarafından barındırılan bir içerik dağıtım ağına (CDN [content delivery network]) sahiptir. Google, Google Hosted Libraries hizmetinde ve Microsoft da kütüphaneyi barındırmaktadır.

Kütüphanenin bir kopyasının yerel olarak bağlanması örneği (web sayfasını barındıran aynı sunucudan):

<script src="jquery.js"></script>

Kütüphanenin bir kopyasını jQuery’nin genel CDN’sinden bağlama örneği:

<script
  src="https://code.jquery.com/jquery-3.4.0.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>

Arayüz

Fonksiyonlar

jQuery, iki tür fonksiyon sunar: Statik yardımcı fonksiyonlar ve jQuery nesne yöntemleri. Her birinin kendi kullanım tarzı vardır.

Her ikisine de jQuery’in ana tanımlayıcısı aracılığıyla erişilir: jQuery. Bu tanımlayıcının $ adlı bir diğer adı var. Tüm fonksiyonları bu iki addan biriyle erişilebilir.

jQuery Yöntemleri

jQuery fonksiyonu, bir veya daha fazla DOM düğümünü temsil eden bir jQuery nesnesi oluşturmak için kullanılan bir fabrikadır. jQuery nesneleri bu düğümleri işlemek için yöntemlere sahiptir. Bu yöntemler (bazen komutlar denir), her bir yöntem de bir jQuery nesnesi döndürdüğü için zincirlenebilir.

jQuery’deki çoklu DOM düğümlerine erişim ve manipülasyon tipik olarak $ fonksiyonunu bir CSS seçici string’i ile çağırmakla başlar. Bu, HTML sayfasındaki eşleşen tüm elemanlara başvuran bir jQuery nesnesi döndürür. $("div.test") örneğin; test sınıfının tüm div elemanlarını içeren bir jQuery nesnesi döndürür. Bu düğüm seti, döndürülen jQuery nesnesindeki yöntemler çağrılarak değiştirilebilir.

Statik Yardımcı Yazılımlar

Bunlar yardımcı fonksiyonlardır ve doğrudan bir jQuery nesnesi üzerine etki etmezler. JQuery veya $ tanımlayıcısında statik yöntemler olarak erişilir. Örneğin; $.ajax() statik bir yöntemdir.

Çatışmasız Mod

jQuery, $ adının denetiminden vazgeçen bir $.noConflict() fonksiyonu sağlar. Bu; jQuery, $ sembolünü tanımlayıcı olarak talep eden başka bir kütüphaneyi birbirine bağlayan bir Web sayfasında kullanılıyorsa faydalıdır. Çatışmasız modda geliştiriciler fonksiyonelliklerini kaybetmeden jQuery‘i $ yerine kullanabilir.

Tipik Başlangıç Noktası

Genelde jQuery başlatma kodu ve olay işleme fonksiyonlarını $(handler) olarak koyarak kullanılır. Bu, tarayıcı geçerli Web sayfası için DOM’yi oluşturmayı bitirdiğinde jQuery tarafından tetiklenir.

$(function () {
        // This anonymous function is called when the page has completed loading.
        // Here, one can place code to create jQuery objects, handle events, etc.
});

veya

$(fn); // The function named fn, defined elsewhere, is called when the page has loaded.

Tarihsel olarak $(document).ready(callback) DOM hazır olduktan sonra kod çalıştırmak için fiilî bir deyim olmuştur. Ancak jQuery 3.0’dan bu yana geliştiricilerin bunun yerine daha kısa bir $(handler) imzası kullanmaları teşvik edilir.

Zincirleme

jQuery nesne yöntemleri tipik olarak yöntem zincirlerinin kullanımını sağlayan bir jQuery nesnesi de döndürür:

$('div.test')
  .on('click', handleTestClick)
  .addClass('foo');

Bu satır; test sınıf özniteliğine sahip tüm div elemanlarını bulur, ardından “click” olayı için her bir elemana bir olay işleyicisi kaydeder, ardından foo‘nun sınıf özniteliğini her elemana ekler.

Bazı jQuery nesnesi yöntemleri (durumu değiştirmek yerine) belirli değerleri alır. Bunun bir örneği, bir metin giriş elemanının geçerli değerini döndüren val() yöntemidir. Bu durumlarda $('#user-email').val() gibi bir ifade, dönüş değeri bir jQuery nesnesine referans vermediğinden zincirleme için kullanılamaz.

Yeni DOM Elemanları Oluşturma

jQuery aracılığıyla mevcut DOM düğümlerine erişmenin yanı sıra $() fabrikasına argüman olarak geçen dizi HTML’ye benziyorsa yeni DOM düğümleri oluşturmak da mümkündür. Örneğin; aşağıdaki kod bir HTML select elemanı bulur ve “VAG” ve “Volkswagen” etiketli yeni bir option elemanı oluşturur, bu daha sonra seçim menüsüne eklenir:

$('select#car-brands')
  .append($('<option>')
    .attr({ value: 'VAG' })
    .text('Volkswagen')
  );

Ajax

Uzak verileri yüklemek ve değiştirmek için Ajax isteklerini (çapraz tarayıcı desteğiyle) $.ajax() ile yapmak mümkündür.

$.ajax({
  type: 'POST',
  url: '/process/submit.php',
  data: {
    name : 'John',
    location : 'Boston',
  },
}).then(function(msg) {
  alert('Data Saved: ' + msg);
}).catch(function(xmlHttpRequest, statusText, errorThrown) {
  alert(
    'Your form submission failed.\n\n'
      + 'XML Http Request: ' + JSON.stringify(xmlHttpRequest)
      + ',\nStatus Text: ' + statusText
      + ',\nError Thrown: ' + errorThrown);
});

Bu örnek; name=John ve location=Boston verilerini sunucudaki /process/submit.php dosyasına gönderir. Bu istek tamamlandığında kullanıcıyı uyarmak için başarı fonksiyonu çağrılır. İstek başarısız olursa kullanıcıyı başarısızlığa, isteğin durumuna ve belirli bir hataya karşı uyaracaktır.

Yukarıdaki örnek, yanıt tamamlandığında çalışan geri çağırmaları kaydetmek için .then() ve .catch() yöntemlerini kullanır. Bu söz çağrılarının Ajax isteklerinin zaman uyumsuz olması nedeniyle kullanılması gerekir.

jQuery mimarisi, geliştiricilerin fonksiyonunu genişletmek için eklenti kodu oluşturmalarına izin verir. Web’de Ajax yardımcıları, Web servisleri, veri kılavuzları, dinamik listeler, XML ve XSLT araçları, sürükle ve bırak, olaylar, çerez işleme ve modsal pencereler gibi bir dizi fonksiyonu kapsayan binlerce jQuery eklentisi bulunmaktadır.

jQuery eklentilerinin önemli bir kaynağı, jQuery Project web sitesinin plugins alt alanıdır. Bununla birlikte,bu alt alandaki eklentiler, spam sitesini kaldırmak amacıyla Aralık 2011’de yanlışlıkla silindi. Yeni site, geliştiricilerin eklentilerini yeniden göndermelerini ve yeni gönderim gereksinimlerine uymalarını gerektiren GitHub tarafından barındırılan bir depodur. jQuery; kullanıcıların JavaScript’i anlamalarına ve jQuery eklentilerini geliştirmeye başlamalarına yardımcı olabilecek bir “Learning Center” sunar.

Sürüm Tarihçesi

Versiyon Numarası Yayın Tarihi Son Günceleme Ürün Boyutu (KB) Ek Notlar
1.0 26 Ağustos 2016     İlk Stabil Sürüm
1.1 14 Ocak 2007      
1.2 10 Eylül 2007 1.2.6 54,5  
1.3 14 Ocak 2009 1.3.2 55,9 Sizzle Seçici Motoru çekirdeğe getirildi.
1.4 14 Ocak 2010 1.4.4 76,7  
1.5 31 Ocak 2011 1.5.2 83,9 Ertelenmiş geri çağırma yönetimi, ajax modülü yeniden yazma
1.6 3 Mayıs 2011 1.6.4 89,5 attr() ve val() fonksiyonlarında önemli performans iyileştirmeleri
1.7 3 Kasım 2011 1.7.2 (21 Mart 2012) 92,6 Yeni Olay API’ları: .on() ve .off(), eski API’lar hâlâ desteklenir.
1.8 9 Ağustos 2012 1.8.3 (13 Kasım 2012) 91,4 Sizzle Seçici Motoru; yeniden canlandırılmış, geliştirilmiş animasyonlar ve $(html, props) esnekliği.
1.9 15 Ocak 2013 1.9.1 (4 Şubat 2013) 90,5 Onaylanmamış arayüzlerin kaldırılması ve kod temizleme
1.10 24 Mayıs 2013 1.10.2 (3 Temmuz 2013) 90,9 Hem 1.9 hem de 2.0 beta döngüsünde rapor edilen dâhilî hata düzeltmeleri ve farklar
1.11 24 Ocak 2014 1.11.3 (28 Nisan 2015) 93,7  
1.12 8 Ocak 2016 1.12.4 (20 Mayıs 2016) 94,9  
2.0 18 Nisan 2013 2.0.3 (3 Temmuz 2013) 81,7 Performans iyileştirmeleri ve dosya boyutunda azalma için IE 6-8 desteği bırakıldı.
2.1 24 Ocak 2014 2.1.4 (28 Nisan 2015) 82,4  
2.2 8 Ocak 2016 2.2.4 (20 Mayıs 2016) 83,6  
3.0 9 Haziran 2016 3.0.0 (9 Haziran 2016) 84,3 Ertelenenlere Promises/A+ desteği, $.ajax ve $.when, .data() HTML5 uyumlu
3.1 7 Temmuz 2016 3.1.1 (23 Eylül 2016) 84,7 jQuery.readyException eklendi, hazır işleyici hataları şimdi susturulmadı.
3.2 16 Mart 2017 3.2.1 (20 Mart 2017) 84,6 <template> elemanlarının içeriğinin alınması ve çeşitli eski yöntemlerin kullanımdan kaldırılması için destek eklendi.
3.3 19 Ocak 2018 3.3.1 (20 Ocak 2018) 84,9 Eski fonksiyonların kullanımdan kaldırılması, sınıfları kabul eden fonksiyonlar artık bunları dizi formatında da destekliyor.
3.4 10 Nisan 2019 3.4.1 (1 Mayıs 2019) 86,1 Performans iyileştirmeleri, nonce ve nomodule desteği, radio elemanları için düzeltmeler, küçük bir güvenlik düzeltmesi

Yazılım İskeleti Test Etme

QUnit, jQuery projesini test etmek için kullanılan bir test otomasyonu yazılım iskeletidir. JQuery ekibi onu bir kurum içi test kütüphanesi olarak geliştirdi. jQuery ekibi kodunu ve eklentilerini test etmek için kullanır ancak sunucu tarafı JavaScript kodu da dâhil olmak üzere genel JavaScript kodlarını test edebilir.

2011 itibarıyla jQuery Testing Team her jQuery kod temeli sürümünü test etmek için TestSwarm ile QUnit kullanıyor.

Ayrıca Bakınız

Free and open-source software portal

References

  • This work, “JavaScript Kütüphanesi jQuery Nedir?”, is a derivative of “jQuery” by Wikiwand, used under CC BY-SA. “JavaScript Kütüphanesi jQuery Nedir?” is licensed under CC BY-SA by The FLOSS Information.