🎓Dannejaha

📦jQuery

jQuery förenklar JavaScript-programmering med kraftfulla verktyg för DOM-manipulation, AJAX-anrop och animationer. Perfekt för snabb webbutveckling.

Kodexempel

🎯

DOM Manipulation

Effektiv DOM-manipulation med jQuery för dynamiska webbsidor.

// Grundläggande jQuery syntax
$(document).ready(function() {
    // Selektorer och manipulation
    $("#myButton").click(function() {
        $(".content").fadeToggle();
        $(this).text($(this).text() === "Visa" ? "Dölj" : "Visa");
    });
    
    // Kedjade metoder
    $(".box")
        .addClass("active")
        .css("background-color", "#3498db")
        .animate({ width: "300px" }, 500)
        .delay(200)
        .fadeIn();
    
    // Traversering
    $("li").each(function(index) {
        $(this).attr("data-index", index);
    });
});

jQuery förenklar DOM-manipulation med kortare syntax och kraftfulla metoder

🔄

AJAX-anrop

Asynkrona HTTP-requests med jQuery för dynamisk data.

// GET-request med jQuery
$.ajax({
    url: "/api/users",
    method: "GET",
    dataType: "json",
    success: function(data) {
        // Hantera framgångsrik respons
        $.each(data, function(index, user) {
            $("#userList").append(
                $("<li>").text(user.name)
            );
        });
    },
    error: function(xhr, status, error) {
        console.error("Error:", error);
        $("#error").text("Kunde inte hämta användare");
    }
});

// POST-request med promises
$.post("/api/users", {
    name: $("#name").val(),
    email: $("#email").val()
})
.done(function(response) {
    alert("Användare skapad!");
})
.fail(function(xhr) {
    alert("Fel: " + xhr.responseText);
});

// Förenklad GET med getJSON
$.getJSON("/api/products", function(products) {
    // Process products
});

jQuery AJAX förenklar asynkrona requests med bra felhantering

⚡

Event Handling

Avancerad eventhantering och delegering med jQuery.

// Event delegation för dynamiskt innehåll
$(document).on("click", ".dynamic-button", function() {
    console.log("Klick på dynamisk knapp!");
});

// Multiple events
$("#myInput")
    .on({
        focus: function() {
            $(this).addClass("active");
        },
        blur: function() {
            $(this).removeClass("active");
        },
        keyup: function(e) {
            if (e.key === "Enter") {
                submitForm();
            }
        }
    });

// Custom events
$(document).on("userLoggedIn", function(e, userData) {
    $(".username").text(userData.name);
    $(".login-section").hide();
    $(".user-section").show();
});

// Trigger custom event
$(document).trigger("userLoggedIn", { name: "Anna" });

// Prevent default och stop propagation
$("form").submit(function(e) {
    e.preventDefault();
    // Custom form handling
});

jQuery's eventsystem är kraftfullt med stöd för delegation och custom events

✨

Animationer & Effekter

Skapa smidiga animationer och visuella effekter.

// Grundläggande animationer
$("#box").animate({
    left: "200px",
    opacity: 0.5,
    height: "toggle"
}, 1000, "easeInOut");

// Kedjade animationer
$(".notification")
    .slideDown(300)
    .delay(3000)
    .fadeOut(500, function() {
        $(this).remove();
    });

// Custom animation queue
function pulseEffect() {
    $(".pulse")
        .animate({ opacity: 0.3 }, 500)
        .animate({ opacity: 1 }, 500, pulseEffect);
}

// Stoppa animationer
$("#stop").click(function() {
    $(".animated").stop(true, true);
});

// Toggle effects
$(".accordion-header").click(function() {
    $(this).next(".accordion-content").slideToggle();
    $(this).find(".arrow").toggleClass("rotated");
});

jQuery animationer ger smidig kontroll över visuella effekter

Best Practices

⚡

Performance

  • •Cacha jQuery-selektorer i variabler
  • •Använd ID-selektorer när möjligt (#id)
  • •Minimera DOM-manipulation i loopar
  • •Använd event delegation för dynamiskt innehåll
✅

Best Practices

  • •Använd alltid $(document).ready()
  • •Kedja metoder för effektivitet
  • •Använd data-attribut för metadata
  • •Separera JavaScript från HTML
🔄

Modern Användning

  • •Överväg vanilla JS för enkla uppgifter
  • •Använd jQuery för legacy-projekt
  • •Kombinera med moderna frameworks försiktigt
  • •Håll jQuery uppdaterat för säkerhet
🐛

Debugging

  • •Använd console.log() för att debugga
  • •Kontrollera att element finns före manipulation
  • •Använd browser DevTools för att inspektera
  • •Testa i olika webbläsare

🔌 Populära jQuery Plugins

UI & Interactions

  • • jQuery UI - Widgets och interactions
  • • Select2 - Avancerade select-boxar
  • • DataTables - Tabeller med funktioner

Validering & Forms

  • • jQuery Validation - Formulärvalidering
  • • jQuery Mask - Input masking
  • • jQuery Form - AJAX forms

Media & Effekter

  • • Slick - Carousel/slider
  • • Fancybox - Lightbox för bilder
  • • Isotope - Filtrerbar layout

💡 Vanliga jQuery-mönster

DOM Ready

// Kort syntax
$(function() {
    // Kör när DOM är redo
});

// Lång syntax
$(document).ready(function() {
    // Kör när DOM är redo
});

Plugin Pattern

$.fn.myPlugin = function(options) {
    var settings = $.extend({
        color: "blue",
        speed: 500
    }, options);
    
    return this.each(function() {
        // Plugin logic
    });
};