jQuery popüler bir
JavaScript kütüphanesidir. 2006 yılında,
John Resig tarafından geliştiricilerin web sitelerde
JavaScript kullanımını kolaylaştırma amacıyla yaratılmıştır. Ayrı bir program dili değildir ve
JavaScript ile birlikte çalışır.
Özellikle de birçok
string olduğu durumlarda kod yazmak yorucu hale gelebilir.
jQuery çoklu kod satırlarını tek bir koda sıkıştırır, böylece tek bir göreve ulaşmak için bloklarca kodu yeniden yazmak zorunda kalmazsınız.
Bu makalede jQuery’nin web geliştirme ortamında nasıl kullanılacağını, faydaları ve temel özelliklerini açıklayacağız. Ayrıca, nasıl çalıştığını anlamanıza yardımcı olmak için jQuery’nin kullanıldığını gösteren kısa eğitimlerin bir listesini de sağlayacağız.
jQuery ile çok daha fazlasını çok daha azıyla yapabileceksiniz. jQuery nedir ve nasıl çalışır, bu makalede iyice öğreneceksiniz.
------------------------------------------------------
------------------------------------------------------
jQuery’nin Avantajları
jQuery kütüphanesinin temel özelliklerinden biri olay işlemedir. Fare tıklama işlevi ve form gönderme gibi etkinlikler oluşturmak yalnızca birkaç satır kod gerektirir. Bu,
HTML kodunun temiz ve çeşitli olay işleyicilerinden uzak tutulmasına yardımcı olur.
Belge Nesne Modeli (DOM) işleme özelliği ile
HTML öğelerini değiştirmek de daha kolaydır. Kullanıcı dostu web tarayıcı arayüzü, çeşitli olay yöntemlerini kullanarak web öğeleri eklemenize, düzenlemenize ve silmenize olanak tanır.
Özellikle
AJAX yöntemi,
jQuery’yi AJAX işlevlerini kullanarak duyarlı bir web sitesi geliştirmek için ideal hale getirir. Bu özellik, web sayfasını yeniden yüklemeden
HTTP istek işlemlerini basitleştirerek kullanıcı deneyimini geliştirir.
Dahası
jQuery birçok yerleşik animasyon efekti sunar. Seçtiğiniz
CSS özelliklerinden oluşan özel animasyonlar oluşturmanıza bile izin verir.
Ayrıca
jQuery, popüler web tarayıcılarıyla uyumlu hale getiren çapraz tarayıcı desteğiyle birlikte gelir.
CSS3 seçicileri ve
XML Path Language (
XPath) sözdizimi ile de çalışır.
Bir web sitesine jQuery komut dosyaları eklemenin bir içerik dağıtım ağı (
CDN) aracılığıyla daha kolay olduğunu unutmayın. Bu sayede kütüphane dosyasını indirip sitenin klasöründe saklamanız gerekmez.
Avantajları bakımından
jQuery nedir açıkladık. Şimdi de sıra jQuery’nin dezavantajlarında.
jQuery’nin Dezavantajları
Hafif olmasına rağmen,
jQuery’nin kütüphanesi çok büyüktür. Kod tabanı büyümeye devam ettikçe, kullanıcının bilgisayarına ek bir yük getiren
JS dosyasının açılması daha uzun sürer.
jQuery, soyutlaması nedeniyle JavaScript’i öğrenmeyi ve kullanmayı da zorlaştırır. Yeni başlayanlar için etkinlik oluşturmayı basitleştirirken, DOM manipülasyonu gibi karmaşık görevleri yapmak, istenen sonucu elde etmek için JavaScript’in daha iyi anlaşılmasını gerektirir.
En büyük dezavantajı, jQuery’nin geriye dönük uyumluluğa izin vermemesidir. jQuery’nin çok sayıda yayınlanmış sürümü olduğundan, kütüphaneyi kendiniz barındırmanız ve periyodik olarak güncellemeniz gerekir.
Önemli jQuery Özellikleri
jQuery’nin çok başarılı ve popüler olmasını sağlayan özelliklerden biri muhtemelen çapraz platform konusunda yetenekli olmasıdır. Otomatik olarak hataları düzeltir,
Chrome, Firefox, Safari, MS Edge, IE, Android ve iOS gibi en çok kullanılan tarayıcılarda aynı şekilde çalışır.
jQuery nedir açıkladıktan sonra biraz da özelliklerinden, hünerlerinden bahsetmeli elbette.
jQuery, Ajax’ın da işini oldukça kolaylaştırır. Ajax kodun geri kalan kısmından eşzamansız olarak çalışır. Yani, Ajax sunucuyla iletişime geçebilir ve içeriklerini sayfayı yenilemeye ihtiyaç duymadan güncelleyebilir.
Ancak bu da birkaç sorun doğurur. Farklı tarayıcılar
Ajax API’ını (
Uygulama Programlama Arayüzü) farklı şekilde çalıştırır. Kod bütün tarayıcılara uygun olmalıdır. Bunu elle yapmak zordur ve çok zaman gerekir ama Ajax bütün lüzumsuz işleri yapar ve kodu bütün tarayıcılara uyarlar.
Ayrıca
DOM ([Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]) (İng.) manipülasyonu da bulunmaktadır. Nasıl kullanılacağına dair birçok method vardır. Basitçe, bir
HTML sayfasında
DOM elementlerini eklemenize ve/veya silmenize, bununla birlikte satırları da kolayca halletmenize olanak sağlar.
jQuery ile animasyon yaratmak da basittir. Tıpkı yukarıdaki kod parçacığında olduğu gibi, birkaç satırla yapılabilmiştir. Tek yapmanız gereken değişkenleri eklemektir.
HTML dökümanları üzerinde geçiş, bununla birlikte efekt yapmak ve olay yönetimi de jQuery ile daha pratik bir biçimde yapılabilmektedir.
jQuery nedir daha iyi anlamanız için işlevlere yakından bakalım.
------------------------------------------------------
1. JQuery hide() İşlevi
hide() işlevi,
HTML öğelerini gizleyerek artık
HTML sayfasını etkilememelerini sağlar. Süre ve hareket hızı parametrelerinin yanı sıra geri arama işleviyle eşleştirilirse bir animasyon yöntemi olarak hizmet eder.
------------------------------------------------------
2. JQuery show() İşlevi
show() işlevi
HTML öğelerini görüntüler. Yalnızca
hide() işlevi tarafından gizlenen öğeler üzerinde çalışır. Ek olarak, bir parametre verildiğinde, tıpkı
hide() gibi bir animasyon yöntemi işlevi haline gelir.
------------------------------------------------------
3. JQuery toggle() İşlevi
toggle() işlevi, bir tıklama kullanarak
HTML öğelerinin görünürlüğünü
CSS görüntüleme özelliklerine göre değiştirir. Bir eleman görünüyorsa, bu fonksiyon onu gizleyecektir. Gizliyse de tam tersi olur. Web geliştiricileri genellikle bu işlevi birkaç animasyonu bir diziye dönüştürmek için kullanır.
Bir parametre verilirse, bu işlev iki veya daha fazla işlevi belirli öğelere bağlayabilir. Öğeye tıklayarak işlevler arasında geçiş yapmanızı sağlar. Bu işlev imzasının
jQuery 1.8 sürümünde kullanımdan kaldırıldığını ve 1.9 sürümünde kaldırıldığını unutmayın.
------------------------------------------------------
4. JQuery fadeIn() İşlevi
fadeIn() işlevi,
HTML sayfasında kademeli olarak görünmelerini sağlamak için
HTML öğelerinin opaklığını değiştirir. Animasyonun hızını ayarlamak ve eşleşen öğeler tam olarak göründüğünde sonraki olayı tetiklemek için hız veya geri arama işleviyle eşleştirin.
------------------------------------------------------
5. JQuery fadeOut() İşlevi
Bu jQuery işlevi,
fadeIn() işlevinin tersi olarak çalışır.
hide() ve
show()‘a benzer şekilde,
fadeIn() ve
fadeOut(), bir parametre verildiğinde animasyon yöntemleri haline gelir.
------------------------------------------------------
6. JQuery fadeToggle() İşlevi
fadeToggle() işlevi,
toggle() işlevine benzer şekilde çalışır. Bir kullanıcının belirli öğeleri kademeli olarak görüntülemesini veya gizlemesini sağlar.
------------------------------------------------------
7. JQuery slideUp() İşlevi
slideUp() işlevi, öğeleri kayan bir animasyonla gizler. Animasyonun süresini ayarlamak için süre ve hareket hızı parametreleriyle eşleştirin.
------------------------------------------------------
8. JQuery slideDown() İşlevi
slideDown() işlevi, öğeleri kayan bir animasyonla görüntüler. Benzer şekilde, süre ve hareket hızı parametrelerini kabul eder.
------------------------------------------------------
9. JQuery slideToggle() İşlevi
slideToggle() işlevi, öğeleri görüntülemek veya gizlemek için
slideUp() ve
slideDown() işlevleri arasında geçiş yapmanızı sağlar.
------------------------------------------------------
10. JQuery animate() İşlevi
Bu işlev, bir veya daha fazla
CSS özelliği kullanarak öğeleri canlandırır. Önceki işlevler gibi, animasyonun süresini ve geçiş modunu ayarlamanıza ve tamamlandıktan sonra aşağıdaki işlevi tetiklemenize olanak tanır.
animate() işlevinin,
slideDown() ve
fadeIn() gibi gizli öğeleri görüntüleyemediğini unutmayın.
------------------------------------------------------
jQuery Örnekleri
JQuery nedir daha iyi anlamanız için birkaç örneğimiz mevcut. Sadece birkaç satır kodla kayma efektleri yaratabilirsiniz.
PHP- Kodu
$("#flip").click(function(){
$("#panel").slideDown();
});
jQuery ile ayrıca
HTML elementlerini de
Hide() and
Show() komutlarıyla işte böyle saklayabilirsiniz.
PHP- Kodu
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
Ve bir animasyon örneği:
PHP- Kodu
$("button").click(function(){
$("div").animate({
left: '250px',
height: '+=150px',
width: '+=150px'
});
});
CSS manipülasyonu yapmak için bir kod parçacığı:
PHP- Kodu
$("button").click(function(){
$("h1, h2, p").toggleClass("blue");
});
Sonuç olarak, eğer
JavaScript kullanıyorsanız
jQuery neredeyse kaçınılmazdır çünkü birçok avantaja sahip olmakla beraber tek kötü yanı nasıl kullanılacağını öğrenmektir. Umuyoruz ki bu makalemizde “
jQuery nedir” sorunuza yanıt vermiş ve size yardımcı olmuşuzdur.
Kaynak :
[Üye Olmadan Linkleri Göremezsiniz. Üye Olmak için TIKLAYIN...]