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

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:

<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)​

• 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)​

• click(): Bir butona tıklama olayını dinler

$("#myButton").click(function() {
    alert("Butona tıkladınız!");
});

• hover(): Fare bir elementin üzerine geldiğinde.

$("#myElement").hover(
    function() { $(this).css("background-color", "yellow"); },
    function() { $(this).css("background-color", "white"); }
);

jQuery'de DOM Manipülasyonu​

• text(): Elementin metin içeriğini değiştirme.

$("#myElement").text("Yeni Metin");

• html(): HTML içeriğini değiştirme.
  
  JavaScript:Panoya kopyala

  javascript
  $("#myElement").html("<b>Kalın Metin</b>");

• append() ve prepend(): Elementin içine yeni içerik ekleme.
  
  JavaScript:Panoya kopyala

  $("#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:Panoya kopyala

  $("#myElement").css("color", "blue");

• addClass() ve removeClass(): Sınıf ekleme ve kaldırma.
  
  JavaScript:Panoya kopyala

  $("#myElement").addClass("yeniSınıf");
  $("#myElement").removeClass("eskiSınıf");

3. Orta Düzey jQuery​

Efektler ve Animasyonlar​

• hide() ve show(): Bir elementi gizleme veya gösterme.
  
  JavaScript:Panoya kopyala

  $("#myElement").hide();
  $("#myElement").show();

• fadeIn() ve fadeOut(): Elementi yavaşça gösterme veya gizleme.
  
  JavaScript:Panoya kopyala

  $("#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:Panoya kopyala

  $("#myElement").slideUp();
  $("#myElement").slideDown();

AJAX İşlemleri​

• $.ajax(): Manuel AJAX işlemi.
  
  JavaScript:Panoya kopyala

  $.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:Panoya kopyala

  $.post("veri.php", { isim: "Ahmet" }, function(response) {
  $("#sonuc").html(response);
  });

Traversing (Geçiş Yapma)​

• 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​

• serialize(): Bir formun tüm verilerini JSON formatında almak.
  
  JavaScript:Panoya kopyala

  var formData = $("#myForm").serialize();

• submit(): Form gönderme olayını yönetmek.
  
  JavaScript:Panoya kopyala

  $("#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.