Jquery Başlamak Için Küçük Ama Yararlı Bilgiler Verelim.

fikretyn

Moderator
12 Mar 2024
57
24
0
samsun
jQuery, web geliştirmede en popüler JavaScript kütüphanelerinden biridir. HTML belgesi işleme, olay yönetimi, animasyon ve AJAX gibi işlemleri daha basit ve hızlı hale getirir. jQuery'nin en büyük avantajlarından biri, tarayıcı uyumluluğu sağlamasıdır.

1. jQuery'ye Giriş​

Nedir?​

  • jQuery, "Write Less, Do More" (Az Kodla Daha Fazlasını Yap) felsefesiyle geliştirilmiştir.
  • JavaScript kodunu daha kısa ve anlaşılır hale getirir.

jQuery Nasıl Eklenir?​

  • jQuery'yi kullanmak için aşağıdaki CDN’i HTML dosyanıza ekleyebilirsiniz:
JavaScript:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

  • Ya da dosyayı indirip projenize dahil edebilirsiniz.

2. jQuery'nin Temelleri​

Seçiciler (Selectors)​

jQuery, CSS seçicilerine benzer şekilde çalışır.

  • Element seçici: $("p") → Tüm <p> etiketlerini seçer.
  • ID seçici: $("#myID") → Belirli bir ID'ye sahip elementi seçer.
  • Sınıf (class) seçici: $(".myClass") → Belirli bir sınıfa sahip tüm elementleri seçer.

Olaylar (Events)​

jQuery ile kullanıcı etkileşimlerini kolayca yönetebilirsiniz.

  • click(): Bir butona tıklama olayını dinler
JavaScript:
$("#myButton").click(function() {
    alert("Butona tıkladınız!");
});
  • hover(): Fare bir elementin üzerine geldiğinde.
JavaScript:
$("#myElement").hover(
    function() { $(this).css("background-color", "yellow"); },
    function() { $(this).css("background-color", "white"); }
);

jQuery'de DOM Manipülasyonu​

jQuery, HTML elementlerini değiştirmek, eklemek ve kaldırmak için birçok yöntem sunar.

  • text(): Elementin metin içeriğini değiştirme.
JavaScript:
$("#myElement").text("Yeni Metin");

  • html(): HTML içeriğini değiştirme.
    JavaScript:
    javascript
    $("#myElement").html("<b>Kalın Metin</b>");
  • append() ve prepend(): Elementin içine yeni içerik ekleme.
    JavaScript:
    $("#myElement").append("<p>Sonra eklenen içerik</p>");
    $("#myElement").prepend("<p>Önce eklenen içerik</p>");

CSS İşlemleri​

  • css(): CSS stilini değiştirme.
    JavaScript:
    $("#myElement").css("color", "blue");
  • addClass() ve removeClass(): Sınıf ekleme ve kaldırma.
    JavaScript:
    $("#myElement").addClass("yeniSınıf");
    $("#myElement").removeClass("eskiSınıf");

3. Orta Düzey jQuery​

Efektler ve Animasyonlar​

jQuery ile çeşitli efektler ve animasyonlar oluşturabilirsiniz.

  • hide() ve show(): Bir elementi gizleme veya gösterme.
    JavaScript:
    $("#myElement").hide();
    $("#myElement").show();
  • fadeIn() ve fadeOut(): Elementi yavaşça gösterme veya gizleme.
    JavaScript:
    $("#myElement").fadeIn(1000); // 1 saniyede gösterir
    $("#myElement").fadeOut(1000); // 1 saniyede gizler
  • slideUp() ve slideDown(): Yukarı veya aşağı kayarak gösterme/gizleme.
    JavaScript:
    $("#myElement").slideUp();
    $("#myElement").slideDown();

AJAX İşlemleri​

jQuery, AJAX işlemlerini oldukça basit hale getirir.

  • $.ajax(): Manuel AJAX işlemi.
    JavaScript:
    $.ajax({
    url: "veri.php",
    type: "POST",
    data: { isim: "Ahmet", yas: 25 },
    success: function(response) {
    $("#sonuc").html(response);
        }
    });
  • $.get() ve $.post(): Daha kısa ve sık kullanılan AJAX fonksiyonları.
    JavaScript:
    $.post("veri.php", { isim: "Ahmet" }, function(response) {
    $("#sonuc").html(response);
    });

Traversing (Geçiş Yapma)​

DOM'da gezinmek için jQuery oldukça güçlü yöntemler sunar.

  • parent(): Bir elementin üst elementini seçer.
  • children(): Bir elementin alt elementlerini seçer.
  • siblings(): Aynı seviyedeki kardeş elementleri seçer.

4. jQuery ile Form İşlemleri​

Form validasyonu, veri gönderimi gibi işlemler jQuery ile oldukça basittir.

  • serialize(): Bir formun tüm verilerini JSON formatında almak.
    JavaScript:
    var formData = $("#myForm").serialize();
  • submit(): Form gönderme olayını yönetmek.
    JavaScript:
    $("#myForm").submit(function(event) {
    event.preventDefault(); // Sayfanın yeniden yüklenmesini engeller
    // AJAX ile formu gönderme işlemi
    });

5. İleri Düzey Özellikler​

jQuery UI ve jQuery Plugins​

  • jQuery UI: Sürükle ve bırak, tarihler, dialog pencereleri gibi ek özellikler sunar.
  • Plugins (Eklentiler): jQuery eklentileri, belirli işlevler için hazır çözümler sunar (örneğin, slider eklentileri).

Kaynaklar ve Rehberler​

  • jQuery Resmi Dokümantasyonu
  • Türkçe kaynaklar için çeşitli bloglar, YouTube kanalları ve jQuery eğitim kitapları faydalı olabilir.
Bu rehberle jQuery'yi başlangıç ve orta düzeyde öğrenerek projelerinizde rahatça kullanabilirsiniz!