jQuery Nedir, Ne İşe Yarar ve Nasıl Kullanılır?

jQuery, JavaScript ile web uygulamaları geliştirme süreçlerini kolaylaştırmak amacıyla oluşturulmuş, açık kaynak kodlu bir JavaScript kütüphanesidir. DOM (Document Object Model) işlemleri, olay yönetimi, animasyonlar, AJAX istekleri ve dinamik içerik güncellemeleri gibi işlemleri daha az kodla gerçekleştirmeye olanak tanır. Farklı tarayıcıların çalışma biçimlerinden kaynaklanan uyumluluk sorunlarını azaltmayı hedefleyen jQuery, özellikle mevcut web projelerinin bakım ve geliştirme süreçlerinde kullanılmaktadır.

John Resig tarafından geliştirilen jQuery, ilk kez 2006 yılında yayımlanmıştır. Sade söz dizimi, geniş eklenti ekosistemi ve uzun yıllara dayanan kullanım geçmişi sayesinde web geliştirme alanında yaygın olarak benimsenmiştir.

jQuery Ne İşe Yarar?

jQuery, JavaScript ile gerçekleştirilebilen birçok işlemin daha kısa ve okunabilir kodlarla uygulanmasını sağlar. Özellikle kullanıcı etkileşimlerinin yönetilmesi ve web sayfasındaki HTML öğelerinin dinamik olarak değiştirilmesi için kullanılır.
 

DOM Manipülasyonu: HTML öğelerini seçme, ekleme, silme, değiştirme ve güncelleme işlemlerini gerçekleştirir.
Olay Yönetimi: Tıklama, klavye, fare, form ve diğer kullanıcı etkileşimlerini yönetir.
Animasyon ve Efektler: Sayfa öğelerinin görünürlük, konum ve boyut gibi özelliklerini animasyonlarla değiştirebilir.
AJAX İşlemleri: Sayfanın tamamını yenilemeden sunucuyla veri alışverişi yapılmasını sağlar.
Form Yönetimi: Form alanlarının kontrol edilmesine ve kullanıcı girişlerinin işlenmesine yardımcı olur.
Dinamik İçerik: Kullanıcı etkileşimlerine veya sunucudan gelen verilere göre sayfa içeriğini günceller.

jQuery Nasıl Çalışır?

jQuery, JavaScript üzerine kurulu bir kütüphanedir ve tarayıcı ortamında çalışır. Temel kullanım yapısı, $() fonksiyonu üzerinden HTML öğelerinin seçilmesine ve bu öğelere çeşitli işlemler uygulanmasına dayanır.

Örneğin, bir HTML öğesini seçmek, içeriğini değiştirmek veya bir kullanıcı etkileşimine yanıt vermek için jQuery metotları kullanılabilir. jQuery kodları genellikle DOM yüklendikten sonra çalıştırılır.
 

Temel jQuery Kullanım Örneği

$(document).ready(function() {
    $("#gizle").on("click", function() {
        $("#icerik").hide();
    });
});

Bu örnekte, sayfa yüklendikten sonra gizle kimliğine sahip HTML öğesine tıklanması dinlenir. Tıklama gerçekleştiğinde icerik kimliğine sahip öğe gizlenir.

jQuery ile HTML İçeriğini Değiştirme

$(document).ready(function() {
    $("#degistir").on("click", function() {
        $("#icerik").text("Yeni içerik");
    });
});

Bu kod, ilgili butona tıklandığında seçilen HTML öğesinin metin içeriğini günceller.

jQuery Nasıl Kurulur?

jQuery kullanabilmek için kütüphanenin web projesine dahil edilmesi gerekir. Projenin yapısına ve dağıtım yöntemine bağlı olarak CDN, yerel dosya veya npm paketi tercih edilebilir.

1. CDN Üzerinden jQuery Kullanımı

CDN (Content Delivery Network) üzerinden jQuery kullanmak için kütüphanenin bağlantısı HTML belgesine eklenir. Bu yöntem, dosyanın ayrıca proje sunucusunda barındırılmasını gerektirmez.

<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>

Üretim ortamında kullanılacak sürümün resmi jQuery dağıtım sayfasından kontrol edilmesi ve proje gereksinimlerine uygun sürümün seçilmesi önerilir.

2. Yerel Dosya Üzerinden jQuery Kullanımı

jQuery dosyası resmi web sitesinden indirilerek proje dizinine eklenebilir. Ardından HTML belgesinde dosyanın yolu belirtilir.

<script src="js/jquery-4.0.0.min.js"></script>

3. npm Üzerinden jQuery Kurulumu

Node.js tabanlı projelerde jQuery, npm paket yöneticisi aracılığıyla yüklenebilir.

npm install jquery

Kurulumdan sonra jQuery, projenin modül yapısına uygun şekilde içe aktarılabilir.

import $ from "jquery";

jQuery 4.0.0 Yenilikleri

jQuery 4.0.0, kütüphanenin modern web geliştirme gereksinimlerine uyarlanmasını amaçlayan önemli bir ana sürüm güncellemesidir. Bu sürümde eski tarayıcılarla uyumluluk sağlayan bazı kodlar ve geçmişten gelen API davranışları kaldırılmış, modern JavaScript kullanımına yönelik iyileştirmeler yapılmıştır.
 

Eski Tarayıcı Desteği: Artık desteklenmeyen eski tarayıcılar için kullanılan uyumluluk kodları kaldırılmıştır. Güncelleme öncesinde projenin tarayıcı gereksinimleri kontrol edilmelidir.
API Güncellemeleri: Kullanımdan kaldırılmış veya eski davranışlara sahip bazı API bileşenleri temizlenmiştir.
Modern JavaScript: Kütüphanenin güncel JavaScript standartlarıyla uyumluluğu geliştirilmiştir.
Güvenlik ve Bakım: Eski kod yapılarının azaltılmasıyla kütüphanenin sürdürülebilirliği ve bakım süreçleri iyileştirilmiştir.
Geçiş Süreci: Önceki jQuery sürümlerinden geçiş yapacak projelerin resmi yükseltme kılavuzunu incelemesi önerilir. 

jQuery 4.0.0 sürümüne geçmeden önce kullanılan eklentilerin, özel JavaScript kodlarının ve tarayıcı desteği gereksinimlerinin test edilmesi gerekir.

jQuery Kullanmanın Avantajları
 

Basit Söz Dizimi: Yaygın JavaScript işlemlerinin daha kısa ve okunabilir kodlarla uygulanmasını sağlar.
DOM Yönetimi: HTML öğelerinin seçilmesini ve değiştirilmesini kolaylaştırır.
Olay Yönetimi: Kullanıcı etkileşimlerinin merkezi ve düzenli biçimde yönetilmesine yardımcı olur.
AJAX Desteği: Sayfa yenilemeden sunucu istekleri gerçekleştirilmesini sağlar.
Eklenti Ekosistemi: Form, arayüz, animasyon ve farklı işlevler için geliştirilmiş çok sayıda eklenti bulunur.
Mevcut Projelerle Uyumluluk: Uzun süredir kullanılan web projelerinde bakım ve geliştirme süreçlerini destekler.

jQuery Kullanmanın Dezavantajları

Ek Kütüphane Bağımlılığı: Projeye ayrıca bir JavaScript dosyası eklenmesini gerektirir.
Performans: Basit işlemlerde modern JavaScript yöntemlerine kıyasla gereksiz bir soyutlama katmanı oluşturabilir.
Eski Kod Yapıları: Uzun süredir güncellenmeyen projelerde eski jQuery sürümleri ve eklentiler bakım zorluğu oluşturabilir.
Modern Tarayıcı API'leri: Güncel JavaScript özellikleri, jQuery'nin bazı işlevlerini ek kütüphane kullanmadan gerçekleştirebilir.

jQuery ile JavaScript Arasındaki Fark Nedir?

JavaScript, web tarayıcılarında çalışan temel programlama dilidir. jQuery ise JavaScript kullanılarak geliştirilmiş bir kütüphanedir. Dolayısıyla jQuery, JavaScript'in alternatifi değildir; JavaScript ile yapılan belirli işlemleri kolaylaştıran yardımcı bir araçtır.

Modern tarayıcılar DOM manipülasyonu, olay yönetimi ve ağ istekleri için yerleşik JavaScript API'leri sunmaktadır. Bu nedenle yeni projelerde jQuery kullanımı, projenin teknik gereksinimleri ve mevcut yazılım mimarisi değerlendirilerek belirlenmelidir.

jQuery Kullanırken Dikkat Edilmesi Gerekenler
 

✓ Projede kullanılan jQuery sürümü güncel güvenlik ve uyumluluk gereksinimlerine göre seçilmelidir.
✓ Harici kaynaklardan yüklenen kütüphanelerin güvenilir ve resmi dağıtım adreslerinden alınmasına dikkat edilmelidir.
✓ Kullanıcıdan alınan veriler doğrudan HTML içerisine eklenmemeli; XSS gibi güvenlik açıklarına karşı uygun veri işleme yöntemleri kullanılmalıdır.
✓ Gereksiz DOM seçimlerinden ve tekrarlanan işlemlerden kaçınılmalıdır.
✓ Üçüncü taraf jQuery eklentilerinin güncelliği, güvenliği ve sürüm uyumluluğu kontrol edilmelidir.
✓ Eski jQuery sürümlerinden yeni ana sürümlere geçişte resmi yükseltme dokümantasyonu izlenmelidir.

Sıkça Sorulan Sorular