View
4
Download
0
Category
Preview:
Citation preview
Seite 1Grundlagen digitaler Gestaltung | Niklas Teich Medieninformatik & Gestaltung
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
Seite 3Grundlagen digitaler Gestaltung | Niklas Teich Medieninformatik & Gestaltung
Was ist eigentlich jQuery?
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+
Seite 5Grundlagen digitaler Gestaltung | Niklas Teich Medieninformatik & Gestaltung
Merkmale
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
Seite 7Grundlagen digitaler Gestaltung | Niklas Teich Medieninformatik & Gestaltung
Einführung
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
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>
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>
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>
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
Seite 13Grundlagen digitaler Gestaltung | Niklas Teich Medieninformatik & Gestaltung
Selektoren
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“)
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“]‘)
Seite 16Grundlagen digitaler Gestaltung | Niklas Teich Medieninformatik & Gestaltung
Effekte: Grundlagen
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
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 )
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
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“
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
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 )
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“});
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 )
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
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 )
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
Seite 28Grundlagen digitaler Gestaltung | Niklas Teich Medieninformatik & Gestaltung
Callback Funktionen
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.
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 )
Seite 31Grundlagen digitaler Gestaltung | Niklas Teich Medieninformatik & Gestaltung
Events
Seite 32Grundlagen digitaler Gestaltung | Niklas Teich Medieninformatik & Gestaltung
Was ist sind genau ‚Events‘?
...EventssindMethoden,diebeiverschiedenenInteraktionendesUsersreagierenund unterschiedlichste Sachen auslösen können
Seite 33Grundlagen digitaler Gestaltung | Niklas Teich Medieninformatik & Gestaltung
kurze Event-Beispiele
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.
Seite 35Grundlagen digitaler Gestaltung | Niklas Teich Medieninformatik & Gestaltung
.click()
...kennenwirausdenmeistenBeispielen ...reagiertbeieinemKlickaufdasbezogeneElement ...isteinShortcutfür.bind(“click“,handler)
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);
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
});
Seite 38Grundlagen digitaler Gestaltung | Niklas Teich Medieninformatik & Gestaltung
.scroll()
...wirdalseventgesendet,wennderUserindemElementscrollt ...istfürdasganzeFenstermöglich,aberauchfüreinzelnebereichewiez.b.Frames oderEinzelelemente
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()
Seite 40Grundlagen digitaler Gestaltung | Niklas Teich Medieninformatik & Gestaltung
HTML Manipulation
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
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 )
Seite 43Grundlagen digitaler Gestaltung | Niklas Teich Medieninformatik & Gestaltung
.append()
...mitderappendMethodekönnenInhaltehinterdemangesteuertenElementhinzu gefügtwerden.DerVorteilist,bereitsbestehenderInhaltwirdnichtüberschrieben!
$(selector).append(content)
Seite 44Grundlagen digitaler Gestaltung | Niklas Teich Medieninformatik & Gestaltung
.before()
...mitderappendMethodekönnenInhaltevordemangesteuertenElementhinzu gefügtwerden.DerVorteilist,bereitsbestehenderInhaltwirdnichtüberschrieben!
$(selector).before(content)
Seite 45Grundlagen digitaler Gestaltung | Niklas Teich Medieninformatik & Gestaltung
AJAX
Seite 46Grundlagen digitaler Gestaltung | Niklas Teich Medieninformatik & Gestaltung
AJAX
...istkeineProgrammiersprachesonderneineTechnikfürdasmoderneWeb ...wurdeeuchvonKonniebereitswunderschönerklärt ...istmitjQuerysehreinfachundeffizienteinsetzbar ...hateinegroßeBibliothekanMethodenfürdieUmsetzung
Seite 47Grundlagen digitaler Gestaltung | Niklas Teich Medieninformatik & Gestaltung
Mit jQuery und AJAX könnt ihr
...verschiedeneArtenvonDatenaustauschenwieTXT,HTML,XMLoderJSON überHTTPGetundPost
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
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 )
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()
Seite 51Grundlagen digitaler Gestaltung | Niklas Teich Medieninformatik & Gestaltung
jQuery UI
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
Seite 53Grundlagen digitaler Gestaltung | Niklas Teich Medieninformatik & Gestaltung
jQuery Mobile
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
Seite 55Grundlagen digitaler Gestaltung | Niklas Teich Medieninformatik & Gestaltung
Links
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
Seite 57Grundlagen digitaler Gestaltung | Niklas Teich Medieninformatik & Gestaltung
Vielen Dank für eure Aufmerksamkeit!
Recommended