JavaScript Bibliotheken- jQuery

Da JS-Programme sich mit wiederkehrenden Aufgaben beschäftigt, die auf verschiedene Benutzerinteraktionen reagieren sollen, kann das ganz schön kompliziert werden. Deshalb gibt es JS-Bibliotheken, die zeitraubende Programmierdetails überspringen. Eine JS-Bibliothek ist eine Sammlung von JS-Code, die einfache Lösungen für viele verbreitete JS-Aufgaben bietet. Man kann es sich vorstellen, wie eine Sammlung im Voraus geschriebener JS-Funktionen, die man in seine Seite einbinden kann. Das erleichtert dann wiederkehrende Aufgaben, da sie nicht mehr programmiert werden müssen.

Hier nehme ich jQuery als Beispiel.

Vorteile:

relativ kleine Dateigröße
Webdesignfreundlich (baut auf CSS auf)
Es wird von sehr vielen Websites verwendet -> bewährt
es ist gratis

jQuery

hat eine große Entwicklergemeinde (dauerhaft)
Plug-Ins: für JQuery können andere Programmierer Plug-Ins erstellen, wie z.B. JS-Add-on-Programme, die in Verbindung mit jQuery bestimmte Aufgaben, Effekte,oder Funkionen einfach in eine Website einfügen lassen.

kurz gesagt: es ist ein Toolset, das die JS-Arbeit des Programmierer erleichtert

How to start

Man muss jQuery erst einmal herunterladen, bevor man es benutzen kann (wer hätte das gedacht :))
Datei in Website ablegen (z.B. Wurzelverzeichnis)
Zum verwenden der Datei, muss man es mit der Website verknüpfen: externe Datei -> src“…“

Hier kurz ein Überblick über den Unterschied zwischen mit und ohne jQuery:

ohne jQuery

mit jQuery

Verkettung

Das jQuery-Objekt am Anfang wird als primäre Collection bezeichnet. Die HTML Elemente sind darin verkapselt:

z.B sind das alle Absätze innerhalb des Containers #box

$(‚#box p‘)

Fast jede jQuery-Methode liefert wieder ein jQuery Objekt. Die jQuery-Methoden werden einfach verkettet:

$(selektorausdruck).methode1().methode2().methode3();

Jedem jQuery Objekt stehen alle jQuery-Methoden zur Verfügung und anhand diesem kann man die Werte aller jQuery-Properties auslesen.

Gruppen von jQuery-Methoden:

Transparente jQuery-Methoden: diese geben ein jQuery-Objekt zurück, das der Eingabe-Collection entspricht und man kann an den Elementen der Collection arbeiten. Außerdem bleibt die Collection unverändert und wird an die nächste Methode weitergegeben. Transparente Methoden sind ohne Einschränkung verkettbar
Destruktive jQuery-Methoden: Geben ein jQuery-Objekt zurück, das nicht der Eingabe-Collection entspricht (reduziert, erweitert, oder andere Collection). Sie sind jedoch auch ohne Einschränkung verkettbar
Terminierende jQuery-Methoden: geben kein jQuery-Objekt zurück. Danach steht keine Collection zur Verfügung und sie sind nicht verkettbar. Terminierende Methoden beenden die jQuery-Kette.

CSS Selektoren

Ein CSS Selektor ist eine Anweisung, die dem Webbrowser sagt, für welches Tag welcher Stil gilt.

z.B. ist .einhorn ein Klassenselektor, der jedes Tag stylt, das das class-Attribut einhorn hat.

Mit jQuery kann man ein, oder auch mehrere Elemente mit einem Befehl auswählen, dem jQuery-Objekt. Die grundlegende Syntax sieht so aus:

$(‚Selektor‘)

Wenn man z.B. ein Tag mit der ID mops in jQuery auswählen möchte. schreibt man:

$(“mops‘)

#mops ist der Selektor, mit dem man ein Tag mit der ID mops auswählt. # kennzeichnet, dass man eine ID angibt. Man kann natürlich danach auch etwas mit demn ausgewählten Elementen tun. So ändert man z.B. das HTML in einem Element:

$(‚#mops‘).html(‚<h1> Ein Leben ohne Mops ist möglich, aber sinnlos >/h1>‘);

Einfache Selektoren

Die einfachsten Selektoren sind z.B. die ID-, Klassen-, und Elementssektoren.

ID Selektoren

Mit jQuery und einem CSS-ID-Selektor kann man jedes Seitenelement auswählen, das eine ID hat. Geht man von dem folgenden HTML einer Website aus:

Um auf dieses Element zuzugreifen schreibt man mit jQuery:

var hundPara = $(‚#hund‘);

Elementssektoren

jQuery verfügt auch über einen Ersatz für getElementsByTagName(). Hierfür muss man jQuery einfach nur den Namen des Tags übergeben. Um z.B. auf jedes <a>-Tag auf einer Seite auszuwählen, müsste man mit dem DOM folgendes schreiben:

var linkListe = document.getElementsByTagName(‚a‘);

und mit jQuery schreibt man:

var linkListe = $(‚a‘);

Sieht doch wesentlich einfacher aus, oder? 😀

Klassenselektoren

Das Dom bietet keine Methode zum Finden aller Elemente mit einem bestimmten Klassenattribut. Aber glücklicherweise hat jQuery dafür eine einfache Methode. Man verwendet einfach einen CSS-Klassenselektor:

$(‚.blumen‘)

Sobald man die Tags ausgewählt hat, kann man sie mit jQuery manipulieren:

$(‚.blumen‘).hide();

So blendet man alle Tags mit dem Klassennamen .blumen aus.

Die etwas schwierigeren Selektoren

Wie man weiß, kann ja nicht immer alles leicht sein, also folgen nun die etwas anspruchsvolleren Selektoren:

Nachkommensselektor: dieser bietet die Möglichkeit ein Tag innerhalb eines anderen Tags auszuwählen. Möchte man die Tags innerhalb des Tags <a> auswählen, so schreibt man: $(‚#navBar a‘) (mit der Voraussetzung, dass die Tags die ID Bar haben).
Kindselektoren: diese zielen auf ein Tag ab, das Kind eines anderen Tags ist. So wählt man zum Beispiel alle <p>-Tags aus, die Kinder des <body<>-Tags sind: $(‚body > p‘)
Selektoren für angrenzende Geschwister: dieser Selektor wähl ein Tag aus, das direkt nach einem anderen Tag erscheint. Zum einblenden des <div>-Tags, muss man diesen auswählen. Mit jQuery und einem Selektor für angrenzende Geschwister ist das leicht: $(‚h2 + div‘) der rechts neben dem Pluszeichen stehende Selektor steht für die Auswahl, aber nur, wenn er unmittelbar auf den linken Selektor folgt.
Attributsselektoren: diese wählen Elemente aus, wenn diese über ein bestimmtes Attribut verfügen, und prüfen, ob dieses Attribut einen bestimmten Wert hat. Mit einem Attributsselektor kann man beispielsweise <img>-Tags finden, die ein alt-Attribut haben, oder sogar ein >img>-Tag auswählen, dessen alt-Attribut einen bestimmten Wert hat. So sucht man alle <img>-Tags mit einem alt-Attribut: $(‚img[alt]‘)

Es gibt mehrere verschiedene Attributsselektoren:

[Attribut] wählt Elemente aus, denen in HTML das angegebene Attribut zugewiesen wurde. $(a[href]) sucht beispielsweise alle <a>-Tags mit einem href-Attribut.
[Attribut = Wert] wählt Elemente aus, die ein Attribut mit einem bestimmten Wert haben. So findet man z.B. alle Textfelder in einem Formular: $(‚input[type=text]‘)
[Attribut^=Wert] matcht Elemente mit einem Attribut, das mit einem bestimmten Wert beginnt. Wenn man z.B. Links finden möchte: $(‚a[href^=http://]‘)
[Attribut$=Wert] matcht Elemente, deren Attribut mit einem bestimmten Wert endet. z.B.: $(‚a[href$=.pdf]‘)
[Attribut*=Wert] matcht Elemente deren Attribut einen bestimmten Wert an beliebiger Stelle enthält.

jQuery Filter

jQuery bietet auch die Möglichkeit die Auswahl anhand bestimmter Kriterien zu filtern.

:even und :odd selektieren jdes zweite Element einer Gruppe. Jedes Element einer jQuery auswahl hat einen Index. Indizes beginnen auch hier immer nei 0. :even filtert jeden geradzahligen Indexwert (0, 2, 4) und liefert entsprechend das erste, dritte, fünfte, … Element. Der :odd-Filter wählt jeden ungeraden Index.
:not() damit selektiert man Elemente, die zu keinem bestimmten Selektortyp gehören. Man übergibt der :not()-Funktion die Namen des Selektors, welchen man ignorieren möchte
:has() findet Elemente, die einen anderen Selektor enthalten (hier gibt es einen Unterschied zum Nachkommensselektor, also nicht verwechseln, denn es werden nur die enthaltenen ausgewählt)
:contains() findet Elemente, die einen bestimmten Text enthalten
:hidden sucht versteckte Elemente: die, die von display auf none gesetzt wurden (CSS9, die die man mit der hide()-Funktion von jQuery ausblendet und versteckte Formularfelder.
:visible ist das Gegenteil von :hidden. Dadurch werden Elemente gefunden, die auf der Seite sichtbar sind.

jQuery-Auswahl verstehen

Die Elemente, die von jQuery ausgewählt werden, beherrschen nicht die DOM-Methoden. So kann man z.B. nicht die innerHTML-Eigenschaft mit einem jQuery-Objekt verwenden. Dafür gibt es aber sehr viele ähnliche Methoden, wie die des DOM.

Automatische Schleifen

Das ist wesentlich einfacher bei jQuery. Da das Durchlaufen einer Sammlung von Elementen so häufig vorkommt, ist diese Funktion bereits integriert. Wenn man also eine jQuery-Funktion auf eine Auswahl von Elementen anwendet, muss man selbst keine Schleife erstellen. Das tut jQuery automatisch (und das finde ich super, denn um ehrlich zu sein hasse ich es Schleifen zu programmieren).

um z.B. alle Bilder innerhalb eines <div>-Tags mit der ID diashow auszuwählen und auszublendenn schreibt man:

$(‚#diashow img‘).hide();

Das ist doch mal praktisch, oder ?

Funktionen verketten

Wenn man mehrere Operationen mit einer Auswahl von Elementen durchführen möchte, kann man sie mit jQuery einfach verketten. Zum Beispiel kann man die Höhe und Breite eines <div>-Tags auf einmal ändern (in einer Zeile wohlgemerkt!)

$(‚#popUp‘).wifth(300).height(300);

Mit Verkettung kann man eine Funktion nach der anderen ausführen, die einfach mit einem Punkt verbunden werden.

Inhalte einer Seite hinzufügen

jQuery bietet viele Funktionen, um Elemente zu manipulieren und Inhalte einer Seite hinzuzufügen.

.html() funktioniert wie innerHTML. Damit wird das derzeitige HTML in einem Element ausgelesen, oder durch anderes HTML ersetzt
übergibt man einen String als Argument an .html(), ersetzt man den aktuellen Inhalt der Auswahl
append() fügt HTML als letztes Kindelement des ausgewählten Elements ein. Sie ist eine tolle Möglichkeit, um Elemente am Ende einer Liste mit Aufzählungszeichen (<ul>), oder einer nummerierten Liste (<ol>) einzufügen.
prepend() arbeitet genau wie append(), nur fügt es das HTML direkt nach dem öffnenden Tag der Auswahl ein.
Wenn man HTML außerhalb einer Auswahl einfügen möchte (also vor, oder nach dem öffnenden und schließenden Tag), verwendet man before() und after().

Auswahl ersetzten und entfernen

Manchmal möchte man ein ausgewähltes Element komplett ersetzen, oder entfernen. Wenn z.B. der Besucher der Website auf den Schließen-Button klickt, sollte natürlich auch der Dialog von der Seite entfernt werden. Hierfür kann man remove() verwenden. Wenn der Pop-up-Dialog die ID popup hat, kann man ihn mit dem folgenden Code löschen:

$(‚#popup‘).remove();

remove kann jedoch auch auf ganze Tags angewendet werden. Möchte man alle <span>-Tags der Klasse fehler löschen, dann schreibt man: $(’span.fehler‘).remove();

Man kann eine Auswahl auch mit neuem Inhalt ersetzen. Möchte man ein Bild, mit einem Text tauschen, wenn der Besucher einer Website auf das Bild klickt dann kann man schreiben (falls es ein Bild mit der ID nimbus2000 gibt):

$(‚#nimbus2000).replace(‚<p>schneller als der Wind</p>);

Dieser Code entfernt das <img>-Tag und ersetzt es durch ein <p>-Tag.

mit clone() kann man eine Kopie des ausgewählten Elements machen.

Klassen

addClass() fügt die angegebene KLasse dem Element hinzu. Man schreibt addClass() direkt nach einer jQuery-Auswahl und übergibt der Funktion einen String mit dem gewünschten Klassennamen. Wenn man beispielsweise allen Links, die auf externe Webseiten verweisen, die Klasse externerLink hinzufügen: $(‚a [href^=http://]‘).addClass(‚externerLink‘); Das nützt aber erst etwas, wenn man eine CSS-Stilklasse erstellt und in das Stylesheet der Seite einfügt.
removeClass() entfernt die Klasse von den ausgewählten Elementen
Außerdem kann man Klassen „toggeln“- also die Klasse hinzufügen, wenn sie noch nicht vorliegt, oder die Klasse entfernen, wenn sie vorliegt (hilfreich, wenn die Website geändert werden soll, wenn man auf einen Button klickt).

CSS Eigenschaften lesen und ändern

Die css()-Funktion von jQuery kann die CSS-Eigenschaften eines Elements direkt ändern. Statt eine Stilklasse auf ein Element anzuwenden, kann man damit auch direkt die Hintergrundfarbe hinzufügen, etc. Die Funktion kann man auf drei Arten verwenden: den aktuellen Wert der CSS-Eigenschaft eines Elements feststellen, ein einzelne CSS-Eigenschaft festlegen, oder mehrere CSS-Eigenschaften auf einmal setzen.

So findet man z.B die Hintergrundfarbe eines <div>-Tags mit der ID einhorn heraus:

var bgColor = $(‚#einhorn‘).css(‚backgreound-color‘);

um eine Eigenschaft festzulegen, übergibt amn zwei Argumente: den Namen der CSS-Eigenschaft und einen Wert:

$(‚body‘).css(‚font-size‘, ‚200%‘);

hiermit wird die Schriftgröße für das <body>-Tag auf 200% gestellt.

(Da ich den Text (s.o.) nicht wirklich kürzen konnte, da es zum Verständnis nötig ist , musste ich den Text jetzt eben einmal screenshotten)

Mehrere CSS-Eigenschaften auf einmal ändern

Man kann auch mehrere CSS-Eigenschaften auf einmal ändern, ohne die css()-Funktion mehrmals aufrufen zu müssen. Man kann ein sogenanntes Objektliteral an die .css()-Funktion übergeben. Zum Beispiel:

{‚background-color‘ : ‚#FF0000‘, ‚border‘ : ‚2px solid #FE0037‘}

meistens wird das aber eher untereinander geschrieben, da es somit für uns Menschen ein wenig übersichtlicher erscheint.

hier folgt eine kurze Erklärung zu dem oben stehenden Code:

Um ein Objektliteral mit der css()-Funk

tion zu verwenden, übergibt man es einfach so an die Funktion:

Eigentlich handelt es sich hierbei nur um eine einzige Codezeile, denn das Semikolon steht am Ende (Z.4).

HTML-Attribute lesen, festlegen und löschen

Mit der attr()-Funktion kann man das angegebene HTML-Attribut eines Tags lesen und gibt den im HTML festgelegten Attributert zurück.

Übergibt man der attr()-Funktion ein zweites Argument, legt man das Attribut des Tags fest.

$(‚#mops img‘).attr(’src‘, ‚bilder/mopsImGras.png‘);

Wenn man ein Attribut von einem Tag komplett entfernen möchte verwendet man die removeAttr()-Funktion. Dieser Code entfernt die bgColor-Eigenshcaft vom <body>-Tag:

$(‚body‘).removeAttr(‚bgColor‘);

Weitere Funktionen

.fadeOut() lässt ein Element langsam verschwinden. Wenn diese Funktion auf eine jQuery-Auswahl mit mehreren Elementen angewendet wird, durchläuft die Funktion alle Elemente der Auswahl und blendet jedes Element aus.
.each() wird verwendet, wenn eine Auswahl an Elementen in einer Schleife durchlaufen werden und man eine Reihe von Aktionen mit jedem Element durchführen möchte

Anonyme Funktionen

Um die each()-Funktion zu verwenden, übergibt man eine anonyme Funktion. Diese ist eine Funktion mit den Schritten, die man für jedes ausgewählte Element ausführen möchte. Anonym deshalb, weil sie keinen Namen hat, deshalb kann man sie auch nicht aufrufen. Stattdessen, verwendet man sie als Argument, das man an eine andere Funktion übergibt. So baut man eine anonyme Funktion auf:

function (){

//Hier kommt der Code hin

}

und so baut man sie in die each()-Funktion ein:

$(#Selektor‘).each(function(){

//Hier kommt wieder der Code hin

};

this und $(this)

Wenn man die each()-Funktion verwendet, möchte man ja auch auf die Attribute der Elemente zugreifen, oder diese festlegen. Auf das aktuelle Element in einem Schleifendurchlauf greift man mit this zu. this bezieht sich immer auf das Element, mit dem die anonyme Funktion aufgerufen wurde.

jQuery arbeitet dabei so, dass sich this auf ein traditionelles DOM-Element bezieht, sodass man auch auf traditionelle DOM-Eigenschaften, wie z.B. innerHTML oder childNodes zugreifen kann. Um this in ein jQuery-Äquivalent umzuwandeln, schreibt man $(this).

Hier wird zuerst eine neue Variable erstellt(extLink) un der Wert der href-Eigenschaft des aktuellem Elements darin gespeichert. Bei jedem Durchlauf durch die Schleife bezieht sich $(this) auf einen anderen Link auf der Seite, sodass sich bei jedem Durchlauf die Variable extLink ändert.

Das $(this)-Schlüsselwort wird fast jedes Mal verwendet, wenn die each()-Funktion angewendet wird.

jQuery

Teilen mit: