jQuery Nedir ?

jQuery, çapraz platform geliştirilmesi ve açık kaynak kodlu olması sebebiyle geliştiriciler tarafından sıklıkla kullanılan bir JavaScript kütüphanesidir. “Az kodla, çok iş” mantığına dayanan jQuery, zor bir dil olarak kabul edilen JavaScript’i kodlamayı kolaylaştırmayı hedefler.

jQuery’nin temel amacı; çok uzun ve karmaşık kodları kısaltmak ve böylece kod tekrarına düşmekten bizi kurtarmaktır. jQuery’nin ücretsiz ve açık kaynaklı olması onun bu kadar popüler olmasını sağlamıştır ve kullanımı giderek artmaktadır.

jQuery Ne İşe Yarar?

• Animasyonlar, Ajax uygulamalar, görüntü efektleri ya da kullanıcı arayüzleri gibi birçok işlem jQuery kullanarak kolayca yapılabilir.
• Syntax dokümanları jQuery ile yönetilebilir.
• DOM (Document Object Model) uygulamalarını oluşturmayı basitleştirir. DOM, HTML sayfalarımızda açtığımız etiketlerin (h1, button, input vs.) nesne olarak modellenmesi ve bunlara erişim sağlamamızdır.
• JavaScript’in kullanımını kolay hale getirerek internet siteleri üzerinde kolayca işlem yapabilmeyi sağlar.
• Az kod kullanarak çok güçlü JavaScript uygulamaları oluşturulabilir.
• Eklenti oluşturabilme özelliği ile geliştiricilerin şekillendirebilir Widget’lar ortaya çıkarmasını sağlayabilir.
• SEO açısından da avantajlar sağlar.

jQuery ile Neler Yapılır ?

jQuery çok çeşitli alanlarda kullanılabilir. jQuery’nin web sitelerinin tasarım ve geliştirme süreçlerinde karmaşık kodlar yerine daha az karakterle yazılmış, güçlü JavaScript uygulamaları oluşturduğu söylenebilir. jQuery ile neler yapılabilir sorusunun cevaplarından bazıları şunlardır: 

• DOM Kurgulama İşlemleri: Sadece birkaç satır kod kullanarak web sayfalarına kolayca içerik eklenebilir, var olan içerikler güncellenebilir ya da kaldırılabilir.
• Açılır Menüler: jQuery ile açılabilir menüler oluşturulabilir. 
• XML İstekleri: Web sitesinde sayfanın yeniden yüklenmesini beklemeden, sunucudan ek veri istemek için jQuery’den yararlanılır. 
• Animasyonlu Efektler: jQuery kullanılarak web sayfalarındaki ögelere animasyonlar ve efektler eklenebilir. 
• Elementlerin Özelliklerini Değiştirme: jQuery ile web sayfasındaki HTML, CSS gibi elementlerin özellikleri istenilen şekilde kolayca değiştirilebilir.
• Etkileşimli Nesneler: jQuery kullanarak kullanıcıların web sayfasında fare ya da klavye ile yönetebileceği etkileşimli nesneler yapılabilir.

Ayrıca jQuery ile animasyonlu slayt gösterileri, lightboxlar, sadece sürükleyip bırakarak yeniden konumlandırılabilen sayfalar ve AJAX metin alanları oluşturabilir.

jQuery kullanmak isteyen birinin HTML, CSS ve JavaScript dilleri hakkında en azından temel düzeyde bilgiye sahip olması gerekir.

jQuery’de Nesne Seçme Nasıl Yapılır?

• jQuery Belirtme : jQuery’de “$” işareti kullanılarak jQuery’nin kullanılacağı belirlenir.
• HTML Element Seçimi : “$” işaretinden hemen sonra parantez içinde class veya id ismi tırnak içinde (“”) yazılır. Burada dikkat edilmesi gereken nokta eğer id ise başta “#” kullanılarak element seçilir ama class kullanılıyorsa başta “.” kullanılarak element seçilir. Ayrıca eğer belirli bir id’ye veya class’a ait bir nesneyi değil de bütün tag’i seçmek istiyorsak direkt olarak tag’i yazıyoruz.
  Örneğin; $("#idButton"), $(".classButton"), $("#submitButton"),$(".submitButton"), $("p"), $("a")
  
• Ayırıcı : Element seçiminden sonra ayırmak için araya bir “.” konur.
• Eylem : jQuery kullanırken eylemleri ayırıcıdan hemen sonra kullanırız. Bu eylemlere örnek olarak şunları verebiliriz;
  click(), hide(), show(), focus() vs.
  
• Son şekilde kodumuz bu şekilde olacaktır.
  $("#idButton").show();
$(".classButton").focus();
$(".submitButton").hide();
$("#submitButton").click(function(){
//Kodlar
});

jQuery Nasıl İndirilir?

jQuery kullanımı için iki yöntem bulunmaktadır. 

Birinci yöntemde jQuery web sayfasından hazır kütüphane indirilir. Buradaki jQuery dosya uzantısı ‘.js’dir. Sıkıştırılmış ve sıkıştırılmamış “.js” dosyalarını indirip kodlarda değişiklik yapılabilir.

İkinci yöntemde ise jQuery kütüphanesini bilgisayara indirmeden direkt olarak jQuery CDN (Content Delivery Network) ile kullanmaktır. 

jQuery’nin Avantajları

• Açık kaynak kodlu: jQuery açık kaynak kodlu ve ücretsiz bir kütüphanedir. Yüzlerce farklı eklenti geliştirme imkanı ve bu eklentilere kolaylıkla erişim sağlar. 
• Öğrenmesi kolay: jQuery’nin basit ve kolay bir yapısı bulunmakta. Çok sayıda eğitim kaynağı sağlar. 
• Uyumluluk Desteği: jQuery; Firefox, Safari ve Chromium tabanlı tarayıcılar (Chrome, Chromium, Edge, Opera vs.) gibi hemen hemen bütün web tarayıcıları ile uyumlu olarak çalışır. Bu özelliği onun çok tercih edilen bir JavaScript kütüphanesi olmasını sağlamıştır. 
• Zincirlenebilir: jQuery’nin Sihri (The Magic of jQuery) olarak adlandırılan bir özellik sayesinde jQuery’de yer alan metotlar birbiri ardına yazılıp, zincirlenerek işlem yapılabilir. Böylece birden fazla işlem tek bir satırda toplanabilir.

Örnek;

jQuery kullanılırsa;

$("p").hide(); = Tüm "p" elementlerini gizler.

$(".test").hide(); = Class'ı "test" olanı gizler.

$("#test").hide(); = Id'si "test" olanı gizler.

$("#test").css('background-color','#fff'); = Id'si "test" olan nesnenin arka planını #FFF yani beyaz renkli yapar.

$("#submitButton").click(function(){
     alert("Beni Tıkladın");
}); = Elimizde "submitButton" id'li bir button olduğunu varsayalım. Bu kodla beraber ekranda "Beni tıkladın" yazsın.

JavaScript kullanılırsa;

document.getElementsByTagName("p").style.display = "none"; = Tüm "p" elementlerini gizler.

document.getElementsByClassName("test").style.display = "none"; = Class'ı "test" olanı gizler.

document.getElementsById("test").style.display = "none";  = Id'si "test" olanı gizler.

document.getElementById("test").style.backgroundColor="#fff"; = Id'si "test" olan nesnenin arka planını #FFF yani beyaz renkli yapar.

document.getElementById("submitButton").addEventListener('click', function(){
    alert("Beni Tıkladın");
}); = Elimizde "submitButton" id'li bir button olduğunu varsayalım. Bu kodla beraber ekranda "Beni tıkladın" yazsın.