ITG-Wiki

Albert Einstein Gymnasium Reutlingen

Benutzer-Werkzeuge

Webseiten-Werkzeuge

Seitenleiste

Hauptmenü

Start

BakuMebi 5
ITG Klasse 7
ITG Klasse 9
ITG Oberstufe

Impressum
Datenschutz

Links

Training
AEG IT
AEG Homepage
AEG Schulportfolio

Hilfe

for everybody

only for teachers

Druck/Export

Werkzeug

(oSP 19.10-ruffnut.4)
javascripting:lektion_04

    Sie befinden sich hier: start » javascripting » lektion_04
    Buch erstellen
     Diese Seite zum Buch hinzufügen
    Buch erstellen
     Diese Seite aus Buch entfernen  

     Buch anzeigen, ändern (0 Seite/n)
     Hilfe

    Inhaltsverzeichnis

    Lektion 4: HTML-Manipulation II - jQuery

    Informatiker sind von Haus aus faul! Es wird versucht, einfache Lösungen für Probleme zu finden, Code-Zeilen zu sparen und Redundanzen (Wiederholungen) zu vermeiden. Auf Dauer ist reines JavaScript teilweise nervig und unnötig umständlich. Hier können Erweiterungs-Bibliotheken Abhilfe schaffen.

    jQuery

    jQuery ist eine solche Erweiterungs-Bibliothek für JavaScript. Es vereinfacht Aufrufe und bietet neue Funktionalität.

    JQuery is used by 63.8% of all the websites, that is a JavaScript library market share of 95.1%. w3techs.com

    jQuery ist nicht standardmäßig im Browser verfügbar und muss eingebunden werden. Dazu gibt es, analog zu externen CSS-Dateien, die Möglichkeit, JavaScript-Dateien im head eines HTML-Dokuments einzubinden. 

    <html>
  <head>
    <script src="pfad/zur/datei.js"></script>
  </head>
  <body>
    ... weitere HTML-Elemente ...
  </body>
</html>

    Nicht nur Bibliotheken lassen sich importieren, sondern auch eigene Scripte. Alles, was in der JavaScript-Konsole geschrieben werden kann, lässt sich auch in eine JavaScript-Datei (*.js) schreiben und wird nach dem Laden der Seite ausgeführt.

    jQuery kapselt (überdeckt) JavaScript-Funktionalität und bietet eine einfachere und kürzere Schreibweise. Der Zugriff auf HTML-Elemente ähnelt den Selektoren von CSS. So kann auf id's (#), Klassen (.) und direkt auf HTML-Tags (h1) zugegriffen werden. Um auf ein Element per jQuery zuzugreifen, wird mit einem $ begonnen und in Klammern der gewünschte Selektor eingegeben. Um also auf den Link mit der id „important“ zuzugreifen, schreibt man folgende Zeile 

      // jQuery Schreibweise für: document.getElementById("important");
  var link =                 $("#important");
                             // deutlich kürzer :)
  console.log(link);

    Inhalt eines HTML-Element verändern

    // Gibt "Hello World" in der Konsole aus
// console.log(document.getElementById("important").innerHTML) 
console.log($("#important").html());
 
// Ändert "Hello World" in "Goodbye World"
// document.getElementById("important").innerHTML = "Goodbye World"
$("#important").html("Goodbye World");

    HTML-Attribut ändern

    // Ändert das Ziel des Links auf "JS_AEG_L2.html" (Das Attribute wird verändert)
// document.getElementById("important").href = "JS_AEG_L2.html"; 
$("#important").attr("href", "JS_AEG_L2.html"); 
 
// Linkziel wird in neuem Fenster geöffnet (Das Attribut wird neu hinzugefügt)
// document.getElementById("important").target = "_blank"; 
$("#important").attr("target", "_blank");
 
$("#important").attr("foo", "bar");

    Aussehen eines HTML-Elements verändern (CSS)

    Besonders wichtig ist das Style-Attribute. Eine einfache Syntax ermöglicht es, das Aussehen des HTML-Elements sehr leicht zu ändern. 

    // Speichere in der Variablen "element" den Wert von document.getElementById("important")
var element = $("#important");
 
// Setzt die Schriftgroesse auf 25px
// element.style.fontSize = "25px";
element.css("font-size", "25px");
 
// Versteckt das Element (Das Element ist aber noch da!)
// element.style.display = "none";
element.hide();
 
// Zeigt das Element wieder an
// element.style.display = "block";
element.show();
 
// Sogar mehrere CSS-Anweisungen in einem 
// Text wird gelb und bekommt einen schwarzen Rahmen
element.css({color: "yellow", border: "1px solid #000"});

    HTML-Element hinzufügen

    Jetzt wird es schön! 

    // Speichere das HTML-Element in der Variable "newElement"
// var newElement = document.createElement("h2");
// newElement.innerHTML = "Hallo Neue Welt";
// document.body.appendChild(newElement);
 
// 2 Zeilen gespart
$("body").append("<h2>Hallo Neue Welt</h2>");
 
// Fügt das Element ganz am Anfang ein
$("body").prepend("<h2>Hallo Neue Welt von Oben</h2>");

    HTML-Element löschen

    Im unterschied zum Ausblenden eines HTML-Elements (via CSS), kann ein Element auch komplett entfernt werden. Dazu muss es von seinem „Elternknoten“, also seinem umschließenden HTML-Element, gelöst werden. 

    // var element = document.getElementById("important");
// document.body.removeChild(element);
 
// Element holen und löschen (Elternelement ist egal)
$("#important").remove();

    HTML-Element finden

    Wie gesehen, kann jQuery Elemente anhand ihrer id finden. Aber auch Klassen und Elementtypen werden gefunden. 

    <body>
  <a href="index.html" id="link">Link</a>
  <h2 class="heading">Überschrift</h2>
  <div>
    <p>Text</p>
  </div>
</body>
    console.log($("#link").html());
// Link
 
console.log($(".heading").html());
// Überschrift
 
console.log($("div").html());
// <p>Text</p>

    Jedoch sind Klassen und Elementtypen nicht eindeutig und der Selektor kann auf mehrere Elemente zutreffen. Was passiert also, wenn 2 div-Tags vorhanden sind? 

    <body>
  <div>
    <p>Text 1</p>
  </div>
  <div class="second">
    <p>Text 2</p>
  </div>
</body>
    console.log($("div").html());
// Text 1
 
console.log($("div"));
// [div, div.second] eine liste von Elementen
 
console.log($("div.second").html());
// Text 2

    jQuery benutzt den ersten Eintrag aus einer Liste, wenn eine Funktion für ein einzelnes Element aufgerufen wird. Das ist einerseits sehr tolerant, kann aber auch die Fehlersuche erschweren. Darum immer so genau wie möglich selektieren (mit id's oder Klassen) - das gilt auch für CSS.

    Zusammenfassung

    jQuery vereinfacht die Zugriffe auf HTML-Elemente und bietet mächtige Erweiterungn für JavaScript. Alle Funktionen finden sich in der jQuery API. API steht für Application Programming Interface (Programmierschnittstelle) und liefert alle Informationen, die zur Benutzung der Funktionen wichtig sind.

    In dieser Lektion haben wir gelernt, wie HTML-Elemente mit jQuery angesprochen und verändert werden können. Weiterhin haben wir gesehen, dass jQuery bei einem Aufruf mit einem zu allgemeinen Selektor unter Umständen eine List von Elementen zurück liefert.

    Aufgabe

    1. Führe die Aufgaben aus Lektion 2 mit jQuery aus
      Schreibe diesmal alle Befehle in eine JavaScript-Datei
    2. Lade dir das Zip-Archiv „lektion_4.zip“ herunter und entpacke es in deinen Projektordner
    3. Ändere das Bild „aeg.jpg“ in „buecher.jpg“
    4. Füge der h1 Überschrift die CSS-Eigenschaft kursiv hinzu
    5. Ändere im (einzigen) <span>-Tag den Text in „JavaScript ist total einfach“

    << Lektion 3: HTML-Manipulation I | Lektion 5: Wünsch Dir was! >>

    Zuletzt angesehen: • lektion_04
    javascripting/lektion_04.txt · Zuletzt geändert: 15.06.2015 14:59 von pasler

    Seiten-Werkzeuge

    Openschulportfolio Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki