JQuery Kılavuzu

JQuery bir Javascript kütüphanesidir. Hem öğrenmesi kolaydır hemde Javascript programlamasını büyük ölçüde basitleştirmektedir.


<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>

<p>Buraya tıkladığınızda, bu paragraf gizlenecektir.</p>
<p>Buraya tıklarsanız, bu paragrafta gizlenecektir!</p>
<p>Bu paragrafta!</p>

</body>
</html>

Yukarıda bir JQuery kod örneği görüyorsunuz. Kodu inceleyelim. JQuery komutlarını kullanabilmek için öncelikle, ilgili script dosyasını HTML sayfamıza dahil etmemiz gerekmektedir.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

İlgili javascript dosyasını kendi web sitenize yükleyerek, kendi sitenizden de yükleyebilirsiniz. Bu örnekte CDN yöntemi ile dosya HTML dosyamıza dahil edilmiştir. CDN açılımı, Content Delivery Network demektir. Türkçe anlamı ise, İçerik Dağıtım Ağı’dır. Bu örnek JQuery kodunda, gerekli javascript dosyası googleapis.com üzerinden alınmaktadır. JQuery kullanabilmek için, ilgili javascript kütüphanesinin HTML dosyamıza dahil edilmesi gerekmektedir.

JQuery bir javascript kütüphanesidir ve nesneye dayalı programcılık tekniğini kullanır. Yukarıdaki örnekte, $(document) nesnesi seçilmekte ve bu nesne içindeki ready() fonksiyonu çalıştırılmaktadır. Bu kod sayesinde, doküman hazır olduktan sonra, yani yüklendikten sonra, ilgili kodlar çalışmaya devam edecektir. $(“p”) komutu ile, HTML ile içindeki, tüm paragraflar seçilmekte, söz konusu öğeye ait Click() fonksiyonu yani p öğesine tıklama yapılıp yapılmadığı kontrol edilmekte, eğer p yani paragraf öğesine tıklama yapılmış ise, $(this).hide(); komutu ile, paragraf gizlenmektedir.

Bu jQuery kılavuzunda, tüm jquery seçicileri, yöntemleri, özellikleri ve olayları hakkında bilgi vereceğiz. JQuery’nin amacı, web sitenizde JavaScript’i kullanmayı çok daha kolaylaştırmaktır.

jQuery, birçok satır JavaScript kodu gerektiren birçok ortak görevi yerine getirir ve bunları tek bir kod satırıyla çağırabileceğiniz yöntemler ile yapar. jQuery ayrıca, JavaScript’ten AJAX çağrıları ve DOM manipülasyonu gibi karmaşık şeylerin çoğunu da basitleştirir.

JQuery kütüphanesi aşağıdaki özellikleri içerir.

  • HTML / DOM manipülasyonu
  • CSS manipülasyonu
  • HTML olay yöntemleri
  • Etkiler ve animasyonlar
  • AJAX
  • Araçlar
  • Ek olarak, jQuery, neredeyse tüm görevler için eklentilere sahiptir.

Birçok JavaScript Yazılım İskeleti (Framework) bulunmaktadır. Yazılım İsketleri; standart fonksiyonların hazır olarak sunulduğu ancak programcı tarafından bu fonksiyonlardan arzu edilen kısımların ek kodlarla istenildiği şekilde güncellenebildiği sistemlerdir. Ancak jQuery en popüler ve en genişletilebilir olması nedeniyle, Web’deki en büyük şirketlerin çoğu, aşağıdaki gibi jQuery kullanıyor.

  • Google
  • Microsoft
  • IBM
  • Netflix

JQuery tüm tarayıcılarda çalışıyor mu? diye merak ediyor olabilirsiniz. JQuery ekibi tarayıcılar arası sorunları bilmektedir ve bu bilgiyi jQuery kütüphanesine yazmışlardır. jQuery tüm büyük tarayıcılarda aynı şekilde çalışacaktır.

JQuery Web Sayfasına Nasıl Eklenir?

Web sitenizde jQuery kullanmaya başlamanın birkaç yolu vardır.

  • JQuery kütüphanesini jQuery.com adresinden indirebilirsiniz.
  • Google gibi bir CDN’den jQuery ekleyebilirsiniz.

jQuery Dosyası İndirme

İndirmek için iki jQuery sürümü mevcuttur.

Üretim sürümü : Bu küçültülmüş ve sıkıştırılmış versiyonudur.
Geliştirme sürümü : Bu sürüm test ve geliştirme içindir. Sıkıştırılmamış ve okunabilir kod.

Her iki sürüm de jQuery.com adresinden indirilebilir.

JQuery kütüphanesi tek bir JavaScript dosyasıdır ve HTML <script> etiketiyle başvuruda bulunuyorsunuz <script> etiketinin <head> bölümünün içinde olması gerektiğine dikkat etmelisiniz.

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

JQuery’i kendiniz indirmek ve barındırmak istemiyorsanız, bir CDN’den (İçerik Dağıtım Ağı) kullanarak, web sitenize ekleyebilirsiniz. Hem Google hem de Microsoft’un jQuery sunucusu bulunmaktadır. JQuery’i Google’dan veya Microsoft’tan kullanmak için aşağıdakilerden birini kullanabilirsiniz.


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>

Barındırılan jQuery’yi Google veya Microsoft’tan

kullanmanın avantajı nedir?

Birçok kullanıcı başka bir siteyi ziyaret ederken Google veya Microsoft’tan jQuery’i indirmiş olabilir. Sonuç olarak, sitenizi ziyaret ettiklerinde önbellekten yüklenir ve bu da daha hızlı yükleme süresi sağlar. Ayrıca, çoğu CDN, bir kullanıcı ondan bir dosya istediğinde, kendisine en yakın sunucudan sunulmasını ve böylece daha hızlı yükleme süresi olmasını sağlamaktadır.

Bu JQuery Kılavuzu ile, JQuery yapısını, yöntemleri ve olaylarını detaylı bir şekilde inceleyecek ve JQuery öğreneceğiz.