Logga in
 |
Avsnitten om DOM och AJAX är en förberedelse för att använda jQuery.
jQuery är ett Javascript-bibliotek med kod som underlättar Javascript-programmering och användningen av AJAX. Syftet med jQuery är att göra det enklare att använda avancerade Javascript. jQuery-biblioteket innehåller färdiga funktioner som kan nås med en eller några rader kod i ditt HTML-dokument. jQuery-biblioteket är färdigt att använda och använder DOM och AJAX för att påverka delar av dokumentet asynkront (i bakgrunden) utan att hela webbsidan behöver laddas på nytt.
OBS! Om du vill du läsa hela guiden måste du vara WDS medlem!
Du kan beställa tjänsten WDS medlem här »
Är du redan WDS medlem?
Klicka på ikonen "WDS medlem" högst upp för att läsa hela guiden!
DOM (Document Object Model) är standardiserat av W3C för att skapa interaktiva och dynamiska webbplatser. Läs mer om W3C i guiden W3C och webbstandards »
DOM skapar möjligheter att påverka innehåll, struktur och layout i ett dokument. DOM delar in dokumentet i en trädstruktur där element i samma gren kan påverkas. Varje element kan ha ett överordnat element, "förälder" (Parent) och flera underordnade element, "barn" (Child).
Trädstrukturen kallas även för "node tree" och varje node har en hierarkisk relation till varandra i trädstrukturen. Varje node har en "parent node", förutom "root node" som inte kan ha någon parent. Varje node kan ha flera "child nodes" och dessutom flera "syskon" (Siblings) på samma gren.
Ett HTML-dokument är ett exempel på DOM där ett element är nästlat i ett annat element:
I exemplet ovan är <HTML> en root-node som inte har några parent-nodes.
<HTML> har två child-nodes:
<HEAD> och <BODY>.
<HEAD> har en child-node:
<TITLE>
<BODY> har två child-nodes :
<H1> och <P>.
<H1> och <P>är syskon (Siblings) på samma gren.
Texterna som befinner sig i elementen <TITLE>, <H1> och <P> är text nodes och egna objekt som kan påverkas separat utanför elementen de befinner sig i.
DOM kan påverkas med Javascript och andra programspråk. I den här guiden används i första hand Javascript för att påverka objekt i DOM.
AJAX (Asynchronous JavaScript and XML) är en samling av tekniker för att skapa snabba och dynamiska webbplatser. Det är vanligtvis en kombination av HTML, CSS, JavaScript, DOM, XML och XMLHttpRequest.
Med AJAX kan en webbsida uppdateras asynkront (i bakgrunden). Det innebär att delar av en sida kan ändras utan att hela sidan behöver laddas om. En "vanlig" webbsida måste uppdatera hela sidan och hämta informationen på nytt från webbservern. En AJAX-sida kan uppdatera en del av sidan enligt DOM (Document Object Model) - se ovan.
Ett bra exempel på AJAX är Google's söksida 
. Där behöver du bara skriva en del av sökbegreppet innan en lista över förslag visas. Det utförs av AJAX mot en databas utan att övrigt innehåll på sidan behöver uppdateras.
Exemplet nedan hämtar förslagen från en lista som angivits i en extern PHP-fil:
Förslag:
Koden till exemplet innehåller tre delar:
1. Script-koden med funktionen som hämtar namnförslagen
2.
PHP-fil med koden som loopar igenom listan med namnförslag
3. HTML-koden som visar inmatningsfältet och <DIV> som visar namnförslagen
Klicka på ikonen "WDS medlem" högst upp på sidan för se koden till exemplen!
Avsnitten ovan om DOM och AJAX är tänkt som en förberedelse för att använda jQuery. Och nu är vi äntligen här!
OBS! jQuery fungerar inte om användaren inaktiverat Javascript i sin webbläsare.
jQuery är ett Javascript-bibliotek med kod som underlättar Javascript-programmering och användningen av AJAX. Syftet med jQuery är att göra det enklare att använda avancerade Javascript. jQuery-biblioteket innehåller färdiga funktioner som kan nås med en eller några rader kod i ditt HTML-dokument. jQuery-biblioteket är färdigt att använda och använder DOM och AJAX för att påverka delar av dokumentet asynkront (i bakgrunden) utan att hela webbsidan behöver laddas på nytt.
Det finns flera olika Javascript-bibliotek men jQuery är idag närmast en standard och används av stora aktörer som tex Google och Microsoft. Många av de vanligaste effekterna för Slideshow och Image Gallery är gjord med jQuery.
En fördel med jQuery är att koden är anpassad för att fungera i alla de mest använda webbläsarna. Du kan alltså vara säker på att de funktioner och effekter du använder ser likadana ut i de flesta webbläsare.
För att använda jQuery-biblioteket måste du anropa scriptet i din kod. Det kan se ut som exemplen nedan:
Om du använder HTML5 behöver du inte ange att det är ett Javascript. Javascript är standard i HTML5 och moderna webbläsare och du kan ange koden nedan:
OBS! Om vill vara helt säker på att Javascriptet ska fungera bör du ändå ange den "äldre" metoden:
script type="text/javascript"
jQuery-scriptet kan du ladda ner och installera på din egen webbserver eller anropa från ett CDN (Content Delivery Network). Det viktiga är att du använder rätt version av scriptet beroende på vilka funktioner du vill använda. Om du hämtar en jQuery-effekt som någon annan skapat så anges vilken version av jQuery-biblioteket som krävs för att använda scriptet.
Du kan hämta den senaste versionen av jQuery hos jquery.com
Scriptet finns i två versioner:
Production som är till för användning på webbplatser. En minimerad komprimerad version.
Development som är till för utvecklare och testning. Denna version är okomprimerad och har läsbar kod.
Spara filen i samma mapp som den sida som använder scriptet. Om du placerar filen i annan mapp måste du ange detta i sökvägen till scriptet. Ange den version av scriptet du använder. Så här kan det se ut när en av de senare versionerna hämtats (2012-10-30). Exemplet visar den minimerade versionen som är till för användning direkt i webbplatsen:
Om du inte vill hämta och installera scriptet kan du istället länka till scriptet direkt online från ett CDN (Content Delivery Network). Det finns flera olika CDN som tillhandahåller alla versioner av jQuery men de två mest använda är Google och Microsoft.
Så här kan de se ut när du inkluderar jQuery från Google Ajax Libraries API CDN. Exemplet visar den minimerade versionen som är till för användning direkt i webbplatsen:
En fördel med att inkludera jQuery från ett CDN, istället för att spara den på din egen webbserver, är att många av dina besökare redan har jQuery sparad i webbläsarens cache. Den har hämtas när de tidigare besökt andra webbplatser som använder jQuery och lagrats i webbläsarens cache. Det innebär att det går snabbare att ladda din webbsida.
En annan fördel är att du inte behöver installera nya versioner av jQuery när de är tillgängliga. Ändra bara versionsnumret i sökvägen till jQuery-biblioteket:
http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js
jQuery-syntax är anpassad för att välja HTML-element enligt DOM och utföra händelser med elementen.
Bassyntax är att ange ett element och vad som ska utföras: $(element).händelse()
Dollartecknet används i alla selektorer: $()
Element som ska påverkas kan vara ett HTML-element som tex <P> <H1> <TABLE> eller CSS-selektorer som Class och ID.
Exemplen nedan går att använda direkt men är i första hand avsedda för att visa vad du kan göra med jQuery. Det är förenklade exempel för att ge en översikt.
Du hittar fler jQuery-funktioner med exempel hos W3Schools
När du klickar på knappen nedan så visas även nästa stycke. När du klickar på samma knapp igen så döljs innehållet.
Klicka på ikonen "WDS medlem" högst upp på sidan för att läsa hela guiden med kod och beskrivningar!
När du klickar på knappen nedan så visas även nästa stycke. Knappen kommer också att döljas.
Klicka på den text som visas för att dölja texten och visa knappen på nytt.
Klicka på ikonen "WDS medlem" högst upp på sidan för att läsa hela guiden med kod och beskrivningar!
När du klickar på knappen nedan så visas bilden. När du klickar på samma knapp igen så döljs bilden.
Klicka på ikonen "WDS medlem" högst upp på sidan för att läsa hela guiden med kod och beskrivningar!
När du klickar på knappen nedan så visas bilden och knappen döljs.
En ny knapp visas. När du klickar på den så döljs bilden och den första knappen visas på nytt.
Klicka på ikonen "WDS medlem" högst upp på sidan för att läsa hela guiden med kod och beskrivningar!
Klicka på ikonen nedan för att läsa hela guiden:
|
OBS! Om du vill du läsa hela guiden måste du vara WDS medlem!
Du kan beställa tjänsten WDS medlem här »
Är du redan WDS medlem?
Klicka på ikonen "WDS medlem" högst upp för att läsa hela guiden!
skriv ut »
till sidans topp