close

jQuery'nin Temel Sözdizimi- Seçme, Değiştirme ve Efektler

jQuery'nin temel sözdizimi, bir seçici(CSS stili seçici) ve seçilen öğeleri işlemek için yöntemler kullanmayı içerir. İşte jQuery'nin bazı temel sözdizimi örnekleri:

 

Elemanları seçme

  • Öğeleri HTML etiket adına göre seçin: $("tagname") Örnek: sayfadaki $("p") tüm öğeleri seçer. <p>

  • Öğeleri CSS sınıfına göre seçin: $(".classname") Örnek: $(".myClass") "sınıfım" sınıfına sahip tüm öğeleri seçer.

  • Kimliğe göre öğeleri seçin: $("#idname") Örnek: $("#myElement") "myElement" kimliğine sahip öğeyi seçer.

  • Öğeleri özniteliğe göre seçin: $("[attribute='value']") Örnek: $("[data-type='button']") özniteliği data-type "düğme" olarak ayarlanmış öğeleri seçer.

  • Seçimleri birleştirme: $("tagname.classname"), $("#idname .classname"), ...

 

Seçili öğeleri manipüle etme

  • Bir öğenin içeriğini değiştirme: .html(), .text() Örnek: $("#myElement").html("New content") "myElement" kimlikli öğenin HTML içeriğini ayarlar.

  • Eleman özniteliklerini değiştirme: .attr(), .prop() Örnek: tüm öğelerin özniteliğini $("img").attr("src", "newimage.jpg") değiştirir. src <img>

  • Bir öğenin CSS sınıflarını değiştirme: .addClass(), .removeClass(), .toggleClass() Örnek: $("#myElement").addClass("highlight") "highlight" sınıfını "myElement" kimliğine sahip öğeye ekler.

  • Öğeleri gizleme/gösterme: .hide(), .show(), .toggle() Örnek: $(".myClass").hide() "sınıfım" sınıfındaki tüm öğeleri gizler.

  • Öğelerdeki olayları işleme: .click(), .hover(), .submit(), ... Örnek: $("button").click(function() { ... }) bir tıklama olay işleyicisini kaydeder

 

Öğe koleksiyonlarıyla çalışma

  • Koleksiyonda yineleme: .each() Örnek: sayfadaki $("li").each(function() { ... }) her bir öğe üzerinde yineleme yapar. <li>

  • Bir koleksiyonu filtrelemek: .filter(), .not() Örnek: öğeleri $("div").filter(".myClass") filtreler <div> ve "sınıfım" sınıfına sahip olanları seçer.

  • Bir koleksiyona öğe eklemek: .append(), .prepend(), .after(), .before() Örnek: "myElement" kimlikli öğeye $("#myElement").append("<p>New paragraph</p>") yeni bir öğe ekler. <p>

 

Efektler ve animasyonlar

  • FadeIn/fadeOut efektlerinin gerçekleştirilmesi: .fadeIn(), .fadeOut() Örnek: $("#myElement").fadeIn(1000) "myElement" kimliğine sahip öğede 1 saniye boyunca kaybolur.

  • SlideUp/slideDown efektlerinin gerçekleştirilmesi: .slideUp(), .slideDown() Örnek: $(".myClass").slideUp(500) "Sınıfım" sınıfındaki tüm öğeleri 0,5 saniye boyunca yukarı kaydırır.

  • Özel animasyonlar gerçekleştirme: .animate() Örnek: $("#myElement").animate({ left: '250px', opacity: '0.5' }) "myElement" kimliğine sahip öğeyi, sol konumunu ve opaklığını değiştirerek canlandırır.

 

Bu örnekler, öğeleri seçmek, özelliklerini değiştirmek ve efektler veya animasyonlar uygulamak için jQuery'nin temel sözdiziminin farklı yönlerinin nasıl kullanılacağını gösterir. jQuery, web geliştirme görevlerini basitleştirmek ve geliştirmek için zengin bir dizi yöntem ve işlevsellik sunar.