jQuery Practices

jQuery Basics Quiz

Aşağıdaki soruları cevaplayarak jQuery bilginizi test edin.

Soru 1: Click Event

Aşağıdaki butona tıklandığında, butonun metnini "Tıklandı!" olarak değiştiren kodu yazın:

Çözüm:

$(document).ready(function() {
    $("#q1-button").click(function() {
        $(this).text("Tıklandı!");
    });
});

Soru 2: Hover Effect

Mouse kutuya geldiğinde arka plan rengini mavi, ayrıldığında beyaz yapan kodu yazın:

Kutunun üzerine gel

Çözüm:

$(document).ready(function() {
    $("#q2-box")
        .mouseenter(function() {
            $(this).css("background-color", "#2196F3");
        })
        .mouseleave(function() {
            $(this).css("background-color", "white");
        });
});

Soru 3: Form Validation

Input alanına en az 5 karakter girildiğinde "Geçerli", girilmediğinde "Çok Kısa!" mesajını gösteren kodu yazın:

Çözüm:

$(document).ready(function() {
    $("#q3-input").keyup(function() {
        if($(this).val().length >= 5) {
            $("#q3-message")
                .text("Geçerli")
                .css("color", "#4CAF50");
        } else {
            $("#q3-message")
                .text("Çok Kısa!")
                .css("color", "#f44336");
        }
    });
});

Soru 4: Element Ekleme/Silme

Liste öğesi ekleyen ve en son eklenen öğeyi silen kodları yazın:

Örnek öğe 1

Çözüm:

$(document).ready(function() {
    $("#q4-add").click(function() {
        const yeniOge = $("").text("Yeni öğe " + ($("#q4-list li").length + 1));
        $("#q4-list").append(yeniOge);
    });
    
    $("#q4-remove").click(function() {
        $("#q4-list li").last().remove();
    });
});

Soru 5: Class Manipülasyonu

Butonlara tıklandığında kutunun class'larını değiştiren kodları yazın:

Çözüm:

$(document).ready(function() {
    $("#q5-toggle").click(function() {
        $("#q5-box").toggleClass("highlight");
    });
    
    $("#q5-add").click(function() {
        $("#q5-box").addClass("rounded");
    });
    
    $("#q5-remove").click(function() {
        $("#q5-box").removeClass("scaled");
    });

    // Test için scaled class'ını ekleyelim
    $("#q5-box").addClass("scaled");
});

Soru 6: Input Değer Değişimi

Input alanına yazılan değeri anlık olarak başlığa yansıtan kodu yazın:

Buraya yazılacak

Çözüm:

$(document).ready(function() {
    $("#q6-input").keyup(function() {
        $("#q6-output").text($(this).val());
    });
});

Soru 7: Klavye Olayları

Input alanına sadece sayı girilmesine izin veren kodu yazın:

Çözüm:

$(document).ready(function() {
    $("#q7-input").keypress(function(e) {
        if(e.which >= 48 && e.which <= 57) {
            $("#q7-message").text("").css("color", "black");
        } else {
            e.preventDefault();
            $("#q7-message")
                .text("Lütfen sadece sayı girin!")
                .css("color", "red");
        }
    });
});

Soru 8: Checkbox Kontrolü

Checkbox'ın durumuna göre mesaj gösteren kodu yazın:

Onaylıyorum

Çözüm:

$(document).ready(function() {
    $("#q8-checkbox").change(function() {
        if($(this).is(":checked")) {
            $("#q8-message")
                .text("Onaylandı!")
                .css("color", "green");
        } else {
            $("#q8-message")
                .text("Lütfen onaylayın")
                .css("color", "red");
        }
    });
});

Soru 9: Çoklu Element Seçimi

Tüm kutulara tıklandığında rengini değiştiren kodu yazın:

Çözüm:

$(document).ready(function() {
    $(".q9-box").click(function() {
        $(this).css({
            "background-color": "#2196F3",
            "transition": "background-color 0.3s"
        });
    });
});

Soru 10: Scroll Pozisyonu

Scroll pozisyonunu gösteren kodu yazın:

Scroll Pozisyonu: 0px

Aşağı kaydırın

Çözüm:

$(document).ready(function() {
    $(".preview-container").scroll(function() {
        const pos = $(this).scrollTop();
        $("#q10-position").text("Scroll Pozisyonu: " + pos + "px");
    });
});

Soru 11: JSON Parse ve Stringify

Verilen JSON string'i parse edip, yeni bir öğrenci ekleyerek tekrar JSON'a çeviren kodu yazın:

{"ogrenciler":[{"ad":"Ali","not":85},{"ad":"Ayşe","not":92}]}

Çözüm:

$(document).ready(function() {
    // JSON string'i parse et
    const jsonStr = $("#q11-input").text();
    const data = JSON.parse(jsonStr);
    
    // Yeni öğrenci ekle
    data.ogrenciler.push({"ad": "Mehmet", "not": 78});
    
    // Tekrar JSON'a çevir
    const yeniJson = JSON.stringify(data, null, 2);
    $("#q11-output").html(`${yeniJson}`);
});

Soru 12: XML Parse ve Seçiciler

Aşağıdaki XML verisini parse edip öğrenci notlarının ortalamasını hesaplayan kodu yazın:

<?xml version="1.0" encoding="UTF-8"?>
<sinif>
    <ogrenci>
        <ad>Ali</ad>
        <not>85</not>
    </ogrenci>
    <ogrenci>
        <ad>Ayşe</ad>
        <not>92</not>
    </ogrenci>
    <ogrenci>
        <ad>Mehmet</ad>
        <not>78</not>
    </ogrenci>
</sinif>

Öğrenci Notları:

Ortalama: -

Çözüm:

$(document).ready(function() {
    // XML string'i al ve parse et
    const xmlStr = $(".xml-example pre").text();
    const xmlDoc = $.parseXML(xmlStr);
    const $xml = $(xmlDoc);
    
    let toplam = 0;
    let sayac = 0;
    
    // XML'i dolaş ve notları topla
    $xml.find("ogrenci").each(function() {
        const $ogrenci = $(this);
        const ad = $ogrenci.find("ad").text();
        const not = parseInt($ogrenci.find("not").text());
        
        $("#q12-list").append(`${ad}: ${not}`);
        toplam += not;
        sayac++;
    });
    
    // Ortalamayı hesapla ve göster
    const ortalama = toplam / sayac;
    $("#q12-average").text(ortalama.toFixed(2));
});

Soru 13: jQuery Effects

Bir butona tıklandığında, hedef elementi önce soldan sağa doğru kaydırın, ardından fade out efekti uygulayın ve son olarak elementi yukarıdan aşağıya doğru slide edin.

Efekt Hedefi

Bu kutu üzerinde efektler uygulanacak

Çözüm:

$(document).ready(function() {
    $("#effectsBtn").click(function() {
        $("#effectsTarget")
            .animate({"marginLeft": "200px"}, 1000)
            .fadeOut(1000)
            .slideDown(1000);
    });
});

Soru 14: Advanced DOM

Verilen listedeki elementleri filtreleyerek, sadece "önemli" sınıfına sahip olanları seçin ve bu elementlerin metin rengini kırmızı yapın. Ardından seçilen elementlerin kardeş elementlerine mavi renk uygulayın.

Önemli Öğe 1
Normal Öğe 1
Önemli Öğe 2
Normal Öğe 2
Önemli Öğe 3

Çözüm:

$(document).ready(function() {
    $("#filterBtn").click(function() {
        $("#itemList li")
            .removeClass("selected")
            .css("color", "black");
            
        $("#itemList li.onemli")
            .addClass("selected")
            .css("color", "red")
            .siblings()
            .css("color", "blue");
    });
});

Soru 15: Element Klonlama ve Özelleştirme

Orijinal elementi klonlayın, klonun içeriğini değiştirin ve yeni özellikler ekleyin:

Orijinal Element

Bu element klonlanacak

Versiyon 1.0

Çözüm:

$(document).ready(function() {
    $("#cloneBtn").click(function() {
        // Elementi klonla
        const $clone = $("#originalElement").clone(true);
        
        // Klonun içeriğini değiştir
        $clone
            .find("h4").text("Klonlanmış Element").end()
            .find("p").text("Bu element özelleştirildi").end()
            .find(".badge").text("Versiyon 2.0");
        
        // Yeni özellikler ekle
        $clone
            .css({
                "background": "#e3f2fd",
                "transform": "scale(0.9)"
            })
            .attr({"data-cloned": "true"})
            .addClass("cloned-element");
        
        // Klonu container'a ekle
        $("#cloneContainer").html($clone);
    });
});

Soru 16: DOM Traversing

Seçilen elementin parent, child ve sibling elementlerini manipüle edin:

Ebeveyn Element

Mevcut Element

Çocuk Element 1

Çocuk Element 2

Kardeş Element

Çözüm:

$(document).ready(function() {
    $("#traverseBtn").click(function() {
        const $current = $(".generation.current");
        
        // Parent elementi bul ve manipüle et
        $current.parent()
            .css("background", "#fff3e0")
            .find("h4").append(" (Manipüle Edildi)");
        
        // Child elementleri bul ve manipüle et
        $current.find(".child")
            .css("background", "#e8f5e9")
            .find("h4").append(" (Manipüle Edildi)");
        
        // Sibling elementi bul ve manipüle et
        $current.siblings(".sibling")
            .css("background", "#e3f2fd")
            .find("h4").append(" (Manipüle Edildi)");
    });
});