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.

jQuery ile ayrıca HTML elementlerini de Hide() and Show() komutlarıyla işte böyle saklayabilirsiniz.

Ve bir animasyon örneği:

CSS manipülasyonu yapmak için bir kod parçacığı:

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...]