jQuery: Durch DOM navigieren

Traversal-Methoden

Attention

Liefert das jQuery $("") mehrere Objekte zurück, so werden die Methoden stets auf alle diese Elemente angewandt und alle daraus resultierenden Objekte zurückgegeben.

Über [object].children() wird ein Objekt mit allen Kindelementen geliefert:

console.log($("ul").children());        // alle Kind-Elemente
console.log($("article").find("a"));    // 1. Link im Article

Über [object].parent() wird das direkte Elternelement aller Kind-Elemente im object zurückgegeben:

console.log($("li").parent());          // direktes Elternelement

Über [object].parents() werden alle Elternelemente aller Kind-Elemente im object zurückgegeben:

console.log($("li").parents());          // alle Elternelemente (bis einschl. <html>)

Über [object].parentsUntil(selector) werden alle Elternelemente aller Kind-Elemente bis zum selector (exclusive) im object zurückgegeben:

// alle Elternelemente bis EXCLUSIVE dem übergebenen Selektor (hier: <body>)
console.log($("li").parentsUntil("body"));

Über [object].closest(selector) wird das 1. Elternelemente welches die Bedingung erfüllt im object zurückgegeben:

console.log($("li").closest("article"));    // 1. Elternelement, dass übergebenen Bedingung erfüllt

Für Geschisterelemente:

// Geschwisterelemente
console.log($("ul").siblings());    // alle Geschwisterelemente
console.log($("ul").next());        // direkt folgendes Geschwisterelement
console.log($("ul").next("a"));     // direkt folgendes Geschwisterelement, sofern es Bedingung erfüllt
console.log($("ul").nextAll());     // alle folgenden Geschwisterelemente
console.log($("ul").nextAll("a"));  // alle folgenden Geschwisterelemente, welche Bedingung erfüllen
console.log($("ul").nextUntil("a"));  // alle folgenden Geschwisterelemente bis excl. übergebenen Selektor

console.log($("ul").prev());        // direkt vorhergehendes Geschwisterelement
console.log($("ul").prev("h2"));    // direkt vorhergehendes Geschwisterelement, sofern es Bedingung erfüllt
console.log($("ul").prevAll())      // alle vorhergehenden Geschwisterelemente

Beispiel:

// Beispiel: Event-Handler registrieren
$("h2").on("click", function() {
    $(this).next().toggle("slow")
}).next().hide();

Beispiel: Slideshow –> siehe Tag_14/slide.js.

jQuery mit AJAX

Siehe Tag_14/jQuery/script.js.

GET Requests

1. Möglichkeit

$.ajax() erwartet, dass ein Konfigurations-Objekt übergeben wird:

function loadContent(link) {
    $.ajax({
        type:       "GET",
        url:        link + ".html",
        dataType:   "html",
        success:    function(data) {
                        output.html(data);
                    },
        error:      function(xhrObj, error, errorMsg) {
                         console.log(xhrObj);
                         console.log(error, errorMsg);
                    }
    })

• type ist die Request-Methode

• url ist die aufzurufende URL

• dataType ist der zu erwartende Rückgabedatentyp

• success ist die Handlung, welche bei erfolgreicher Ausführung (200) durchgeführt werden soll

• error ist die Handlung, welche bei nicht-erfolgreicher Ausführung durchgeführt werden soll

2. Möglichkeit

done() und fail()

$.get({
    url:        link + ".html",
    dataType:   "html",
}).done(function(data) {
            output.html(data);
}).fail(function(dxhrObj, error, errorMsg) {
            console.log(xhrObj);
            console.log(error, errorMsg);
});

POST Request

Analog zu GET Requests, gibt es zwei Möglichkeiten:

function setData(data) {
    $.post({
        url:        "pfad zum verarbeiten",
        dataType:   "html" || "xml" || "json",
        data:       "zu sendende Daten",
        success:    function(data) {},
        error:      function() {}
    });
}

Bonus: Lazy-Loading mit Hilfsmethoden-Bibliothek

Siehe Tag_14/libs/dom_helper.js (enthält Hilfsfunktionen) und Tag_14/libs/script-helpertest.js.

Hier werden Bilder beim Herunterscrollen stets weiter geladen (man kann dadurch endlos scrollen).

Hint

Zu dom_helper.js

Über [elem.method].prototype lassen sich bereits definierte Elemente und deren Methoden überschreiben.

Das prototyping kann zu Fehlern in Browsern führen, welche diese Funktion nicht unterstützt wird. Um dies zu vermeiden, kann über try-catch mit diesem Fehler umgegangen wird.