jQuery Nedir? jQuery Ne İşe Yarar? jQuery Kullanımı

Bu yazımda jQuery nedir? jQuery ne işe yarar? jQuery nasıl kullanılır? Neden jQuery öğrenmeliyim? jQuery kodlarını hangi editörde yazmalıyım? sorularına cevap verdikten sonra en temel seviyeden başlayıp ileri seviyeye kadar tüm jQuery konularını anlatmaya başlayacağım.

jQuery ile ilgili genel bilgileri verdikten sonra, detaylı bir şekilde tüm jQuery konularını da göreceğiz. Diğer tüm jQuery dersleri için A’DAN Z’YE JQUERY DERSLERİ yazımı inceleyebilirsiniz.

Konuyu daha fazla uzatmadan jQuery Nedir? Ne İşe Yarar? ile başlayalım.

jQuery hızlı, küçük boyutlu ve zengin içeriğe sahip bir JavaScript kütüphanesidir.

 ⇒  jQuery bir framework değildir.

Yani JavaScript ile yapılan işleri jQuery kullanarak daha hızlı ve daha az kod ile yapabiliriz. Zaten sloganları write less, do more yani az kodla çok iş. Gerçekten çok hızlı bir şekilde öğrenip uygulamaya başlayabilirsiniz.

Daha anlaşılır olması için bir Html öğesine önce JavaScript kodları yazarak daha sonra ise jQuery kodları yazarak Css özellikleri verelim.

JavaScript Kodları ile

jQuery Kodları ile

Gördüğünüz gibi JavaScript ile üç satırda yazdığımız kodları jQuery kullanarak tek satırda ve daha kısa bir şekilde yazabiliyoruz.

Peki JavaScript bilmeden jQuery öğrenebilir miyiz?

Evet öğrenebilir ve kullanabiliriz. Fakat JavaScript bilen biri jQuery kullanırken bize sağlamış olduğu kolaylıkları çok daha iyi anlayacaktır ve jQuery’i daha efektif bir şekilde kullanacaktır.

Neden jQuery Öğrenmeliyim?

Eğer bir web geliştiricisi olmak istiyorsanız öğrenmeniz gereken olmazsa olmaz 3 dil vardır.

 1 –  Html : Web sayfalarını oluştururken ilk olarak Html kodları yazarak sayfanın temel içeriğini ortaya çıkarırız.

Örneğin bir buton oluşturmak istersek;

Html Kodları

Tarayıcıdaki Görünümü

javascript-nedir-ne-ise-yarar

Html konularında eksikleriniz olduğunu düşünüyorsanız A’DAN Z’YE HTML DERSLERİ yazımdan tüm Html konularına bakabilirsiniz.

 2 –  Css : Yazmış olduğumuz Html kodlarına stil verebilmek ve aynı zamanda web sayfalarının yerleşimini belirlemek için Css öğrenmemiz gerekiyor.

Örneğin yukarıda Html ile yazdığımız butona Css özellikleri uygulayalım.

Html ve Css Kodları

Tarayıcıdaki Görünümü

javascript-nedir-nasil-etkinlestirilir

Css konularında eksikleriniz olduğunu düşünüyorsanız A’DAN Z’YE CSS DERSLERİ yazımdan tüm Css konularına bakabilirsiniz.

 3 –  JavaScript, JavaScript Kütüphaneleri veya Framework’leri (jQuery, Angular, React, Vue vb.) : Yazmış olduğumuz web sayfalarına etkileşim kazandırmak için JavaScript’i, JavaScript Kütüphanelerini veya JavaScript framework’lerini öğrenmemiz gerekiyor.

Örneğin biraz önce Html ve Css kullanarak yapmış olduğumuz butona jQuery kodları yazarak etkileşim kazandıralım. Butona tıklandığında alert metodu ile “Butona Tıkladınız!!!” mesajı verdirelim.

Html, Css ve jQuery Kodları

Uygulama Demosu

jquery-nedir-jquery-ne-ise-yarar-5

 ⇒  Html DOM üzerinde işlemler

 ⇒  Css değişimleri

 ⇒  Html olay yönetimleri

 ⇒  Efektler ve animasyonlar

 ⇒  AJAX işlemleri vb.

Şimdi yazmış olduğumuz bu teorik bilgileri uygulamalar üzerinde görerek daha iyi anlamaya çalışalım. 

jQuery ile kapsamlı projeler de yazabiliriz ama bu kısımda basit birkaç örneği ne kadar kolay bir şekilde yapabildiğimizi göstermek istiyorum.

 1 –  jQuery ile bir Html öğesinin içeriğini değiştirebiliriz. Örneğin butona tıklandığında id’si test olan Html etiketinin içeriğini “Merhaba jQuery!” ile değiştirelim.

Html ve jQuery Kodları

Uygulama Demosu

jquery-nedir-jquery-ne-ise-yarar-1

 NOT :  jQuery kodları yazarken tek tırnak veya çift tırnak kullanabiliriz.

 2 –  jQuery ile bir Html öğesinin attribute’larının değerlerini değiştirebiliriz. Örneğin bir link tanımlayalım ve bu linke tıklandığında “https://www.google.com.tr/” adresine bağlantı verelim.

Butona tıklandığında bu linkin href attribute’unun değerini https://yandex.com.tr/ olarak değiştirelim.

Html ve jQuery Kodları

Uygulama Demosu

jquery-nedir-jquery-ne-ise-yarar-2

Dikkat ederseniz butona tıkladığımızda a etiketinin href attribute’unun değeri değişiyor.

Örneğin bir p etiketi  ve bir buton tanımlayalım. Butona tıklandığında p etiketinin font-size özelliğine 40px değeri verelim.

Html ve jQuery Kodları

Uygulama Demosu

jquery-nedir-jquery-ne-ise-yarar-3

 4 –  jQuery ile Html öğelerine Css uygulama konusunda bir örnek daha vermek istiyorum.

Örneğin bir div etiketi  ve iki buton tanımlayalım. Butonlardan Gizle yazılı butona tıkladığımızda div etiketini gizleyelim. Butonlardan Göster yazılı butona tıkladığımızda div etiketini tekrar gösterelim. 

Html ve jQuery Kodları

Uygulama Demosu

jquery-nedir-jquery-ne-ise-yarar-4

jQuery ile neler yapılabilir sorusuna çok basit birkaç örnek ile cevap vermeye çalıştım. Tabi dediğim gibi anlaşılması adına basit örnekler tercih ettim. Bunların dışında jQuery ile sliderlar, açılıp kapanan pencereler, mesaj kutuları vb. yüzlerce örneği yapabiliyoruz.

Şimdi jQuery kullanımı ile ilgili detaylara bakalım. Projemize eklerken bunu 2 farklı yöntem ile yapabiliriz.

  1   jQuery kütüphanesini, CDN olarak projemize ekleyebiliriz.

Bunun için Html sayfamızın <head></head> etiketleri arasına jQuery kütüphanesini referans olarak eklememiz gerekiyor. CDN olarak ekleme yönteminde 3 farklı firmanın CDN kodlarını kullanabilirsiniz.

  1. jQuery’nin kendi firması
  2. Google
  3. Microsoft

Üçünü de burada paylaşacağım. Dilediğinizi kullanabilirsiniz.

jQuery CDN kullanmak isterseniz

Google CDN kullanmak isterseniz

Microsoft CDN kullanmak isterseniz

Bu referansı projemize ekledikten sonra artık jQuery’i kullanmaya başlayabiliriz.

 Önemli  Başka bir yerde de bu referansı verebilirsiniz. Ama burada şuna dikkat etmelisiniz. Bu referansı nereye yazdıysanız, jQuery kodlarınızı bu tanımlamadan sonra yazmalısınız. Yoksa jQuery kodlarınız çalışmayacaktır.

Bazen jQuery kodlarını <head> etiketleri arasına yazıyoruz. Referansı ise <body> etiketini kapatmadan hemen önceki kısma yazıyoruz. Bu şekilde olduğunda jQuery kodlarımız çalışmayacaktır. Bu problemin nereden kaynaklandığını bulmak bazen ciddi zamanımızı alabiliyor. 

  2   jQuery kütüphanesini bilgisayarımıza indirip dosyalarını projemize ekleyebiliriz. 

Öncelikle jQuery kütüphanesini download linkinden indirmemiz gerekiyor.

jquery-nedir-jquery-indir

Gördüğünüz gibi burada 2 seçenek var.

Birincisi sıkıştırılmış, ikincisi sıkıştırılmamış versiyonu. Aralarındaki tek fark boyutunun farklı olması.

 ⇒  Proje geliştirirken sıkıştırılmamış versiyonu kullanmanızı tavsiye ederim.

Projenin testleri bittikten sonra yayınlama aşamasında .min (sıkıştırılmış) versiyonu kullanmanız size avantaj sağlayacaktır. Çünkü küçük boyutlu olduğundan sitenizin açılış hızını olumlu yönde etkileyecektir.

Dosyaları indirdikten sonra göreceğiniz gibi normal versiyon 284 KB iken sıkıştırılmış versiyon 86 KB boyutunda. 

jquery-nedir-jquery-boyutlari

Son olarak indirdiğimiz jquery-3.4.1.js dosyasını projemize ekleyip, jQuery dosyasının yolunu Html sayfamızın <head></head> etiketleri arasına referans vermemiz gerekiyor.

Bu referansı yazdıktan sonra artık projemizde jQuery’i kullanmaya başlayabiliriz.

jQuery Kodlarını Hangi Editörde Yazmalıyım?

jQuery kodlarını istediğiniz herhangi bir editörde de yazabilirsiniz. Örneğin Notepad++, Atom, Sublime Text, Brackets vb. Ben Visual Studio Code editörünü kullanıyorum ve size de Visual Studio Code kullanmanızı tavsiye ederim.

Visual Studio Code kullanmak isteyenler için jQuery kodlarını yazarken işlerimizi kolaylaştıran küçük bir eklentiyi göstermek istiyorum.

Visual Studio Code editörünü indirmek için sitesini ziyaret edebilirsiniz.

İndirip kurulum işlemini tamamladıktan sonra aşağıdaki resimde olduğu gibi soldaki Extensions (Eklentiler) ikonuna tıklıyoruz.

Daha sonra arama kutusuna jQuery Code Snippets yazıp aratıyoruz.

Son olarak jQuery Code Snippets eklentisini Install butonuna tıklayarak yüklüyoruz. 

jquery-nedir-jquery-kodlari-nereye-yazilir

Bu eklenti sayesinde jQuery kodlarını daha hızlı ve kolay bir şekilde yazabiliyoruz.

Artık “jQuery nedir? jQuery Ne işe yarar? jQuery nasıl kullanılır?” öğrendiğimize göre diğer konulara başlayabiliriz.

Umarım sizin için faydalı bir yazı olmuştur.

Şu yazılar da ilginizi çekebilir.

JavaScript Nedir? JavaScript Ne İşe Yarar?

Yeni bir yazımda görüşmek üzere.

Yorum Yazın

650+ ABONE ARASINA KATIL

Adını ve E-Posta adresini yazarak Html, Css, Javascript, Jquery, Bootstrap, Web Tasarım, C#, Bilgisayar, Telefon, Android, Veri Güvenliği ve daha birçok alanda ders anlatımlarından ve uygulamalı örneklerden anında haberdar olabilirsin.

Abone olduğunuz için teşekkürler.

Birşeyler yanlış gitti.