Grundlagen digitaler Gestaltung | Niklas Teich Seite 1 · Grundlagen digitaler Gestaltung | Niklas...
Transcript of Grundlagen digitaler Gestaltung | Niklas Teich Seite 1 · Grundlagen digitaler Gestaltung | Niklas...
![Page 1: Grundlagen digitaler Gestaltung | Niklas Teich Seite 1 · Grundlagen digitaler Gestaltung | Niklas Teich Seite 6 Medieninformatik & Gestaltung jQuery beinhaltet ..... eine Elementselektion](https://reader030.fdocuments.net/reader030/viewer/2022041007/5eae62d04c686f4ce0169c6d/html5/thumbnails/1.jpg)
Seite 1Grundlagen digitaler Gestaltung | Niklas Teich Medieninformatik & Gestaltung
![Page 2: Grundlagen digitaler Gestaltung | Niklas Teich Seite 1 · Grundlagen digitaler Gestaltung | Niklas Teich Seite 6 Medieninformatik & Gestaltung jQuery beinhaltet ..... eine Elementselektion](https://reader030.fdocuments.net/reader030/viewer/2022041007/5eae62d04c686f4ce0169c6d/html5/thumbnails/2.jpg)
Seite 2Grundlagen digitaler Gestaltung | Niklas Teich Medieninformatik & Gestaltung
Strukturierung
... Was ist eigentlich jQuery
... Merkmale
... Einführung
... Selektoren
... Effekte: Grundlagen
... Callback Funktionen
... Events
... HTML Manipulationen
... AJAX
... jQuery UI
... jQuery Mobile
... Links
![Page 3: Grundlagen digitaler Gestaltung | Niklas Teich Seite 1 · Grundlagen digitaler Gestaltung | Niklas Teich Seite 6 Medieninformatik & Gestaltung jQuery beinhaltet ..... eine Elementselektion](https://reader030.fdocuments.net/reader030/viewer/2022041007/5eae62d04c686f4ce0169c6d/html5/thumbnails/3.jpg)
Seite 3Grundlagen digitaler Gestaltung | Niklas Teich Medieninformatik & Gestaltung
Was ist eigentlich jQuery?
![Page 4: Grundlagen digitaler Gestaltung | Niklas Teich Seite 1 · Grundlagen digitaler Gestaltung | Niklas Teich Seite 6 Medieninformatik & Gestaltung jQuery beinhaltet ..... eine Elementselektion](https://reader030.fdocuments.net/reader030/viewer/2022041007/5eae62d04c686f4ce0169c6d/html5/thumbnails/4.jpg)
Seite 4Grundlagen digitaler Gestaltung | Niklas Teich Medieninformatik & Gestaltung
jQuery ...
...isteinekostenloseundamhäufigstgenutzteJavaScriptKlassenbibliothek ... beinhaltet Methoden der Navigation und DOM Manipulation ... wurde von John Resig 2006 erfunden ...wirdseit2008offiziellua.vonNokia,AppleundMicrosoftProduktenunterstützt ...istdieamhäufigsteverwendetsteJavaScriptBibliothek ...wirdinallengängigenBrowsernunterstützt
2.0+ 6+ 3+ 10.6+ 8+
![Page 5: Grundlagen digitaler Gestaltung | Niklas Teich Seite 1 · Grundlagen digitaler Gestaltung | Niklas Teich Seite 6 Medieninformatik & Gestaltung jQuery beinhaltet ..... eine Elementselektion](https://reader030.fdocuments.net/reader030/viewer/2022041007/5eae62d04c686f4ce0169c6d/html5/thumbnails/5.jpg)
Seite 5Grundlagen digitaler Gestaltung | Niklas Teich Medieninformatik & Gestaltung
Merkmale
![Page 6: Grundlagen digitaler Gestaltung | Niklas Teich Seite 1 · Grundlagen digitaler Gestaltung | Niklas Teich Seite 6 Medieninformatik & Gestaltung jQuery beinhaltet ..... eine Elementselektion](https://reader030.fdocuments.net/reader030/viewer/2022041007/5eae62d04c686f4ce0169c6d/html5/thumbnails/6.jpg)
Seite 6Grundlagen digitaler Gestaltung | Niklas Teich Medieninformatik & Gestaltung
jQuery beinhaltet ...
... eine Elementselektion im DOM ... DOM Manipulationsmöglichkeiten ... ein Event-System ... Effekte & Animationen ...AJAXUnterstützung ...PlugIns ... eine unglaublich detaillierte Dokumentation ... nur coole Sachen
![Page 7: Grundlagen digitaler Gestaltung | Niklas Teich Seite 1 · Grundlagen digitaler Gestaltung | Niklas Teich Seite 6 Medieninformatik & Gestaltung jQuery beinhaltet ..... eine Elementselektion](https://reader030.fdocuments.net/reader030/viewer/2022041007/5eae62d04c686f4ce0169c6d/html5/thumbnails/7.jpg)
Seite 7Grundlagen digitaler Gestaltung | Niklas Teich Medieninformatik & Gestaltung
Einführung
![Page 8: Grundlagen digitaler Gestaltung | Niklas Teich Seite 1 · Grundlagen digitaler Gestaltung | Niklas Teich Seite 6 Medieninformatik & Gestaltung jQuery beinhaltet ..... eine Elementselektion](https://reader030.fdocuments.net/reader030/viewer/2022041007/5eae62d04c686f4ce0169c6d/html5/thumbnails/8.jpg)
Seite 8Grundlagen digitaler Gestaltung | Niklas Teich Medieninformatik & Gestaltung
Bibliothek
...esgibt2verschiedeneVersionenderBibliothek(komprimiert/unkomprimiert) ...entwederdieDateiselbstladen,bereitstellenundverlinken ...odernureinenVerweisnutzen(dieBibliothekliegtz.B.beijQueryselbstoderauch beidenGoogleCodeLibraries)
Vorteil beim direkten Verweis auf einen anderen Online-Standort der Datei:
...hoheWahrscheinlichkeit,dassjQueryBibliothekbereitsimCachedesUsersliegt
![Page 9: Grundlagen digitaler Gestaltung | Niklas Teich Seite 1 · Grundlagen digitaler Gestaltung | Niklas Teich Seite 6 Medieninformatik & Gestaltung jQuery beinhaltet ..... eine Elementselektion](https://reader030.fdocuments.net/reader030/viewer/2022041007/5eae62d04c686f4ce0169c6d/html5/thumbnails/9.jpg)
Seite 9Grundlagen digitaler Gestaltung | Niklas Teich Medieninformatik & Gestaltung
Einbindung im <head> ...
...einerkomprimiertenjQueryBibliothekaufdemeigenenWebserver
<script type=“text/javascript“ src=“jquery.min.js“></script>
...einerkomprimiertenjQueryBibliothekaufdemGoogleLibraryServer
<script type=“text/javascript“ src=“http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js“></script>
![Page 10: Grundlagen digitaler Gestaltung | Niklas Teich Seite 1 · Grundlagen digitaler Gestaltung | Niklas Teich Seite 6 Medieninformatik & Gestaltung jQuery beinhaltet ..... eine Elementselektion](https://reader030.fdocuments.net/reader030/viewer/2022041007/5eae62d04c686f4ce0169c6d/html5/thumbnails/10.jpg)
Seite 10Grundlagen digitaler Gestaltung | Niklas Teich Medieninformatik & Gestaltung
Wo rein muss der Code
...wievonJavaScriptgewohnt,gehörtauchjQueryCodeineinScript-Tag
<script type=“text/javascript“>
// Hier kommt unser jQuery Code rein </script>
![Page 11: Grundlagen digitaler Gestaltung | Niklas Teich Seite 1 · Grundlagen digitaler Gestaltung | Niklas Teich Seite 6 Medieninformatik & Gestaltung jQuery beinhaltet ..... eine Elementselektion](https://reader030.fdocuments.net/reader030/viewer/2022041007/5eae62d04c686f4ce0169c6d/html5/thumbnails/11.jpg)
Seite 11Grundlagen digitaler Gestaltung | Niklas Teich Medieninformatik & Gestaltung
Script ausführen
...wirmöchtennun,dassbeimfertiggeladenemDOMunserjQueryScriptausgeführt wird.DafürbenutzenwirdieHauseigene‚readyevent‘Funktion
<script type=“text/javascript“>
$(document).ready(function(){ // Hier folgt unser eigentlicher Code
}); </script>
![Page 12: Grundlagen digitaler Gestaltung | Niklas Teich Seite 1 · Grundlagen digitaler Gestaltung | Niklas Teich Seite 6 Medieninformatik & Gestaltung jQuery beinhaltet ..... eine Elementselektion](https://reader030.fdocuments.net/reader030/viewer/2022041007/5eae62d04c686f4ce0169c6d/html5/thumbnails/12.jpg)
Seite 12Grundlagen digitaler Gestaltung | Niklas Teich Medieninformatik & Gestaltung
Standard-Syntax
... jQuery erfasst HTML Elemente und führt auf diese „actions“ aus
$(selector).action()
jQueryStart-definierenElement das angesteuert wird
Methode/Event,die/dasaufdenHTMLBereichangewendetwird
![Page 13: Grundlagen digitaler Gestaltung | Niklas Teich Seite 1 · Grundlagen digitaler Gestaltung | Niklas Teich Seite 6 Medieninformatik & Gestaltung jQuery beinhaltet ..... eine Elementselektion](https://reader030.fdocuments.net/reader030/viewer/2022041007/5eae62d04c686f4ce0169c6d/html5/thumbnails/13.jpg)
Seite 13Grundlagen digitaler Gestaltung | Niklas Teich Medieninformatik & Gestaltung
Selektoren
![Page 14: Grundlagen digitaler Gestaltung | Niklas Teich Seite 1 · Grundlagen digitaler Gestaltung | Niklas Teich Seite 6 Medieninformatik & Gestaltung jQuery beinhaltet ..... eine Elementselektion](https://reader030.fdocuments.net/reader030/viewer/2022041007/5eae62d04c686f4ce0169c6d/html5/thumbnails/14.jpg)
Seite 14Grundlagen digitaler Gestaltung | Niklas Teich Medieninformatik & Gestaltung
Element Selektoren
...selektiertalleParagraphenimDokument $(“p“)
...selektiertalleParagraphenmitderKlasseMIGimDokument $(“p.MIG“)
... selektiert alle ersten <li> Elemtente jeder <ul> $(“ul li:first“)
... selektiert alle Elemente mit id=“wurststalat“ $(“#wurstsalat“)
...selektiertalleElementederKlassewurst $(“.wurst“)
![Page 15: Grundlagen digitaler Gestaltung | Niklas Teich Seite 1 · Grundlagen digitaler Gestaltung | Niklas Teich Seite 6 Medieninformatik & Gestaltung jQuery beinhaltet ..... eine Elementselektion](https://reader030.fdocuments.net/reader030/viewer/2022041007/5eae62d04c686f4ce0169c6d/html5/thumbnails/15.jpg)
Seite 15Grundlagen digitaler Gestaltung | Niklas Teich Medieninformatik & Gestaltung
Attribut-Selektoren
...mitXPathExpressionskönnenwirmehrereElementemitgegebendenAttributen selektieren und ansteuern
... selektiert alle Elemente mit „href“ als Attribut $(“[href]“)
... selektiert alle Elemente mit „href“ als Attribut mit dem Wert „#“ $(“[href=‘#‘]“)
... selektiert alle Elemente mit „href“ als Attribut die mit „.png“ enden $(“[href$=‘.jpg‘]“)
...selektiertalle<input..>mitdemvalue=“Krautsalat“ $(‘input[value=“Krautsalat“]‘)
![Page 16: Grundlagen digitaler Gestaltung | Niklas Teich Seite 1 · Grundlagen digitaler Gestaltung | Niklas Teich Seite 6 Medieninformatik & Gestaltung jQuery beinhaltet ..... eine Elementselektion](https://reader030.fdocuments.net/reader030/viewer/2022041007/5eae62d04c686f4ce0169c6d/html5/thumbnails/16.jpg)
Seite 16Grundlagen digitaler Gestaltung | Niklas Teich Medieninformatik & Gestaltung
Effekte: Grundlagen
![Page 17: Grundlagen digitaler Gestaltung | Niklas Teich Seite 1 · Grundlagen digitaler Gestaltung | Niklas Teich Seite 6 Medieninformatik & Gestaltung jQuery beinhaltet ..... eine Elementselektion](https://reader030.fdocuments.net/reader030/viewer/2022041007/5eae62d04c686f4ce0169c6d/html5/thumbnails/17.jpg)
Seite 17Grundlagen digitaler Gestaltung | Niklas Teich Medieninformatik & Gestaltung
hide()
... lässt das gewünschte Element verschwinden.
$(selector).hide(speed,callback)
Element,welcheswirgerne ansteuern möchten
die Funktion hide
gibtdieGeschwindigkeitderhideFunktionan,hiermöglich:“slow“,“fast“,“normal“,oderMillisekunden.
Funktion,dienachderAusführungvonhide()durchgeführt werden soll
![Page 18: Grundlagen digitaler Gestaltung | Niklas Teich Seite 1 · Grundlagen digitaler Gestaltung | Niklas Teich Seite 6 Medieninformatik & Gestaltung jQuery beinhaltet ..... eine Elementselektion](https://reader030.fdocuments.net/reader030/viewer/2022041007/5eae62d04c686f4ce0169c6d/html5/thumbnails/18.jpg)
Seite 18Grundlagen digitaler Gestaltung | Niklas Teich Medieninformatik & Gestaltung
Praxis-Beispiel - hide()
...aufKnopfdruckverschwindenalleTexte,diein<p>gesetztwurden.
$(document).ready(function(){
$(“button“).click(function(){ $(“p“).hide(); }); });
Hinweis - nicht vergessen die vor der function geöffneten Klammernachdieserauchwiederzuschließen!
(Online-Beispiel )
![Page 19: Grundlagen digitaler Gestaltung | Niklas Teich Seite 1 · Grundlagen digitaler Gestaltung | Niklas Teich Seite 6 Medieninformatik & Gestaltung jQuery beinhaltet ..... eine Elementselektion](https://reader030.fdocuments.net/reader030/viewer/2022041007/5eae62d04c686f4ce0169c6d/html5/thumbnails/19.jpg)
Seite 19Grundlagen digitaler Gestaltung | Niklas Teich Medieninformatik & Gestaltung
show()
... lässt das gewünschte Element erscheinen.
$(selector).show(speed,callback)
Element,welcheswirgerne ansteuern möchten
die Funktion show
gibtdieGeschwindigkeitdershowFunktionan,hiermöglich:“slow“,“fast“,“normal“,oderMillisekunden.Analogzuhide
Funktion,dienachderAusführungvonshow()durchgeführt werden soll
![Page 20: Grundlagen digitaler Gestaltung | Niklas Teich Seite 1 · Grundlagen digitaler Gestaltung | Niklas Teich Seite 6 Medieninformatik & Gestaltung jQuery beinhaltet ..... eine Elementselektion](https://reader030.fdocuments.net/reader030/viewer/2022041007/5eae62d04c686f4ce0169c6d/html5/thumbnails/20.jpg)
Seite 20Grundlagen digitaler Gestaltung | Niklas Teich Medieninformatik & Gestaltung
Praxis-Beispiel - show()
...aufKnopfdruckerscheinteinText,dervorhernichtzusehenwar
$(document).ready(function(){
$(“button“).click(function(){ $(“p“).show(); }); });
(Online-Beispiel )
Hinweis-imBeispielversteckteichdenTextganzeinfach über den style „display: none“
![Page 21: Grundlagen digitaler Gestaltung | Niklas Teich Seite 1 · Grundlagen digitaler Gestaltung | Niklas Teich Seite 6 Medieninformatik & Gestaltung jQuery beinhaltet ..... eine Elementselektion](https://reader030.fdocuments.net/reader030/viewer/2022041007/5eae62d04c686f4ce0169c6d/html5/thumbnails/21.jpg)
Seite 21Grundlagen digitaler Gestaltung | Niklas Teich Medieninformatik & Gestaltung
toggle()
...setztdasElementinAbhängigkeitzueinanderaufshow/hide
$(selector).toggle(speed,callback)
Element,welcheswirgerne ansteuern möchten
die Funktion toggle
gibtdieGeschwindigkeitdertoggleFunktionan,hiermöglich:“slow“,“fast“,“normal“,oderMillisekunden.Analogzuhide/show
Funktion,dienachderAusführungvontoggle()durchgeführt werden soll
![Page 22: Grundlagen digitaler Gestaltung | Niklas Teich Seite 1 · Grundlagen digitaler Gestaltung | Niklas Teich Seite 6 Medieninformatik & Gestaltung jQuery beinhaltet ..... eine Elementselektion](https://reader030.fdocuments.net/reader030/viewer/2022041007/5eae62d04c686f4ce0169c6d/html5/thumbnails/22.jpg)
Seite 22Grundlagen digitaler Gestaltung | Niklas Teich Medieninformatik & Gestaltung
Praxis-Beispiel - toggle()
...aufKnopfdruckverschwindenalleTexte,diein<p>gesetztwurden,underscheinen bei erneutem Druck wieder
$(document).ready(function(){
$(“button“).click(function(){ $(“p“).toggle(“slow“); }); });
(Online-Beispiel )
![Page 23: Grundlagen digitaler Gestaltung | Niklas Teich Seite 1 · Grundlagen digitaler Gestaltung | Niklas Teich Seite 6 Medieninformatik & Gestaltung jQuery beinhaltet ..... eine Elementselektion](https://reader030.fdocuments.net/reader030/viewer/2022041007/5eae62d04c686f4ce0169c6d/html5/thumbnails/23.jpg)
Seite 23Grundlagen digitaler Gestaltung | Niklas Teich Medieninformatik & Gestaltung
Praxis-Beispiel - CSS Selektor
...einKlickaufdenKnopfmitderidgroßlässtdieSchriftgrößeauf40Pxwachsen,ein KlickaufdenKnopfmitderidkleinlässtsieauf12Pxschrumpfen.
$(document).ready(function(){ $(“#groß“).click(function(){ $(“p“).css(“font-size“,“40px“); }); $(“#klein“).click(function(){ $(“p“).css(“font-size“,“12px“); }); });
(Online-Beispiel )
Hinweis-mehrereCSSEigenschaftenkönnensogesetztwerden: $(“p“).css({„font-size“:“40px“,“background-color“:“#123456“});
![Page 24: Grundlagen digitaler Gestaltung | Niklas Teich Seite 1 · Grundlagen digitaler Gestaltung | Niklas Teich Seite 6 Medieninformatik & Gestaltung jQuery beinhaltet ..... eine Elementselektion](https://reader030.fdocuments.net/reader030/viewer/2022041007/5eae62d04c686f4ce0169c6d/html5/thumbnails/24.jpg)
Seite 24Grundlagen digitaler Gestaltung | Niklas Teich Medieninformatik & Gestaltung
Praxis-Beispiel - slideToggle()
...beimKlickaufunserenText<p>..mitderid=“menu“öffnet/schließtsichder Container „container“ mit einem slide-Effekt.
$(document).ready(function(){ $(“p.menu).click(function(){ $(“#container“).slideToggle(“slow“); }); });
(Online-Beispiel )
![Page 25: Grundlagen digitaler Gestaltung | Niklas Teich Seite 1 · Grundlagen digitaler Gestaltung | Niklas Teich Seite 6 Medieninformatik & Gestaltung jQuery beinhaltet ..... eine Elementselektion](https://reader030.fdocuments.net/reader030/viewer/2022041007/5eae62d04c686f4ce0169c6d/html5/thumbnails/25.jpg)
Seite 25Grundlagen digitaler Gestaltung | Niklas Teich Medieninformatik & Gestaltung
fadeTo()
... ändert die Deckkraft eines Elements
$(selector).fadeTo(speed,opacity,callback)
Element,welcheswirgerne ansteuern möchten
die Funktion fadeTogibtdieGeschwindigkeitdertoggleFunktionan,hiermöglich:“slow“,“fast“,“normal“,oderMillisekunden.Analogzuhide/show
verringertdieDeckkraftbiszudemangebenenenWert(zwischen0und1,wiez.B.0.1,0.25)
Funktion,dienachderAusführungvonfadeTo()durchgeführt werden soll
![Page 26: Grundlagen digitaler Gestaltung | Niklas Teich Seite 1 · Grundlagen digitaler Gestaltung | Niklas Teich Seite 6 Medieninformatik & Gestaltung jQuery beinhaltet ..... eine Elementselektion](https://reader030.fdocuments.net/reader030/viewer/2022041007/5eae62d04c686f4ce0169c6d/html5/thumbnails/26.jpg)
Seite 26Grundlagen digitaler Gestaltung | Niklas Teich Medieninformatik & Gestaltung
Praxis-Beispiel - fadeTo()
...BeimMouseoverüberdieBoxverschwindetdiese.Umsiewiedererscheinenzu lassen-einfachdenCurserüberdenTextmitderid=“hell“halten.
$(document).ready(function(){ $(“#box“).hover(function(){ $(“#box“).fadeTo(“normal“,0.15); }); $(“#hell“).hover(function(){ $(“#box“).fadeTo(“fast“,1); }); });
(Online-Beispiel )
![Page 27: Grundlagen digitaler Gestaltung | Niklas Teich Seite 1 · Grundlagen digitaler Gestaltung | Niklas Teich Seite 6 Medieninformatik & Gestaltung jQuery beinhaltet ..... eine Elementselektion](https://reader030.fdocuments.net/reader030/viewer/2022041007/5eae62d04c686f4ce0169c6d/html5/thumbnails/27.jpg)
Seite 27Grundlagen digitaler Gestaltung | Niklas Teich Medieninformatik & Gestaltung
Übersicht der zur Verfügung stehenden Effekte
...animate() ...slideDown() ...clearQueue() ...slideToggle() ...delay() ...slideUp() ...dequeue() ...stop() ...fadeIn() ...toggle() ...fadeOut() ...hide() ...fadeTo() ...queue() ...fadeToggle() ...show() ...jQuery.fx.interval ...jQuery.fx.off
![Page 28: Grundlagen digitaler Gestaltung | Niklas Teich Seite 1 · Grundlagen digitaler Gestaltung | Niklas Teich Seite 6 Medieninformatik & Gestaltung jQuery beinhaltet ..... eine Elementselektion](https://reader030.fdocuments.net/reader030/viewer/2022041007/5eae62d04c686f4ce0169c6d/html5/thumbnails/28.jpg)
Seite 28Grundlagen digitaler Gestaltung | Niklas Teich Medieninformatik & Gestaltung
Callback Funktionen
![Page 29: Grundlagen digitaler Gestaltung | Niklas Teich Seite 1 · Grundlagen digitaler Gestaltung | Niklas Teich Seite 6 Medieninformatik & Gestaltung jQuery beinhaltet ..... eine Elementselektion](https://reader030.fdocuments.net/reader030/viewer/2022041007/5eae62d04c686f4ce0169c6d/html5/thumbnails/29.jpg)
Seite 29Grundlagen digitaler Gestaltung | Niklas Teich Medieninformatik & Gestaltung
Was ist ‚Callback‘?
...EineCallback-Funktionwirderstausgeführt,nachdemdieaktuellevollständigdurch- geführt wurde. ...sokannmansichsichersein,dasserstspezielleFunktionendurchgeführtwerden, nachdem bestimmte durchgelaufen sind.
![Page 30: Grundlagen digitaler Gestaltung | Niklas Teich Seite 1 · Grundlagen digitaler Gestaltung | Niklas Teich Seite 6 Medieninformatik & Gestaltung jQuery beinhaltet ..... eine Elementselektion](https://reader030.fdocuments.net/reader030/viewer/2022041007/5eae62d04c686f4ce0169c6d/html5/thumbnails/30.jpg)
Seite 30Grundlagen digitaler Gestaltung | Niklas Teich Medieninformatik & Gestaltung
Callback-Beispiel
...aufKnopfdruckerscheinteinText,dervorhernichtzusehenwar
$(document).ready(function(){ $(“#start“).click(function(){ $(“p“).hide(1000,function(){ $(“#text“).fadeTo(“slow“,0.3,function(){ $(“h1“).fadeTo(“slow“,0.2,function(){ $(“#start“).fadeTo(“slow“,0.1); }); }); }); }); });
(Online-Beispiel )
![Page 31: Grundlagen digitaler Gestaltung | Niklas Teich Seite 1 · Grundlagen digitaler Gestaltung | Niklas Teich Seite 6 Medieninformatik & Gestaltung jQuery beinhaltet ..... eine Elementselektion](https://reader030.fdocuments.net/reader030/viewer/2022041007/5eae62d04c686f4ce0169c6d/html5/thumbnails/31.jpg)
Seite 31Grundlagen digitaler Gestaltung | Niklas Teich Medieninformatik & Gestaltung
Events
![Page 32: Grundlagen digitaler Gestaltung | Niklas Teich Seite 1 · Grundlagen digitaler Gestaltung | Niklas Teich Seite 6 Medieninformatik & Gestaltung jQuery beinhaltet ..... eine Elementselektion](https://reader030.fdocuments.net/reader030/viewer/2022041007/5eae62d04c686f4ce0169c6d/html5/thumbnails/32.jpg)
Seite 32Grundlagen digitaler Gestaltung | Niklas Teich Medieninformatik & Gestaltung
Was ist sind genau ‚Events‘?
...EventssindMethoden,diebeiverschiedenenInteraktionendesUsersreagierenund unterschiedlichste Sachen auslösen können
![Page 33: Grundlagen digitaler Gestaltung | Niklas Teich Seite 1 · Grundlagen digitaler Gestaltung | Niklas Teich Seite 6 Medieninformatik & Gestaltung jQuery beinhaltet ..... eine Elementselektion](https://reader030.fdocuments.net/reader030/viewer/2022041007/5eae62d04c686f4ce0169c6d/html5/thumbnails/33.jpg)
Seite 33Grundlagen digitaler Gestaltung | Niklas Teich Medieninformatik & Gestaltung
kurze Event-Beispiele
![Page 34: Grundlagen digitaler Gestaltung | Niklas Teich Seite 1 · Grundlagen digitaler Gestaltung | Niklas Teich Seite 6 Medieninformatik & Gestaltung jQuery beinhaltet ..... eine Elementselektion](https://reader030.fdocuments.net/reader030/viewer/2022041007/5eae62d04c686f4ce0169c6d/html5/thumbnails/34.jpg)
Seite 34Grundlagen digitaler Gestaltung | Niklas Teich Medieninformatik & Gestaltung
.ready()
...kennenwirausderbereitsgezeigtenHauptmethode ...istdemJavaScript„load“ähnlich,jedochbeziehtsichdas.ready()nuraufdenvoll- ständiggeladenemDOMundnichtaufDatenwiez.B.vollständiggeladenenBildern, wie es bei „load“ der Fall ist ...dareadynachdemvollständigemLadendesDOMausgeführtwird,bietetsichready amhäufigstensfürdiePlatzierungdesjQueryCodesan.
![Page 35: Grundlagen digitaler Gestaltung | Niklas Teich Seite 1 · Grundlagen digitaler Gestaltung | Niklas Teich Seite 6 Medieninformatik & Gestaltung jQuery beinhaltet ..... eine Elementselektion](https://reader030.fdocuments.net/reader030/viewer/2022041007/5eae62d04c686f4ce0169c6d/html5/thumbnails/35.jpg)
Seite 35Grundlagen digitaler Gestaltung | Niklas Teich Medieninformatik & Gestaltung
.click()
...kennenwirausdenmeistenBeispielen ...reagiertbeieinemKlickaufdasbezogeneElement ...isteinShortcutfür.bind(“click“,handler)
![Page 36: Grundlagen digitaler Gestaltung | Niklas Teich Seite 1 · Grundlagen digitaler Gestaltung | Niklas Teich Seite 6 Medieninformatik & Gestaltung jQuery beinhaltet ..... eine Elementselektion](https://reader030.fdocuments.net/reader030/viewer/2022041007/5eae62d04c686f4ce0169c6d/html5/thumbnails/36.jpg)
Seite 36Grundlagen digitaler Gestaltung | Niklas Teich Medieninformatik & Gestaltung
.hover()
... beinhaltet die event handler für mouseenter und mouseleave ...$(selector).hover(handlerIn,handlerOut);isteinShortcutfür $(selector).mouseenter(handlerIn).mouseleave(handlerOut);
![Page 37: Grundlagen digitaler Gestaltung | Niklas Teich Seite 1 · Grundlagen digitaler Gestaltung | Niklas Teich Seite 6 Medieninformatik & Gestaltung jQuery beinhaltet ..... eine Elementselektion](https://reader030.fdocuments.net/reader030/viewer/2022041007/5eae62d04c686f4ce0169c6d/html5/thumbnails/37.jpg)
Seite 37Grundlagen digitaler Gestaltung | Niklas Teich Medieninformatik & Gestaltung
.load()
...wirdaneinElementgesendet,sobaldalleUnter-Elementevollständig geladen sind. ...kannaufverschiedeneTypengesetztwerdenwieBilder,Scripte, frames,iframeunddaswindow Objekt
$(window).load(function(){
// Hier kommt unser jQuery Code rein
});
![Page 38: Grundlagen digitaler Gestaltung | Niklas Teich Seite 1 · Grundlagen digitaler Gestaltung | Niklas Teich Seite 6 Medieninformatik & Gestaltung jQuery beinhaltet ..... eine Elementselektion](https://reader030.fdocuments.net/reader030/viewer/2022041007/5eae62d04c686f4ce0169c6d/html5/thumbnails/38.jpg)
Seite 38Grundlagen digitaler Gestaltung | Niklas Teich Medieninformatik & Gestaltung
.scroll()
...wirdalseventgesendet,wennderUserindemElementscrollt ...istfürdasganzeFenstermöglich,aberauchfüreinzelnebereichewiez.b.Frames oderEinzelelemente
![Page 39: Grundlagen digitaler Gestaltung | Niklas Teich Seite 1 · Grundlagen digitaler Gestaltung | Niklas Teich Seite 6 Medieninformatik & Gestaltung jQuery beinhaltet ..... eine Elementselektion](https://reader030.fdocuments.net/reader030/viewer/2022041007/5eae62d04c686f4ce0169c6d/html5/thumbnails/39.jpg)
Seite 39Grundlagen digitaler Gestaltung | Niklas Teich Medieninformatik & Gestaltung
Übersicht der zur Verfügung stehenden Events
...bind() ...event.isDefaultPrevented() ...mousemove() ...blur() ...event.isImmediatePropagationStopped() ...mouseout() ...change() ...event.isPropagationStopped() ...mouseover() ...click() ...event.namespace() ...mouseup() ...dbclick() ...event.pageX() ...one() ...delegate() ...event.pageY() ...jQuery.proxy() ...die() ...event.preventDefault() ...ready() ...error() ...event.relatedTarget() ...resize() ...event.currentTarget ...event.result() ...scroll() ...event.data ...event.stopImmediatePropagation() ...select() ...event.stopPropagation()...event.target ...submit() ...event.timeStamp ...event.type ...toggle() ...event.which ...focus() ...trigger() ...focusout() ...focusin() ...triggerHandler() ...hover() ...keydown() ...unbind() ...keypress() ...keyup() ...undelegate() ...live() ...load() ...unload() ...mousedown() ...mouseenter()
![Page 40: Grundlagen digitaler Gestaltung | Niklas Teich Seite 1 · Grundlagen digitaler Gestaltung | Niklas Teich Seite 6 Medieninformatik & Gestaltung jQuery beinhaltet ..... eine Elementselektion](https://reader030.fdocuments.net/reader030/viewer/2022041007/5eae62d04c686f4ce0169c6d/html5/thumbnails/40.jpg)
Seite 40Grundlagen digitaler Gestaltung | Niklas Teich Medieninformatik & Gestaltung
HTML Manipulation
![Page 41: Grundlagen digitaler Gestaltung | Niklas Teich Seite 1 · Grundlagen digitaler Gestaltung | Niklas Teich Seite 6 Medieninformatik & Gestaltung jQuery beinhaltet ..... eine Elementselektion](https://reader030.fdocuments.net/reader030/viewer/2022041007/5eae62d04c686f4ce0169c6d/html5/thumbnails/41.jpg)
Seite 41Grundlagen digitaler Gestaltung | Niklas Teich Medieninformatik & Gestaltung
HTML Inhalt ändern
... mit jQuery können wir nicht nur nette Effekte machen - wir können auch HTML Elemente und Attribute ändern und manipulieren
$(selector).html(content)
Element,welchewirgerne ansteuern möchten
die Funktion html
derInhaltdergeändert/hinzugefügt...wird
![Page 42: Grundlagen digitaler Gestaltung | Niklas Teich Seite 1 · Grundlagen digitaler Gestaltung | Niklas Teich Seite 6 Medieninformatik & Gestaltung jQuery beinhaltet ..... eine Elementselektion](https://reader030.fdocuments.net/reader030/viewer/2022041007/5eae62d04c686f4ce0169c6d/html5/thumbnails/42.jpg)
Seite 42Grundlagen digitaler Gestaltung | Niklas Teich Medieninformatik & Gestaltung
Praxis-Beispiel - .html()
...beimKlickaufunserenText<p>..mitderid=“menu“öffnet/schließtsichder Container „container“ mit einem slide-Effekt.
$(document).ready(function(){ $(“button).click(function(){ $(“p“).html(“Krautsalat“); }); });
(Online-Beispiel )
![Page 43: Grundlagen digitaler Gestaltung | Niklas Teich Seite 1 · Grundlagen digitaler Gestaltung | Niklas Teich Seite 6 Medieninformatik & Gestaltung jQuery beinhaltet ..... eine Elementselektion](https://reader030.fdocuments.net/reader030/viewer/2022041007/5eae62d04c686f4ce0169c6d/html5/thumbnails/43.jpg)
Seite 43Grundlagen digitaler Gestaltung | Niklas Teich Medieninformatik & Gestaltung
.append()
...mitderappendMethodekönnenInhaltehinterdemangesteuertenElementhinzu gefügtwerden.DerVorteilist,bereitsbestehenderInhaltwirdnichtüberschrieben!
$(selector).append(content)
![Page 44: Grundlagen digitaler Gestaltung | Niklas Teich Seite 1 · Grundlagen digitaler Gestaltung | Niklas Teich Seite 6 Medieninformatik & Gestaltung jQuery beinhaltet ..... eine Elementselektion](https://reader030.fdocuments.net/reader030/viewer/2022041007/5eae62d04c686f4ce0169c6d/html5/thumbnails/44.jpg)
Seite 44Grundlagen digitaler Gestaltung | Niklas Teich Medieninformatik & Gestaltung
.before()
...mitderappendMethodekönnenInhaltevordemangesteuertenElementhinzu gefügtwerden.DerVorteilist,bereitsbestehenderInhaltwirdnichtüberschrieben!
$(selector).before(content)
![Page 45: Grundlagen digitaler Gestaltung | Niklas Teich Seite 1 · Grundlagen digitaler Gestaltung | Niklas Teich Seite 6 Medieninformatik & Gestaltung jQuery beinhaltet ..... eine Elementselektion](https://reader030.fdocuments.net/reader030/viewer/2022041007/5eae62d04c686f4ce0169c6d/html5/thumbnails/45.jpg)
Seite 45Grundlagen digitaler Gestaltung | Niklas Teich Medieninformatik & Gestaltung
AJAX
![Page 46: Grundlagen digitaler Gestaltung | Niklas Teich Seite 1 · Grundlagen digitaler Gestaltung | Niklas Teich Seite 6 Medieninformatik & Gestaltung jQuery beinhaltet ..... eine Elementselektion](https://reader030.fdocuments.net/reader030/viewer/2022041007/5eae62d04c686f4ce0169c6d/html5/thumbnails/46.jpg)
Seite 46Grundlagen digitaler Gestaltung | Niklas Teich Medieninformatik & Gestaltung
AJAX
...istkeineProgrammiersprachesonderneineTechnikfürdasmoderneWeb ...wurdeeuchvonKonniebereitswunderschönerklärt ...istmitjQuerysehreinfachundeffizienteinsetzbar ...hateinegroßeBibliothekanMethodenfürdieUmsetzung
![Page 47: Grundlagen digitaler Gestaltung | Niklas Teich Seite 1 · Grundlagen digitaler Gestaltung | Niklas Teich Seite 6 Medieninformatik & Gestaltung jQuery beinhaltet ..... eine Elementselektion](https://reader030.fdocuments.net/reader030/viewer/2022041007/5eae62d04c686f4ce0169c6d/html5/thumbnails/47.jpg)
Seite 47Grundlagen digitaler Gestaltung | Niklas Teich Medieninformatik & Gestaltung
Mit jQuery und AJAX könnt ihr
...verschiedeneArtenvonDatenaustauschenwieTXT,HTML,XMLoderJSON überHTTPGetundPost
![Page 48: Grundlagen digitaler Gestaltung | Niklas Teich Seite 1 · Grundlagen digitaler Gestaltung | Niklas Teich Seite 6 Medieninformatik & Gestaltung jQuery beinhaltet ..... eine Elementselektion](https://reader030.fdocuments.net/reader030/viewer/2022041007/5eae62d04c686f4ce0169c6d/html5/thumbnails/48.jpg)
Seite 48Grundlagen digitaler Gestaltung | Niklas Teich Medieninformatik & Gestaltung
load()
...kannüberdieAjaxTechnologieDatenasynchronladen
$(selector).load(url,daten,callback)
Element,welchesmit Daten gefüllt wird
die Funktion loadAdressederzuladenenDatei
um Daten dem Server senden zukönnen
Funktion,dienachderAusführungvonfadeTo()durchgeführt werden soll
![Page 49: Grundlagen digitaler Gestaltung | Niklas Teich Seite 1 · Grundlagen digitaler Gestaltung | Niklas Teich Seite 6 Medieninformatik & Gestaltung jQuery beinhaltet ..... eine Elementselektion](https://reader030.fdocuments.net/reader030/viewer/2022041007/5eae62d04c686f4ce0169c6d/html5/thumbnails/49.jpg)
Seite 49Grundlagen digitaler Gestaltung | Niklas Teich Medieninformatik & Gestaltung
Praxis-Beispiel - load()
...aufKnopfdruckwirdder<p>..gesetzteTextmitdemInhaltdertest.txtausgetauscht
$(document).ready(function(){ $(“button“).click(function(){ $(“p“).load(“test.txt“); }); });
(Online-Beispiel )
![Page 50: Grundlagen digitaler Gestaltung | Niklas Teich Seite 1 · Grundlagen digitaler Gestaltung | Niklas Teich Seite 6 Medieninformatik & Gestaltung jQuery beinhaltet ..... eine Elementselektion](https://reader030.fdocuments.net/reader030/viewer/2022041007/5eae62d04c686f4ce0169c6d/html5/thumbnails/50.jpg)
Seite 50Grundlagen digitaler Gestaltung | Niklas Teich Medieninformatik & Gestaltung
Übersicht der zur Verfügung stehenden AJAX Methoden
...$.ajax() ...ajaxComplete() ...ajaxError() ...ajaxSend() ...$.ajaxSetup() ...ajaxStart() ...ajaxStop() ...ajaxSuccess() ...$.get() ...$.getJSON() ...$.getScript() ...load() ...$.param() ...$.post() ...serialize() ...serializeArray()
![Page 51: Grundlagen digitaler Gestaltung | Niklas Teich Seite 1 · Grundlagen digitaler Gestaltung | Niklas Teich Seite 6 Medieninformatik & Gestaltung jQuery beinhaltet ..... eine Elementselektion](https://reader030.fdocuments.net/reader030/viewer/2022041007/5eae62d04c686f4ce0169c6d/html5/thumbnails/51.jpg)
Seite 51Grundlagen digitaler Gestaltung | Niklas Teich Medieninformatik & Gestaltung
jQuery UI
![Page 52: Grundlagen digitaler Gestaltung | Niklas Teich Seite 1 · Grundlagen digitaler Gestaltung | Niklas Teich Seite 6 Medieninformatik & Gestaltung jQuery beinhaltet ..... eine Elementselektion](https://reader030.fdocuments.net/reader030/viewer/2022041007/5eae62d04c686f4ce0169c6d/html5/thumbnails/52.jpg)
Seite 52Grundlagen digitaler Gestaltung | Niklas Teich Medieninformatik & Gestaltung
jQuery UI
...behandelichindiesemReferatNICHT,dashatjajetztschonlangegenuggedauert! ... ist eine UserInterface Library ...beinhaltetInteraktionsmöglichkeitenwiez.B.Draggable,Droppable,Resizeable, Selectable,Sortable ...beinhaltetfertigeWidgetswiez.B.Accordion,Autocomplete,Buttons,Datepicker, Dialog,Progressbar,Slider,Tabs
wen es interessiert: www.jqueryui.com
![Page 53: Grundlagen digitaler Gestaltung | Niklas Teich Seite 1 · Grundlagen digitaler Gestaltung | Niklas Teich Seite 6 Medieninformatik & Gestaltung jQuery beinhaltet ..... eine Elementselektion](https://reader030.fdocuments.net/reader030/viewer/2022041007/5eae62d04c686f4ce0169c6d/html5/thumbnails/53.jpg)
Seite 53Grundlagen digitaler Gestaltung | Niklas Teich Medieninformatik & Gestaltung
jQuery Mobile
![Page 54: Grundlagen digitaler Gestaltung | Niklas Teich Seite 1 · Grundlagen digitaler Gestaltung | Niklas Teich Seite 6 Medieninformatik & Gestaltung jQuery beinhaltet ..... eine Elementselektion](https://reader030.fdocuments.net/reader030/viewer/2022041007/5eae62d04c686f4ce0169c6d/html5/thumbnails/54.jpg)
Seite 54Grundlagen digitaler Gestaltung | Niklas Teich Medieninformatik & Gestaltung
jQuery mobile
...InterfacesspeziellfürSmartphones&TabletPCs ...Touch-OptimizedLayoutsundWidgets ...Cross-Plattform&Cross-Device ... Template Designer ...wirdunterstütztvoniOS,android,BlackBeryy, bada,WindowsPhone,plamwebOS,symbian und MeeGo
wen es interessiert: www.jquerymobile.com
![Page 55: Grundlagen digitaler Gestaltung | Niklas Teich Seite 1 · Grundlagen digitaler Gestaltung | Niklas Teich Seite 6 Medieninformatik & Gestaltung jQuery beinhaltet ..... eine Elementselektion](https://reader030.fdocuments.net/reader030/viewer/2022041007/5eae62d04c686f4ce0169c6d/html5/thumbnails/55.jpg)
Seite 55Grundlagen digitaler Gestaltung | Niklas Teich Medieninformatik & Gestaltung
Links
![Page 56: Grundlagen digitaler Gestaltung | Niklas Teich Seite 1 · Grundlagen digitaler Gestaltung | Niklas Teich Seite 6 Medieninformatik & Gestaltung jQuery beinhaltet ..... eine Elementselektion](https://reader030.fdocuments.net/reader030/viewer/2022041007/5eae62d04c686f4ce0169c6d/html5/thumbnails/56.jpg)
Seite 56Grundlagen digitaler Gestaltung | Niklas Teich Medieninformatik & Gestaltung
Hier könnt alles zum Thema jQuery finden
...jquery.com OffizielleSeitemitunglaublichvielTutorials,einerriesigen Dokumentation,BeispielenundErläuterungen
...jqueryui.com OffizielleSeitefürjQueryUI
...jquerymobile.com OffizielleSeitefürjQueryMobile
...flowplayer.org/tools/ SammlungvonsehrsehrsehrvielenjQueryCodesfürsuper geileAnimationenindenBereichenTabs,Tooltips,Overlay, Validator,Rangeinput,Dateinput,Expose,Flashembed undverschiedeneKombinationen
...google.de Suchen!jQueryTutorial,Beispiele,Code-wasauchimmer,es gibt unendlich viele fertige Codes für die verrücktesten Sachen
...net.tutsplus.com NebenJSundAjaxsowiesoeineschöneTutorial-Seitemitdem Thema Design & Web Development
![Page 57: Grundlagen digitaler Gestaltung | Niklas Teich Seite 1 · Grundlagen digitaler Gestaltung | Niklas Teich Seite 6 Medieninformatik & Gestaltung jQuery beinhaltet ..... eine Elementselektion](https://reader030.fdocuments.net/reader030/viewer/2022041007/5eae62d04c686f4ce0169c6d/html5/thumbnails/57.jpg)
Seite 57Grundlagen digitaler Gestaltung | Niklas Teich Medieninformatik & Gestaltung
Vielen Dank für eure Aufmerksamkeit!