Grundlagen digitaler Gestaltung | Niklas Teich Seite 1 · Grundlagen digitaler Gestaltung | Niklas Teich Seite 6 Medieninformatik & Gestaltung jQuery beinhaltet ..... eine Elementselektion

Seite 1Grundlagen 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


Was ist eigentlich jQuery?


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+


Merkmale


jQuery beinhaltet ...

... eine Elementselektion im DOM ... DOM Manipulationsmöglichkeiten ... ein Event-System ... Effekte & Animationen ...AJAXUnterstützung ...PlugIns ... eine unglaublich detaillierte Dokumentation ... nur coole Sachen


Einführung


Bibliothek

...esgibt2verschiedeneVersionenderBibliothek(komprimiert/unkomprimiert) ...entwederdieDateiselbstladen,bereitstellenundverlinken ...odernureinenVerweisnutzen(dieBibliothekliegtz.B.beijQueryselbstoderauch beidenGoogleCodeLibraries)

Vorteil beim direkten Verweis auf einen anderen Online-Standort der Datei:

...hoheWahrscheinlichkeit,dassjQueryBibliothekbereitsimCachedesUsersliegt


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>


Wo rein muss der Code

...wievonJavaScriptgewohnt,gehörtauchjQueryCodeineinScript-Tag

<script type=“text/javascript“>

// Hier kommt unser jQuery Code rein </script>


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>


Standard-Syntax

... jQuery erfasst HTML Elemente und führt auf diese „actions“ aus

$(selector).action()

jQueryStart-definierenElement das angesteuert wird

Methode/Event,die/dasaufdenHTMLBereichangewendetwird


Selektoren


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“)


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“]‘)


Effekte: Grundlagen


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


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 )

http://www.millenworld.de/mig/jquery/beispiel_01.html


show()

... lässt das gewünschte Element erscheinen.

$(selector).show(speed,callback)


die Funktion show

gibtdieGeschwindigkeitdershowFunktionan,hiermöglich:“slow“,“fast“,“normal“,oderMillisekunden.Analogzuhide

Funktion,dienachderAusführungvonshow()durchgeführt werden soll


Praxis-Beispiel - show()

...aufKnopfdruckerscheinteinText,dervorhernichtzusehenwar


$(“button“).click(function(){ $(“p“).show(); }); });

(Online-Beispiel )

Hinweis-imBeispielversteckteichdenTextganzeinfach über den style „display: none“



toggle()

...setztdasElementinAbhängigkeitzueinanderaufshow/hide

$(selector).toggle(speed,callback)


die Funktion toggle

gibtdieGeschwindigkeitdertoggleFunktionan,hiermöglich:“slow“,“fast“,“normal“,oderMillisekunden.Analogzuhide/show

Funktion,dienachderAusführungvontoggle()durchgeführt werden soll


Praxis-Beispiel - toggle()

...aufKnopfdruckverschwindenalleTexte,diein<p>gesetztwurden,underscheinen bei erneutem Druck wieder


$(“button“).click(function(){ $(“p“).toggle(“slow“); }); });

(Online-Beispiel )



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“});



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 )



fadeTo()

... ändert die Deckkraft eines Elements

$(selector).fadeTo(speed,opacity,callback)


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


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 )



Ü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


Callback Funktionen


Was ist ‚Callback‘?

...EineCallback-Funktionwirderstausgeführt,nachdemdieaktuellevollständigdurch- geführt wurde. ...sokannmansichsichersein,dasserstspezielleFunktionendurchgeführtwerden, nachdem bestimmte durchgelaufen sind.


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 )



Events


Was ist sind genau ‚Events‘?

...EventssindMethoden,diebeiverschiedenenInteraktionendesUsersreagierenund unterschiedlichste Sachen auslösen können


kurze Event-Beispiele


.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.


.click()

...kennenwirausdenmeistenBeispielen ...reagiertbeieinemKlickaufdasbezogeneElement ...isteinShortcutfür.bind(“click“,handler)


.hover()

... beinhaltet die event handler für mouseenter und mouseleave ...$(selector).hover(handlerIn,handlerOut);isteinShortcutfür $(selector).mouseenter(handlerIn).mouseleave(handlerOut);


.load()

...wirdaneinElementgesendet,sobaldalleUnter-Elementevollständig geladen sind. ...kannaufverschiedeneTypengesetztwerdenwieBilder,Scripte, frames,iframeunddaswindow Objekt

$(window).load(function(){

// Hier kommt unser jQuery Code rein

});


.scroll()

...wirdalseventgesendet,wennderUserindemElementscrollt ...istfürdasganzeFenstermöglich,aberauchfüreinzelnebereichewiez.b.Frames oderEinzelelemente


Ü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()


HTML Manipulation


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


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 )



.append()

...mitderappendMethodekönnenInhaltehinterdemangesteuertenElementhinzu gefügtwerden.DerVorteilist,bereitsbestehenderInhaltwirdnichtüberschrieben!

$(selector).append(content)


.before()

...mitderappendMethodekönnenInhaltevordemangesteuertenElementhinzu gefügtwerden.DerVorteilist,bereitsbestehenderInhaltwirdnichtüberschrieben!

$(selector).before(content)


AJAX


AJAX

...istkeineProgrammiersprachesonderneineTechnikfürdasmoderneWeb ...wurdeeuchvonKonniebereitswunderschönerklärt ...istmitjQuerysehreinfachundeffizienteinsetzbar ...hateinegroßeBibliothekanMethodenfürdieUmsetzung


Mit jQuery und AJAX könnt ihr

...verschiedeneArtenvonDatenaustauschenwieTXT,HTML,XMLoderJSON überHTTPGetundPost


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


Praxis-Beispiel - load()

...aufKnopfdruckwirdder<p>..gesetzteTextmitdemInhaltdertest.txtausgetauscht

$(document).ready(function(){ $(“button“).click(function(){ $(“p“).load(“test.txt“); }); });

(Online-Beispiel )



Übersicht der zur Verfügung stehenden AJAX Methoden

...$.ajax() ...ajaxComplete() ...ajaxError() ...ajaxSend() ...$.ajaxSetup() ...ajaxStart() ...ajaxStop() ...ajaxSuccess() ...$.get() ...$.getJSON() ...$.getScript() ...load() ...$.param() ...$.post() ...serialize() ...serializeArray()


jQuery UI


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


jQuery Mobile


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


Links


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


Vielen Dank für eure Aufmerksamkeit!

Documents

Grundlagen digitaler Gestaltung | Niklas Teich Seite 1 · Grundlagen digitaler Gestaltung | Niklas Teich Seite 6 Medieninformatik & Gestaltung jQuery beinhaltet ..... eine Elementselektion