jQuery in der Praxis - Leseprobe - ciando ebooks · dem Document Object Model (DOM) und Cascading Style Sheets (CSS) funktioniert, wie jQuery für Ajax-Anwendungen eingesetzt wird

Lars SchmidtKnow-how

ist blau.

jQuery in der Praxis

> Das JavaScript-Framework im täglichen Programmiereinsatz

> Animation und Effekte, Ajax und JSON

> Navigationsmenüs mit jQuery realisieren

Mit jQuery wird die Programmierung von Webanwendungen

radikal vereinfacht. Diese JavaScript-Klassenbibliothek erleichtert

unter anderem die Manipulation von Webseiten-Elementen,

die Entwicklung von Ajax-Applikationen sowie das Erzeugen

von Animationen. Lars Schmidt zeigt in diesem Buch anhand

von Beispielen aus der Praxis, wie das Zusammenspiel mit

dem Document Object Model (DOM) und Cascading Style

Sheets (CSS) funktioniert, wie jQuery für Ajax-Anwendungen

eingesetzt wird und wie Sie Ihre Webseiten mit auffälligen

Effekten und Funktionen ausstatten.

� Effekte und Animationen mit jQueryMittlerweile werden HTML-Elemente oft per Sliding auf Webseiten

ein- und ausgefahren bzw. per Fading ein- und ausgeblendet. Mit dem

Easing bietet jQuery darüber hinaus einen Parameter, der besondere

Einstellmöglichkeiten für einen spektakulären benutzerdefinierten

Animationsverlauf bietet. Die besonderen grafischen Darstellungen in

diesem Buch zeigen Ihnen, wie sich die jeweiligen Einstellungen auf

den Verlauf der Animation auswirken.

� Warenkorb mit Drag and DropIntuitive Bedienung bedeutet bei einem Warenkorb, dass man die Produkte

mit einem Mausklick aufnimmt und über dem virtuellen Warenkorb wieder

fallen lässt. Wie dies mit jQuery realisiert wird und auch das Sortieren

von Produktlisten mit Drag and Drop erfolgen kann, zeigen Ihnen die

Beispiele in diesem Buch.

� Google Maps einbinden mit zusätzlichen FunktionenEine eingebundene Karte von Google Maps ist auf vielen Webseiten eine

Selbstverständlichkeit. Aber diese Karte mit zusätzlichen Funktionen

auszustatten, z. B. einer eigenen Entfernungsmessung für die Verbindung,

gehört zu den Besonderheiten, die Ihre Webseite auffällig machen. Hier

wird gezeigt, wie Sie solche Funktionalitäten mit Hilfe von jQuery erzeugen.

Aus dem Inhalt:• Was ist jQuery?

• Was kann jQuery?

• Die Entwicklungsumgebung einrichten

• jQuery einbinden

• Erste Erfolge an kleinen Beispielen

• Die Selektoren

• Das jQuery-Objekt

• Manipulieren von Elementeigenschaftenmittels jQuery-Methoden

• Formulare und jQuery

• Ajax und JSON

• Ereignisse: Events und Event Handling

• Animationen und Effekte: Sliding, Fading,Easing

• Das jQuery UI

• Drag and Drop

• Einen Warenkorb mit Drag and Drop erstellen

• Mehrstufige Navigationsmenüs

• Google Maps mit jQuery nutzen

• Eine Live-Suche als jQuery-Plug-in realisieren

• Tipps und Tricks

Über den Autor:IT-Profi Lars Schmidt ist seit 1995 als Software-entwickler in unterschiedlichen Unternehmentätig. Daneben hat er immer wieder auch eigene Software-Produkte entwickelt, z. B. die Audio-Software „Sonoscope“ für die Real-Time-Spektrum-Analyse, und Fachbeiträge inZeitschriften veröffentlicht. Sein Schwerpunktliegt seit einigen Jahren auf den Themen derWebentwicklung.

Auf www.buch.cdDer komplette Beispielcode aus dem Buch zum Download.

Lars Schmidt

30,– EUR [D]

ISBN 978-3-645-60100-9

Besuchen Sie unsere Website

www.franzis.de

Erleichtern Sie sich die Webseitenprogrammierung mit dem erfolgreichsten JavaScript-Framework!

Schm

idt

Web-Entwicklung

jQue

ry in

der

Pra

xis


60100-9 U1+U4 03.07.12 15:57 Seite 1

Lars Schmidt


60100-9 Titelei 03.07.12 16:00 Seite 1

jQuery

Mit 88 Abbildungen

Lars Schmidt

60100-9 Titelei 03.07.12 16:00 Seite 3

Bibliografische Information der Deutschen Bibliothek

Die Deutsche Bibliothek verzeichnet diese Publikation in der Deutschen Nationalbibliografie;

detaillierte Daten sind im Internet über http://dnb.ddb.de abrufbar.

Alle Angaben in diesem Buch wurden vom Autor mit größter Sorgfalt erarbeitet bzw. zusammengestellt und unter Einschaltung wirksamer

Kontrollmaßnahmen reproduziert. Trotzdem sind Fehler nicht ganz auszuschließen. Der Verlag und der Autor sehen sich deshalb gezwungen,

darauf hinzuweisen, dass sie weder eine Garantie noch die juristische Verantwortung oder irgendeine Haftung für Folgen, die auf fehlerhafte

Angaben zurückgehen, übernehmen können. Für die Mitteilung etwaiger Fehler sind Verlag und Autor jederzeit dankbar. Internetadressen

oder Versionsnummern stellen den bei Redaktionsschluss verfügbaren Informationsstand dar. Verlag und Autor übernehmen keinerlei

Verantwortung oder Haftung für Veränderungen, die sich aus nicht von ihnen zu vertretenden Umständen ergeben. Evtl. beigefügte oder

zum Download angebotene Dateien und Informationen dienen ausschließlich der nicht gewerblichen Nutzung. Eine gewerbliche Nutzung

ist nur mit Zustimmung des Lizenzinhabers möglich.

© 2012 Franzis Verlag GmbH, 85540 Haar bei München

Alle Rechte vorbehalten, auch die der fotomechanischen Wiedergabe und der Speicherung in elektronischen Medien. Das Erstellen und

Verbreiten von Kopien auf Papier, auf Datenträgern oder im Internet, insbesondere als PDF, ist nur mit ausdrücklicher Genehmigung des

Verlags gestattet und wird widrigenfalls strafrechtlich verfolgt.

Die meisten Produktbezeichnungen von Hard- und Software sowie Firmennamen und Firmenlogos, die in diesem Werk genannt werden,

sind in der Regel gleichzeitig auch eingetragene Warenzeichen und sollten als solche betrachtet werden. Der Verlag folgt bei den Produkt-

bezeichnungen im Wesentlichen den Schreibweisen der Hersteller.

Lektorat: Anton Schmid

Satz: DTP-Satz A. Kugge, München

art & design: www.ideehoch2.de

Druck: GGP Media GmbH, Pößneck

Printed in Germany

ISBN 978-3-645-60100-9

60100-9 Titelei 03.07.12 16:00 Seite 4

5

Inhaltsverzeichnis

1 jQuery kennenlernen ..................................................................................... 7 1.1 Was ist jQuery? ................................................................................ 7 1.2 Was kann jQuery?........................................................................... 16 1.3 Warum jQuery?............................................................................... 16

2 Einrichten der Entwicklungsumgebung ........................................................ 19 2.1 Betriebssystem(e) .......................................................................... 19 2.2 Die jQuery-Library .......................................................................... 19 2.3 Editoren und IDEs ........................................................................... 20 2.4 Browser.......................................................................................... 27 2.5 Webserver ...................................................................................... 28 2.6 Tipps zur Arbeit mit XAMPP ............................................................ 35

3 Aller Anfang ist »leicht«! – der Einstieg mit jQuery....................................... 43 3.1 jQuery einbinden............................................................................ 43 3.2 Erste Erfolge an kleinen Beispielen................................................. 44 3.2.1 Alte Bekannte? – Die Selektoren ...................................................... 48

4 Es geht ans Eingemachte! – Die Funktionen von jQuery................................ 57 4.1 Das jQuery-Objekt .......................................................................... 57 4.2 Die Funktion $() .............................................................................. 60 4.3 Manipulieren von Elementeigenschaften mittels jQuery-

Selektoren und -Methoden............................................................. 61 4.3.1 Lesen und Ändern von Attributen ..................................................... 63 4.3.2 Elemente positionieren und formatieren – die CSS-

Eigenschaften .................................................................................. 64 4.3.3 Aufheben einer Selektion................................................................. 71 4.3.4 Zuweisen von Text- und Elementinhalt ............................................. 72 4.3.5 Formulare und jQuery....................................................................... 94 4.3.6 Ajax und JSON.................................................................................. 95

6 Inhaltsverzeichnis

5 Ereignisse – Events und Event Handling..................................................... 111 5.1 Browser Events verstehen (HTML-DOM-Events) ............................ 111 5.2 jQuery-Events............................................................................... 114

6 Fades, Slides & Co – Animationen und Effekte ........................................... 123 6.1 Anzeigen und Verbergen .............................................................. 124 6.2 Anzeigestatus per Animation verändern ....................................... 125 6.2.1 Sliding – Bewegtes Ein- und Ausblenden ....................................... 125 6.2.2 Fading – Verändern der Transparenz.............................................. 127 6.2.3 Benutzerdefinierte Animationen .................................................... 128 6.2.4 Der Animationsverlauf – easing ..................................................... 132

7 Setzen Sie Ihr gelerntes Wissen ein – jQuery in der Praxis ......................... 139 7.1 Drag and Drop .............................................................................. 139 7.1.1 Das jQuery User Interface (jQuery UI) im Überblick ......................... 151 7.1.2 Artikel per Drag and Drop in den Warenkorb legen ......................... 156 7.1.3 Sortieren per Drag and Drop........................................................... 182 7.2 Navigationsmenüs ....................................................................... 191 7.2.1 Mehrstufige Navigationsmenüs ..................................................... 192 7.2.2 Menüs dynamisch verwalten.......................................................... 197 7.3 Google Maps mit jQuery nutzen.................................................... 204 7.4 Die »Live-Suche« – Ein Plug-in mit jQuery realisieren ................... 227

8 Anhang...................................................................................................... 237 8.1 HTML, X[HT]ML & CSS................................................................... 237 8.2 XPath ........................................................................................... 239 8.3 Tipps & Tricks............................................................................... 239 8.3.1 Browser und dessen Fähigkeiten erkennen .................................... 239 8.3.2 jQuery ohne Konflikte mit anderen Librarys benutzen .................... 243 8.3.3 Das »Ready«-Ereignis von jQuery verzögern ................................... 243 8.4 jQuery-Kurzreferenz (Version 1.7.2).............................................. 244 8.5 Nützliche Links............................................................................. 249

Stichwortverzeichnis ................................................................................. 251

43

3 Aller Anfang ist »leicht«! – der Einstieg mit jQuery

3.1 jQuery einbinden

Um jQuery nutzen zu können, muss die Library in Ihr Projekt eingebunden werden. Das können Sie auf verschiedene Arten tun – entweder von Ihrem Server bzw. einem lokalen Ordner auf Ihrer Festplatte (falls eine Internetverbindung zunächst nicht nötig ist), oder Sie benutzen zum Beispiel die bei Google CDN (Content Distribution Net-work, oder auch Content Delivery Network) gehostete Version. Letzteres kann in eini-gen Fällen von Vorteil sein, da die Library von vielen Internetseiten genutzt wird und sich meistens schon im Browser-Cache befindet. Außerdem entstehen Ihnen keine zusätzlichen Kosten für übertragene Datenvolumen.

Die Einbindung von jQuery ist denkbar einfach und funktioniert analog zu anderen JavaScript-Datei, wie die folgenden Quellcode-Ausschnitte zeigen:

Einbinden über das Google CDN:

<script type="text/javascript"

src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></scrip

t>

Einbinden über eine eigene Quelle:

<script type="text/javascript" src="Pfad/zu/jQuery/jquery-1.7.min.js

"></script>

jQuery steht in zwei Varianten zur Verfügung – in einer minimierten Version und in einer »unkomprimierten« Version. Minimiert bezieht sich hier keinesfalls auf den Umfang oder die Leistung der Library, sondern einzig und allein auf die Dateigröße – so wurde hier auf jegliche Art von Whitespace und Kommentaren verzichtet. Das macht natürlich den Quellcode unleserlicher und schwerer nachvollziehbar. Deshalb ist es während der Entwicklung ratsam, die unkomprimierte Version zu benutzen, damit das Debuggen eventueller JavaScript-Fehler leichter fällt.

Für das endgültige Projekt empfehle ich Ihnen die minimierte Version von jQuery zu nutzen, da diese wesentlich kleiner und somit auch sehr viel schneller geladen ist (zum Vergleich: bei der momentan aktuellen Version 1.7 sind es 31 Kilobyte zu 229 Kilobyte)

44 Kapitel 3: Aller Anfang ist »leicht«!

3.2 Erste Erfolge an kleinen Beispielen

Zunächst wollen wir unser HTML-Grundgerüst betrachten. Auch wenn jeder sich nach HTML5 sehnt, so wird es momentan von den Browsern doch noch nicht komplett unterstützt (es gibt einige interessante Erweiterungen, aber dazu mehr in Kapitel 8). Um dennoch möglichst zukunftssicher und kompatibel zu bleiben, werden wir in all unseren Beispielen den XHTML-Standard mit dem Zeichensatz UTF-8 verwenden (aufgrund der besseren Überschaubarkeit schreibe ich jedoch in den weiteren Beispiel-Listings hier im Buch nur das <html>-Tag!).

Wenn wir von Anfang an mit UTF-8 arbeiten, hat das den großen Vorteil, dass Sie später ohne große Probleme die Möglichkeit haben, Mehrsprachigkeit in Ihre Projekte einzubauen und auch die entsprechende Schriftkultur wie zum Beispiel kyrillische, arabische oder chinesische bzw. japanische Schriftzeichen richtig darstellen können. Dabei müssen natürlich noch einige Punkte mehr beachtet werden, aber dies soll ja hier erst einmal eine Vorbereitung, also ein solides Grundgerüst, sein. So muss bei der Datenbank die Kollation der Tabellen und auch die Kollation der Verbindung auf UTF-8 eingestellt werden. Ein wichtiger Punkt ist allerdings direkt zu berücksichtigen: Wir müssen darauf achten, dass wir unsere Dateien auch im UTF-8 Format abspeichern, was aber mit den zuvor genannten Editoren kein Problem darstellt. Hier ein Beispiel unserer HTML-Vorlage:

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>

<title></title>

<meta http-equiv="content-type"

content="text/html;charset=UTF-8" />

<script type="text/javascript" src="../jquery/jquery-

1.7.js"></script>

<script type="text/javascript" src="../jquery/js/

jquery-ui-1.8.16.custom.min.js"></script>

<style type="text/css">



</style>

<script type="text/javascript">

//<![CDATA[

3.2 Erste Erfolge an kleinen Beispielen 45

//]]>

</script>

</head>

<body>

</body>

</html>

Schauen wir uns die einzelnen Punkte noch einmal genauer an:

• Zunächst die Dokumenttyp-Deklaration für XHTML

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

• dann folgen die Kopfdaten mit Titel, Meta-Angaben, Styles, JavaScript usw.

<head>

<title></title>

die folgende Anweisung ist nötig für den IE, damit

auch dort der richtige Zeichensatz angezeigt wird.



jQuery und jQuery UI einbinden

<script type="text/javascript" src="../jquery/jquery-

1.7.js"></script>

<script type="text/javascript" src="../jquery/js/

jquery-ui-1.8.16.custom.min.js"></script>




</style>



//<![CDATA[

… weiterer JavaScript bzw. jQuery Code …

//]]>

</script>

</head>

• jetzt kommen die Körper- bzw. Rumpfdaten, also der eigentliche Inhalt der Seite wie Texte, Bilder, Links, usw.

<body>

… hier steht der anzuzeigende Inhalt …

</body>

• zum Schluss muss noch unser <html>-Tag von der Dokumenttyp-Deklaration wieder geschlossen werden.

</html>

Tipp: Der Header-Bereich (<head>..</head>) wird auf der Seite selbst nicht angezeigt, er kann (optional) Definitionen und Anweisungen für Web-Server, Web-Browser oder auch Suchmaschinen enthalten, die über die sogenannten Meta-Angaben gemacht werden. Diese können auch Angaben zum Autor und zum Inhalt der Datei enthalten oder HTTP-Befehle absetzen und so zum Beispiel den Web-Browser auto-matisch zu einer anderen Adresse weiterleiten. Des Weiteren können auch Anweisungen über das Erscheinungsbild in Form von CSS-Angaben, sowie JavaScript-Definitionen im Header-Bereich stehen.

Nun gilt es noch zu klären, wo eigentlich der »Entry Point« (Eingangspunkt) von jQuery ist. Sicherlich ist Ihnen von der Arbeit mit »normalem« JavaScript Folgendes bekannt:

window.onload = function() {

alert("Das Dokument ist nun vollständig geladen.");

}

Hier wird window.onload aber erst aufgerufen, wenn ausnahmslos alle Elemente des Dokuments geladen sind – also auch alle Bilder, Styles und so weiter, was unter Umständen schon mal ein wenig länger dauern kann. Hier bietet jQuery eine Methode, die bereits nach dem Laden des DOM zur Verfügung steht. Das heißt, sobald also das HTML-Dokument geladen und der DOM-Baum fertig aufgebaut ist, sind alle Elemente der Seite ansprechbar beziehungsweise der Quellcode ist ausführbar, auch wenn noch nicht alle Objekte, wie eben die Bilder, geladen sind.


$(document).ready( function() {

alert("Der DOM-Baum ist nun fertig aufgebaut und alle

Elemente können selektiert werden.");

} );

Die Funktion $(document).ready() macht es uns auch möglich, die gesamte JavaScript-Programmierung in den Header-Bereich zu verlagern und ausschließlich den Seitenauf-bau mit dem eigentlichen Inhalt (HTML) im Body-Bereich zu notieren. Auf diese Weise erhält man eine gewisse Ordnung und auch Übersichtlichkeit, und man hat vor allem Logik und Inhalt klar getrennt.

Machen wir uns die kurz klar, indem wir versuchen, das folgende Beispiel mit »norma-lem« JavaScript-Code auszuführen:

<html>

<head>




alert(document.getElementById("content")

.innerHTML);

</script>

</head>

<body>

<div id="content">hier steht unser Inhalt!</div>

</body>

</html>

Vorhin hatte ich erwähnt, dass es wünschenswert ist, auch die gesamte Logik im Header-Bereich vorzufinden. Aus den oben genannten Gründen funktioniert dies aber in der Praxis leider nicht immer so mit dem »normalen« JavaScript-Part, da HTML-Elemente, auf die man eventuell zugreifen möchte, an dieser Stelle (im Header) noch nicht im Browser-Speicher verfügbar gemacht wurden, d. h., sie existieren zu diesem Zeitpunkt noch nicht für JavaScript.

Tipp: Die .ready()-Funktion wird ausgeführt, sobald das DOM fertig aufgebaut ist, unabhängig davon, ob alle Objekte zu diesem Zeitpunkt schon geladen sind. Sie ist allerdings nicht kompatibel mit dem <body onload="">-Attribut. Wenn dieses aus irgendeinem Grund genutzt werden muss, sollte .ready() nicht zusätzlich genutzt werden. Hier kann allerdings die .load()-Methode zum Einsatz kommen, um Load Event Handler an das window-Objekt oder andere Elemente zu binden.


3.2.1 Alte Bekannte? – Die Selektoren

Und damit sind wir auch schon bei den »Selektoren«. Diese spielen beim Programmie-ren mit jQuery eine wichtige Rolle und stellen gleichzeitig auch eine der größten Stärken der Library dar. Wenn Sie Selektoren vielleicht schon von der Arbeit mit CSS kennen, werden Sie sofort mit den jQuery-Selektoren vertraut sein und auch schnell Ihre Freude daran haben. Die Syntax der jQuery-Selektoren basiert nämlich zum großen Teil auf den CSS-Selektoren (CSS 1-3) und gerade bei der CSS-3-Kompatibilität hat jQuery zum Teil noch einen großen Vorsprung vor mancher Browser-Implementierung.

Um ein Element beziehungsweise eine Gruppe von Elementen zu selektieren, benutzen wir folgende Syntax:

jQuery(Selektor)

oder kurz

$(Selektor)

Als Nächstes möchten wir mit unserem selektierten Element noch etwas machen. Dazu hängen wir noch eine entsprechende Funktion an (konkret wird dann das gefundene Element an die folgende Funktion übergeben):

jQuery(Selektor).Funktion()

oder

$(Selektor).Funktion()

Tipp – das Grundprinzip von jQuery ist also denkbar einfach:

• finde HTML-Elemente im DOM-Baum

• mach etwas damit

Fangen wir mit einem kleinen Beispiel an, indem wir einfach einmal die Formatierung eines Elements mit einer bestimmten ID ändern wollen:

jQuery("#meineID").css({color: 'Farbwert'})

<html>

<head>




</style>


//<![CDATA[

$(function() {

$("#button1").bind('click', function() {

$("#infotext").css({color: '#ff0000'});

});

});

//]]>

</script>

</head>

<body>

<div id="infotext">

Lorem ipsum dolor sit amet consectetuer sed quis …

</div>

<p><input type="button" id="button1" value="Textfarbe

ändern ..."></p>

</body>

</html>

Bild 3.1: Standard-Formatierung (mit schwarzer Schrift)


Bild 3.2: Formatierung nach Änderung (Die Schrift ist nur rot)

In diesem Beispiel haben wir auch gleich einen jQuery-Event-Handler kennengelernt (mehr dazu in Kapitel 5):

$("#button1").bind('click', function() {

…

});

Hier »binden« wir ein Ereignis, in unserem Fall das Maus-»click«-Ereignis, an ein Element: Hier ist es unser Button (button1). Was bei dem »click« passieren soll, ist wiederum in einer eigenen Funktion gekapselt, und diese ändert in unserem Beispiel die Farbe des Elements mit der ID »infotext« über eine CSS-Zuweisung:

$("#infotext").css({color: '#ff0000'});

Mit einem weiteren Beispiel möchten wir alle Links innerhalb von div-Elementen selek-tieren. Unser Selektor dafür würde dann folgendermaßen aussehen:

jQuery("div a")

<html>

<head>




</style>


//<![CDATA[

$(function() {

$("div a").addClass("linksindiv");

});

//]]>

</script>

</head>

<body>

<div>

<a href="#">Dieser Link befindet sich in einem

DIV-Element</a>

</div>

<div>

<a href="#">Dieser Link ebenfalls</a>

</div>

<p><a href="#">Dieser Link nicht mehr</a></p>

</body>

</html>

Bild 3.3: Spezielle Formatierung für Links innerhalb von div-Elementen


Darüber hinaus bietet jQuery auch noch einige Pseudo-Selektoren beziehungsweise Filter. Mit diesen lassen sich beispielsweise nur eine bestimmte Gruppe von Elementen auswählen oder auch sehr schnell alle geraden bzw. ungeraden Zeilen einer Tabelle selektieren und einfärben, wie die folgenden kleinen Codeausschnitte zeigen:

$(":input") – Alle Input-Elemente werden selektiert

<html>

<head>

<title>Input-Elemente</title>


//<![CDATA[

$(function() {

$("#toggleActive").bind("change", function() {

if ($('#toggleActive').is(':checked')) {

$("#myInputs :input").attr("disabled", true);

} else {

$("#myInputs :input").removeAttr('disabled');

}

});

});

//]]>

</script>

</head>

<body>

<div id="myInputs">

<p>Name:<br><input name="name" type="text" size="30"

maxlength="30" /></p>

<p>Vorname:<br><input name="vorname" type="text" size="30"


<p>Straße:<br><input name="str" type="text" size="30"


<p>PLZ:<br><input name="plz" type="text" size="30"


<p>Ort:<br><input name="ort" type="text" size="30"


</div>

<p>alle Eingabefelder deaktivieren: <input type="checkbox"

id="toggleActive" name="toggleActive" /></p>

</body>

</html>


Bild 3.4: Eingabefelder sind aktiv

Bild 3.5: Eingabefelder sind deaktiviert

Hier binden wir das »change«-Ereignis an eine Checkbox mit der ID »toggleActive«. Wenn diese das Attribut checked aufweist (also gesetzt ist), dann bekommen alle Input-Elemente innerhalb des Blocks myInputs das Attribut disabled mit dem Wert true (deaktiviert). Andernfalls wird bei den entsprechenden Input-Elementen das Attribut disabled entfernt, und diese sind somit wieder aktiv.

$("#toggleActive").bind("change", function() {

if ($('#toggleActive').is(':checked')) {

$("#myInputs :input").attr("disabled", true);

} else {


$("#myInputs :input").removeAttr('disabled');

}

});

Alle geraden Zeilen einer Tabelle werden gefärbt

$("tr:even").css("background-color", "Farbwert");

<html>

<head>




</style>


//<![CDATA[

$(function() {

$("#tabelle_1 tbody tr:even").css("background-

color", "gray");

});

//]]>

</script>

</head>

<body>

<table id="tabelle_1" rules="groups" border="0"

span="0" style="border-spacing:0px; margin:0;

padding:0">

<colgroup>

<col width="200">

<col width="200">

<col width="50">

</colgroup>

<thead>

<tr> <th>Titel</th> <th>Interpret</th>

<th>Jahr</th> </tr>

</thead>

<tbody>

<tr> <td>The Wall</td> <td>Pink Floyd</td>

<td>1979</td> </tr>

<tr> <td>Some Great Reward</td> <td>Depeche

Mode</td> <td>1984</td> </tr>

<tr> <td>The Anvil</td> <td>Visage</td>


<td>1982</td> </tr>

<tr> <td>Blue Planet</td> <td>Moskwa TV</td>

<td>1987</td> </tr>

<tr> <td>A Secret Wish</td> <td>Propaganda</td>

<td>1985</td> </tr>

</tbody>

</table>

</body>

</html>

Bild 3.6: Formatierte Tabelle

Hier selektieren wir alle geraden Tabellenzeilen (tr:even – der Index beginnt bei 0!) innerhalb des tbody von der Tabelle mit der ID »tabelle_1« und ändern die Hinter-grundfarbe mittels CSS-Zuweisung in Grau.

$("#tabelle_1 tbody tr:even").css("background-

color", "gray");

237

8 Anhang

8.1 HTML, X[HT]ML & CSS

HTML (Hypertext Markup Language = Hypertext-Auszeichnungssprache) ist eine auf SGML (Standard Generalized Markup Language) basierende Auszeichnungssprache, die es möglich macht, Dokumente in einer bestimmten Struktur in Bezug auf Inhalt und Formatierung darzustellen. Diese Strukturierung wird durch sogenannte Tags (Markierungen, Kennzeichnungen) erreicht, die in der Regel den zu strukturierenden Inhalt umhüllen (d. h. es gibt ein Start- und ein dazugehöriges End-Tag). Darüber hinaus gibt es auch noch einige spezielle Tags, mit denen erweiterte Zusammenhänge des Dokuments beschrieben werden können (siehe Kapitel 3.2). Die Tags selbst werden von spitzen Klammern umgeben, wobei die End-Tags zusätzlich noch einen Slash (/) vorangestellt bekommen. Nachfolgend einige kurze Beispiele:

<h1>eine Überschrift 1. Ordnung</h1> (h – heading=Überschrift)

<h2>eine Überschrift 2. Ordnung</h2>

<p>ein Absatz</p> (p – paragraph=Absatz)

<a href=" … ">ein Link</a> (a – anchor=Anker)

XML (Extensible Markup Language = erweiterbare Auszeichnungssprache) ist eine Auszeichnungssprache, die Text-Daten in hierarchisch strukturierter Form darstellen kann. XML wird unter anderem auch für den plattformunabhängigen Datenaustausch genutzt. Bei XML-Dokumenten gelten (anders als bei HTML) verschärfte Regeln, die eingehalten werden müssen. So muss ein XML-Dokument stets »wohlgeformt« (well-formed) sein, d. h., es muss zum Beispiel zu jedem Start-Tag auch ein abschließendes End-Tag existieren. Zudem muss am Anfang die Deklaration stehen, die den Bezug zu XML herstellt. Es muss genau ein Wurzelelement existieren (das ist das äußerste Element, das alle weiteren Datenelemente enthält – in unserem Beispiel <ADRESSDATENBANK>) und mindestens ein Datenelement (im Beispiel haben wir zwei <ADRESSE>). Ein XML-Kommentar wird genau so geschrieben wie in HTML (genauer gesagt wie in SGML, da HTML ja darauf basiert). Ein Beispiel in Form einer kleinen Adressdatenbank soll dies verdeutlichen:



<?xml version="1.0"?>



<ADRESSDATENBANK>



<ADRESSE>

238 Kapitel 8: Anhang

<VORNAME>Hans</VORNAME>

<NACHNAME>Mustermann</NACHNAME>

<STRASSE>Musterstraße 1</STRASSE>

<PLZ>12345</PLZ>

<ORT>Musterstadt</ORT>

</ADRESSE>



<ADRESSE>

<VORNAME>Josef</VORNAME>

<NACHNAME>Müller</NACHNAME>

<STRASSE>Müllerweg 1</STRASSE>

<PLZ>54321</PLZ>

<ORT>Müllerstadt</ORT>

</ADRESSE>

</ADRESSDATENBANK>

Bei XHTML (Extensible HyperText Markup Language = erweiterbare HTML) handelt es sich um eine auf XML-basierende Neuformulierung von HTML 4.01 (im Gegensatz zu HTML, was ja durch SGML definiert ist). Das heißt, alle Elemente von HTML 4.01 sind auch hier enthalten, aber die Syntax von XHTML orientiert sich eher an der Syntax von XML und natürlich auch deren Regeln im Bezug auf »Wohlgeformtheit« und so weiter.

Seit einiger Zeit kommt immer wieder die Diskusion auf, welches der bessere Standard für Internetseiten ist: HTML oder XHTML. Ich kann mich noch an Zeiten erinnern, als es hieß, dass HTML 4.01 wohl die letzte (reine) HTML-Version sei und in Zukunft wohl XHTML (also HTML mit XML) der Standard wird. Dies ist aber dann doch nicht so gekommen. Mit XHTML 2.0 gab es wohl nicht den gewünschten Durchbruch, und HTML5 ist ja auch schon da.

HTML5 ist eine Weiterentwicklung von HTML 4.01, XHTML 1.0 und DOM Level 2 HTML, in der man jeweils die Vorzüge dieser Technologien zusammengeführt hat. Es gibt auch einige vielversprechende Neuerungen, wie zum Beispiel das Canvas-Element – eine Zeichenfläche, die das dynamische Rendern von Bitmap-Grafiken erlaubt. Ebenfalls erwähnenswert ist die einfache Einbindung von SVG (Scalable Vector Graphics) und MathML (Mathematical Markup Language). Auch in Sachen Multimedia gibt es Vereinfachungen, denn hier erlauben die neuen Elemente Audio und Video eine leichte Einbindung dieser Daten.

Ebenso gibt es im Bezug auf die Notation einige neue Freiheiten, die aber eher als frag-würdig einzustufen sind (und zum Glück keine zwingende Vorschrift). So kann auf die Einhaltung von wohlgeformten Tags weitgehend verzichtet werden, und auch die umschließenden Anführungszeichen bei Attributwerten darf man weglassen. Meiner Meinung nach ist das ein Schritt in die falsche Richtung und regt eher ein wenig zum »Pfusch« an. Aber, na ja – spätestens wenn man Inhalte parsen muss, um diese beispiels-weise in ein anderes Format zu konvertieren, wird einem wohl schnell bewusst, dass wohlgeformte Dokumente letztendlich einen Vorteil darstellen.

8.2 XPath 239

8.2 XPath

Bei XPath (XML Path Language) handelt es sich um eine Abfragesprache, die dazu dient, die Knoten (oder auch Knotenmengen) eines XML-Dokuments über sogenannte Lokalisierungspfade zu adressieren. Das kann über die ausführliche oder verkürzte Notation erfolgen. Außerdem sind die Knoten eines XML-Dokuments sowohl mit rela-tiven als auch mit absoluten Pfaden adressierbar.

8.3 Tipps & Tricks

8.3.1 Browser und dessen Fähigkeiten erkennen

jQuery kümmert sich bei den meisten Angelegenheiten selbst um die Browser-Unter-schiede und gleicht diese aus (Cross-Browser-Fähigkeit). Sollte es aus irgendwelchen Gründen aber doch einmal notwendig sein, den verwendeten Browser explizit zu erken-nen, gibt es dafür viele verschiedene Möglichkeiten, von denen ich Ihnen hier einige vorstellen möchte.

Am Ende des Kapitels 1.1 haben wir in unserem Ajax-Beispiel (Pures JavaScript) bereits eine dieser Möglichkeiten kennengelernt, nämlich den benutzten Browser anhand der unterschiedlichen Implementierung des XMLHttpRequest-Objektes zu erkennen und entsprechend darauf zu reagieren.

var xmlHttp = null;

// Mozilla, Opera, Safari sowie Internet Explorer 7

if (typeof XMLHttpRequest != 'undefined') {

xmlHttp = new XMLHttpRequest();

}

// Internet Explorer 6 und älter

if (!xmlHttp) {

try {

xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");

} catch(e) {

try {

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

} catch(e) {

xmlHttp = null;

}

}

} if (xmlHttp != null) {

...

}


Eine weitere Möglichkeit ist die Abfrage des JavaScript-Objektes »Navigator«, das unter anderem folgende Informationen über den Browser liefert:

appCodeName � Code-Name des Browsers

(z. B. Mozilla; Vorsicht, der IE liefert hier auch Mozilla!)

appName � Name des Browsers (z. B. Netscape)

appVersion � Version des Browsers (z. B. 5.0 (Windows) )

cookieEnabled � sind Cookies erlaubt? (true oder false)

language � Standard-Sprache des Browsers (z. B. de-DE)

platform � das System, auf dem der Browser läuft (z. B. Win32)

userAgent � HTTP-Identifikation des Browsers

(z. B. Mozilla/5.0 (Windows NT 5.1; rv:12.0) Ge cko/20100101 Firefox/12.0)

javaEnabled() � ist Java verfügbar? (true oder false)

Beispiel:

alert(navigator.appCodeName);

Bild 8.1: Informationen des JavaScript-Objektes »Navigator« (Mozilla Firefox)

Speziell für den Internet-Explorer (ab der Version 5.0) bietet Microsoft mit den »Conditional Comments« (Bedingte Kommentare) die Möglichkeit, Browser-Typ und Version abzufragen. Von allen anderen Browsern werden diese einfach ignoriert:





8.3 Tipps & Tricks 241







Tipp: In den Conditional Comments können sogar Verknüpfungen und Vergleichs-operatoren genutzt werden, sodass beispielsweise folgendes Konstrukt möglich wäre:



Verknüpfungen:

& � "und"

| � "oder"

! � "nicht"

Vergleichsoperatoren:

lt � "less than" (kleiner als)

lte � "less than / equal" (kleiner gleich)

gt � "greater than" (größer als)

gte � "greater than / equal" (größer gleich)

Bild 8.2: Conditional Comments und das Navigator-Objekt (Internet-Explorer)


Die bis jetzt vorgestellten Methoden zielen alle auf die Erkennung des verwendeten Clients bzw. dessen Version ab (in jQuery gibt es dafür das jQuery.browser-Objekt, das aber seit der Version 1.3 als deprecated deklariert ist und daher nicht mehr genutzt werden sollte), aber wesentlich eleganter als (nur) den aktiven Browser zu erkennen, wäre es jedoch direkt zu ermitteln, was dieser kann (oder eben nicht)! Genau das macht man mit der sogenannten Feature-Detection (Eigenschafts-Erkennung), die auch von jQuery mit dem jQuery.support-Objekt unterstützt wird. Alle Eigenschaften dieses Objektes können wir mit der Funktion $.each() durchlaufen (Objektiteration) und uns die dazugehörigen Werte anzeigen lassen:

[Ausschnitt der Datei: kleine Beispiele\Browser_feature_detection.html]

// über das gesamte jQuery.support-Objekt iterieren und alle // Features

auflisten

$.each($.support, function(key, value){

var new_item = $("<li>").text(key + ' => ' + ((value == true) ? "ja" :

"nein")).appendTo(feature_list);

});

Bild 8.3: Die Eigenschaften von »jQuery.support«

Wie Sie im Beispiel sehen können, bietet das jQuery.support-Objekt eine Vielzahl von Möglichkeiten. Da diese aber bei der alltäglichen Arbeit im Allgemeinen nicht benötigt werden, sondern wenn überhaupt eher bei der Plug-in-Entwicklung zum Einsatz kom-men, möchte ich hier für nähere Details auf die offizielle Dokumentation der jQuery-Library verweisen. [http://api.jquery.com/jQuery.support/]

8.3 Tipps & Tricks 243

8.3.2 jQuery ohne Konflikte mit anderen Librarys benutzen

Falls außer jQuery zusätzlich noch andere JavaScript-Librarys genutzt werden, kann es zu Konflikten kommen, da diese unter Umständen auch das $-Zeichen als Shortcut benutzen (wie z. B. Prototype). Dies können Sie folgendermaßen umgehen:

// 1. Zugriff erfolgt über jQuery() (Standard)

// Bsp: aus $(’#navigation’) wird dann jQuery(’#navigation’) jQuery.noConflict(); // 2. Eine neue Variable (Shortcut) definieren

// Bsp: aus $(’#navigation’) wird dann j(’#navigation’) var j = jQuery.noConflict();

Alternativ kann auch der Handler-Funktion ein Parameter übergeben werden, der dem globalen jQuery-Objekt zugewiesen wird. Es wird also quasi das jQuery-Objekt (nur) im Kontext des Ready-Handlers umbenannt, ohne Einfluss auf den restlichen Quellcode zu haben.

jQuery.noConflict();

jQuery(document).ready(function($) {

// Hier kann dann wie gewohnt das $-Zeichen genutzt werden

});

Eine weitere Möglichkeit, solchen Konflikten aus dem Weg zu gehen, besteht darin, den gesamten Quellcode in eine selbstausführende, anonyme Funktion zu packen, der ebenfalls der Alias mit dem zugewiesenen jQuery-Objekt übergeben wird. Innerhalb dieser Funktion, sozusagen lokal, können wir dann auch problemlos unseren gewohnten Alias nutzen. Diese Methode findet bei dem »Drag-and-Drop-Warenkorb« aus Kapitel 7.1.3 Verwendung:

[Auszug aus der Datei: Warenkorb\cart.js]

(function($) { // Übergabe des neuen Alias

// … neuer Geltungsbereich mit dem $-Zeichen als Alias …

})(jQuery); // Zuweisung des jQuery-Objekts (an den Alias)

8.3.3 Das »Ready«-Ereignis von jQuery verzögern

Manchmal kann es gewünscht sein, das Ready-Ereignis von jQuery so lange zu unterbin-den, bis sichergestellt ist, dass vorher eigener JavaScript-Code ausgeführt wurde (z. B. das Laden von jQuery-Plug-ins usw.). Seit der jQuery-Version 1.6 können Sie das mit der .holdReady()-Methode. Dazu müssen Sie zunächst $.holdReady(true) aufrufen, um das Ready-Event zu blockieren und später (nach Ihrer entsprechenden Bedingung) $.holdReady(false), damit es schließlich aufgerufen werden kann. Es ist zu beachten,

251

Stichwortverzeichnis

$ $() 60

A Abbruch 112 Abort 112 Absenden eines Formulars

114 Accordion 151 Add Class 151 add_item() 174 after() 78 Ajax 15, 95, 197 Aktivieren 113 Alles-Selektor 64 Ändern der Größe 113 Änderung 113 animate() 128 animated-Selektor 68 Animation

Bildwiederholfrequenz 131 Framerate 131

Animationen Benutzerdefinierte 128

Animationsdauer 124 Animationsverlauf 124, 132 Anklicken 113 Anzeigen von Elementen 124 Anzeigestatus 125 appCodeName 240 append() 74 appendTo() 75 appName 240 appVersion 240 Aptana Studio 20

Asynchronous JavaScript and XML 95

attr() 63 Attribute 63 Attribute-Contains-Prefix-

Selektor 67 Attribute-Contains-Selektor

66 Attribute-Contains-Word-

Selektor 67 Attribute-Ends-With-Selektor

66 Attribute-Equals-Selektor 66 Attribute-Not-Equal-Selektor

66 Attribute-Starts-With-

Selektor 66 Attribut-Selektoren 65 Auszeichnungssprache 237 Autocomplete 151

B Basis-CSS-Selektoren 64 Basis-Filter 68 before() 80 Benutzeroberfläche 139 Betriebssystem 19 Bewegen der Maus 113 Bildwiederholfrequenz 131 bind() 114, 115 Blur 112 blur() 94 Brandenburger Tor 210 Browser 27, 239 Browser Events 111

Button 151 button-Selektor 70

C Cascading Style Sheets 7 CDN 43 Change 113 change() 94 checkbox-Selektor 70 checked-Selektor 70 Child-Filter 69 Child-Selektor 65 clearQueue() 130 Click 113 clone() 84 Color Animation 151 complete 129, 130 Conditional Comments 240 contains()-Selektor 70 Content Delivery Network 43 Content Distribution

Network 43 cookieEnabled 240 Cookie-Name 172 Cookie-Optionen 172 Cookie-Plug-in 171 Cookie-Wert 172 Cross-Browser-Fähigkeit 239 CSS 7, 237

Extern 10 Inline 8 Intern 8

CSS-Eigenschaften 64 CSS-Syntax 10

252 Stichwortverzeichnis

D Datenelement 237 Datepicker 151 delay() 130 delegate() 114, 115 dequeue() 130 Descendant-Selektor 65 detach() 93 Dialog 151 disabled-Selektor 70 Distanzmessung 205, 209 Document Object Model 11 Dokumenttyp 45 DOM 11 Doppeltes Anklicken 113 DoubleClick 113 Drag and Drop 139, 156, 182 Draggable 151 draggable() 139 draggable-Element 139

addClasses 140 axis 140 connectToSortable 140 containment 141 create 144 cursor 141 disabled 139 drag 144 grid 142 handle 142 helper 142 opacity 143 revert 143 start 144 stop 144

Droppable 151 droppable() 144 droppable-Element 144

accept 145 activate 147 addClasses 145 create 146 deactivate 147 disabled 145 drop 147

hoverClass 146 out 147 over 147 tolerance 146

duration 124, 128, 129

E easing 124, 128, 129, 132 easing-Funktion

Kurvenverlauf 136 easing-Funktionen 132 Editoren 20 Effect 151 Effects 151 Effekte 151 Eingabefelder 53 Einzelselektion 64 Elemente

Anzeigen 124 Verbergen 124

Element-Selektor 8 empty() 91 empty-Selektor 70 enabled-Selektor 70 end() 71 Entwicklungsumgebung 19 eq()-Selektor 68 Error 113 eval() 99 even-Selektor 68 Event-Bubbling 111 Event-Handler 50, 112, 113,

114 Events 112, 113, 114

Abort 112 Blur 112 Browser Events 111 Change 113 Click 113 DoubleClick 113 Error 113 Focus 113 jQuery-Events 114 KeyDown 113 KeyPress 113

KeyUp 113 Load 113 MouseDown 113 MouseMove 113 MouseOut 113 MouseOver 113 MouseUp 113 Reset 113 Resize 113 Select 114 Submit 114 UnLoad 114

Extensible HyperText Markup Language 238

Extensible Markup Language 237

F fadeIn() 127 fadeOut() 127 fadeTo() 128 fadeToggle() 127 Fading 127 Fehlerfall 113 file-Selektor 70 Filter 52, 67

animated-Selektor 68 Basis-Filter 68 button-Selektor 70 checkbox-Selektor 70 checked-Selektor 70 Child-Filter 69 contains()-Selektor 70 disabled-Selektor 70 empty-Selektor 70 enabled-Selektor 70 eq()-Selektor 68 even-Selektor 68 file-Selektor 70 first-child-Selektor 69 first-Selektor 68 focus-Selektor 68 Form-Filter 70 gt()-Selektor 68 has()-Selektor 70

Stichwortverzeichnis 253

header-Selektor 68 hidden-Selektor 71 image-Selektor 70 Inhalts-Filter 70 input-Selektor 70 last-child-Selektor 69 last-Selektor 68 lt()-Selektor 68 not()-Selektor 68 nth-child()-Selektor 69 odd-Selektor 68 only-child-Selektor 69 parent-Selektor 70 password-Selektor 70 radio-Selektor 70 reset-Selektor 70 selected-Selektor 71 Sichtbarkeitssilter 71 submit-Selektor 71 text-Selektor 71 visible-Selektor 71

Firebug 27 first-child-Selektor 69 first-Selektor 68 Focus 113 focus() 94 focus-Selektor 68 Form-Filter 70 Formulare 94 Framerate 131

G Gedrückte Maustaste 113 Gedrückte Taste 113 Gehaltene Taste 113 get() 99 gmap3 204 Google CDN 43 Google Chrome

Entwicklertools 27 Google Maps 204 Google Maps API 204 Graphical User Interface 139 gt()-Selektor 68 GUI 139

H has()-Selektor 70 Has-Attribute-Selektor 66 Header-Bereich 46 header-Selektor 68 Herausbewegen der Maus

113 hidden-Selektor 71 Hide 151 hide() 124 Hierarchie-Selektoren 65 Hilfsmethoden 152 Hineinbewegen der Maus

113 Hintergrund 155 holdReady() 243 htdocs 35 HTML 237 html() 73 HTML-DOM-Events 111 HTML-Syntax 10 httpd.conf 38 Hypertext Markup Language

237

I Icon 212 Icons 155 IDE 20 ID-Selektor 9, 64 image-Selektor 70 index.html 35, 40 index.php 35, 39 Inhalts-Filter 70 input-Selektor 70 insertAfter() 79 insertBefore() 80 Integrated Development

Environment 20 Interactions 151 Interaktionen 151 Interaktionsstatus 153 is-parent 195

J javaEnabled() 240 JavaScript 11 JavaScript Object Notation

96 JavaScript-Library 12 JavaScript-Librarys 243 jQuery 7

einbinden 43 Methoden 61 Objekt 57 Vorteile 16

jQuery Easing Plugin 133 jQuery UI 19, 151 jQuery() 60 jQuery.ajax() 107 jQuery.browser 242 jQuery.extend() 228 jQuery.fx.interval 131 jQuery.fx.off 131 jQuery.get() 106 jQuery.getJSON() 107 jQuery.getScript() 107 jQuery.param 94 jQuery.post( ) 106 jQuery.support 242 jQuery-Events 114 jQuery-Library 19 JSON 96

K KeyDown 113 KeyPress 113 KeyUp 113 Klassen-Selektor 9, 64 Kommentar 237 Konflikte 243 Kontrollelemente 152 Kubische Bézier-Kurven 136 Kurzreferenz 244

L Laden der Datei 113 language 240 last-child-Selektor 69


last-Selektor 68 Layout-Hilfsklassen 154 live() 114 Live-Suche 227, 234 Load 113 load() 47, 99 localhost 35 Losgelassene Taste 113 Loslassen der Maustaste 113 lt()-Selektor 68 Luftlinie 209

M Mehrfachselektion 64 Menüs

dynamisch verwalten 197 MouseDown 113 MouseMove 113 MouseOut 113 MouseOver 113 MouseUp 113 Multiple-Attribute-Selektor

67

N Navigationsmenüs 191

dynamisch 198 mehrstufige 192 Standardformatierung 193 Submenü 195

Navigator 240 Next-Adjacent-Selektor 65 Next-Siblings-Selektor 65 not()-Selektor 68 nth-child()-Selektor 69

O Oberflächen-

Kontrollelemente 151 Object-Literal 228 odd-Selektor 68 off() 114, 115 on() 114, 115 onabort 112 onblur 112

onchange 113 onclick 113 ondblclick 113 one() 115 onerror 113 onfocus 113 onkeydown 113 onkeypress 113 onkeyup 113 onload 113 only-child-Selektor 69 onmousedown 113 onmousemove 113 onmouseout 113 onmouseover 113 onmouseup 113 onreset 113 onresize 113 onselect 114 onsubmit 114 onunload 114 options 129 Overlay 155

P parent-Selektor 70 password-Selektor 70 phpMyAdmin 100 platform 240 Plug-in 227, 234 Position 152 post() 99 prepend() 76 prependTo() 77 Progressbar 151 properties 128 Prototype 243 Pseudo-Selektoren 52, 67

Siehe Filter PSPad 20

Q queue 130 queue() 131

R radio-Selektor 70 ready() 47 Ready-Ereignis 243 Ready-Funktion 47 Remove Class 151 remove() 92 remove_item() 177 replaceAll() 83 replaceWith() 82 Reset 113 reset-Selektor 70 Resizable 151 Resize 113

S save_cookie() 172, 173 Schatten 155 Select 114 select() 94 Selectable 151 selected-Selektor 71 Selektieren von Text 114 Selektion

Aufheben 71 Selektoren 48

Alles-Selektor 64 Attribute-Contains-Prefix-

Selektor 67 Attribute-Contains-Selektor

66 Attribute-Contains-Word-

Selektor 67 Attribute-Ends-With-

Selektor 66 Attribute-Equals-Selektor

66 Attribute-Not-Equal-

Selektor 66 Attribute-Starts-With-

Selektor 66 Attribut-Selektoren 65 Basis-CSS-Selektoren 64 Child-Selektor 65 Descendant-Selektor 65

Stichwortverzeichnis 255

Element-Selektor 8 Has-Attribute-Selektor 66 Hierarchie-Selektoren 65 ID-Selektor 9, 64 Klassen-Selektor 9, 64 Multiple-Attribute-Selektor

67 Next-Adjacent-Selektor 65 Next-Siblings-Selektor 65 Pseudo-Selektoren Siehe

Filter Tag-Name-Selektor 64 Typen-Selektor 64 Typ-Selektor 8 Universal-Selektor 8, 64

serialize() 95 serializeArray() 95 Set-Methoden 62 SGML 237 Shadow 155 Show 151 show() 124 Sichtbarkeitsfilter 71 Simulieren von Ereignissen

117 slideDown() 125 Slider 151 slideToggle() 126 slideUp() 126 Sliding 125 Sortable 151 sortable() 182 sortable-Element 182

appendTo 183 axis 183 cancel 183 connectWith 184 containment 184 cursor 184 cursorAt 185 delay 185 disabled 182 distance 185 dropOnEmpty 186 forceHelperSize 186

forcePlaceholderSize 186 grid 187 handle 187 helper 187 items 188 opacity 188 placeholder 188 revert 189 scroll 189 scrollSensitivity 190 scrollSpeed 190 tolerance 190 zIndex 191

Sortieren 182 specialEasing 130 Standard Generalized Markup

Language 237 step 130 stop() 132 Submenü 195 Submit 114 submit() 95 submit-Selektor 71 Switch Class 151 Symbolen 155

T Tabs 151 Tag-Name-Selektor 64 Tags 237 text() 72 Texteditor 20 text-Selektor 71 ThemeRoller 152 Themes 152 Toggle 151 Toggle Class 151 toggle() 125 Transparenz 127 trigger() 117 triggerHandler() 117 Typen-Selektor 64 Typ-Selektor 8

U ui-corner-all 155 ui-corner-bl 154 ui-corner-bottom 154 ui-corner-br 154 ui-corner-left 155 ui-corner-right 154 ui-corner-tl 154 ui-corner-top 154 ui-corner-tr 154 ui-helper-clearfix 154 ui-helper-hidden 154 ui-helper-hidden-accessible

154 ui-helper-reset 154 ui-icon 155 ui-priority-primary 154 ui-priority-secondary 154 ui-state-active 153 ui-state-default 153 ui-state-disabled 154 ui-state-error 153 ui-state-error-text 153 ui-state-focus 153 ui-state-highlight 153 ui-state-hover 153 ui-widget 153 ui-widget-content 153 ui-widget-header 153 ui-widget-overlay 155 ui-widget-shadow 155 unbind() 114, 115 undelegate() 114, 115 Universal-Selektor 8, 64 UnLoad 114 unwrap() 89 User Interface 151 userAgent 240 UTF-8 44 Utilities 152

V val() 95 Verbergen von Elementen

124


Verlassen 112 Verlassen der Datei 114 visible-Selektor 71

W Warenkorb 156 Webserver 28 Widget 152 Widget-Container 153

Widgets 151 wrap() 85 wrapAll() 87 wrapInner() 88 Wurzelelement 237

X X[HT]ML 237 XAMPP 28, 35

XHTML 45, 238 XML 237 XML Path Language 239 XPath 239

Z Zurücksetzen eines Formulars

113

Lars SchmidtKnow-how

ist blau.


> Das JavaScript-Framework im täglichen Programmiereinsatz

> Animation und Effekte, Ajax und JSON

> Navigationsmenüs mit jQuery realisieren

Mit jQuery wird die Programmierung von Webanwendungen

radikal vereinfacht. Diese JavaScript-Klassenbibliothek erleichtert

unter anderem die Manipulation von Webseiten-Elementen,

die Entwicklung von Ajax-Applikationen sowie das Erzeugen

von Animationen. Lars Schmidt zeigt in diesem Buch anhand

von Beispielen aus der Praxis, wie das Zusammenspiel mit

dem Document Object Model (DOM) und Cascading Style

Sheets (CSS) funktioniert, wie jQuery für Ajax-Anwendungen

eingesetzt wird und wie Sie Ihre Webseiten mit auffälligen

Effekten und Funktionen ausstatten.

� Effekte und Animationen mit jQueryMittlerweile werden HTML-Elemente oft per Sliding auf Webseiten

ein- und ausgefahren bzw. per Fading ein- und ausgeblendet. Mit dem

Easing bietet jQuery darüber hinaus einen Parameter, der besondere

Einstellmöglichkeiten für einen spektakulären benutzerdefinierten

Animationsverlauf bietet. Die besonderen grafischen Darstellungen in

diesem Buch zeigen Ihnen, wie sich die jeweiligen Einstellungen auf

den Verlauf der Animation auswirken.

� Warenkorb mit Drag and DropIntuitive Bedienung bedeutet bei einem Warenkorb, dass man die Produkte

mit einem Mausklick aufnimmt und über dem virtuellen Warenkorb wieder

fallen lässt. Wie dies mit jQuery realisiert wird und auch das Sortieren

von Produktlisten mit Drag and Drop erfolgen kann, zeigen Ihnen die

Beispiele in diesem Buch.

� Google Maps einbinden mit zusätzlichen FunktionenEine eingebundene Karte von Google Maps ist auf vielen Webseiten eine

Selbstverständlichkeit. Aber diese Karte mit zusätzlichen Funktionen

auszustatten, z. B. einer eigenen Entfernungsmessung für die Verbindung,

gehört zu den Besonderheiten, die Ihre Webseite auffällig machen. Hier

wird gezeigt, wie Sie solche Funktionalitäten mit Hilfe von jQuery erzeugen.

Aus dem Inhalt:• Was ist jQuery?

• Was kann jQuery?

• Die Entwicklungsumgebung einrichten

• jQuery einbinden

• Erste Erfolge an kleinen Beispielen

• Die Selektoren

• Das jQuery-Objekt

• Manipulieren von Elementeigenschaftenmittels jQuery-Methoden

• Formulare und jQuery

• Ajax und JSON

• Ereignisse: Events und Event Handling

• Animationen und Effekte: Sliding, Fading,Easing

• Das jQuery UI

• Drag and Drop

• Einen Warenkorb mit Drag and Drop erstellen

• Mehrstufige Navigationsmenüs

• Google Maps mit jQuery nutzen

• Eine Live-Suche als jQuery-Plug-in realisieren

• Tipps und Tricks

Über den Autor:IT-Profi Lars Schmidt ist seit 1995 als Software-entwickler in unterschiedlichen Unternehmentätig. Daneben hat er immer wieder auch eigene Software-Produkte entwickelt, z. B. die Audio-Software „Sonoscope“ für die Real-Time-Spektrum-Analyse, und Fachbeiträge inZeitschriften veröffentlicht. Sein Schwerpunktliegt seit einigen Jahren auf den Themen derWebentwicklung.

Auf www.buch.cdDer komplette Beispielcode aus dem Buch zum Download.

Lars Schmidt

30,– EUR [D]

ISBN 978-3-645-60100-9

Besuchen Sie unsere Website

www.franzis.de

Erleichtern Sie sich die Webseitenprogrammierung mit dem erfolgreichsten JavaScript-Framework!

Schm

idt

Web-Entwicklung

jQue

ry in

der

Pra

xis


60100-9 U1+U4 03.07.12 15:57 Seite 1

Documents

jQuery in der Praxis - Leseprobe - ciando ebooks · dem Document Object Model (DOM) und Cascading Style Sheets (CSS) funktioniert, wie jQuery für Ajax-Anwendungen eingesetzt wird