jQuery-guiden

Välkommen till Webbdesignguidens jQuery-guide!

Vad är jQuery?

jQuery är världens mest populära JavaScript-bibliotek. Det är designat bl.a. för att göra det enklare att anropa och modifiera element på hemsidan (divar, bilder, länkar etc), hantera händelser (t.ex. musklick), CSS-modifikationer samt skapa effekter och animationer. jQuery stödjer också plugin, och det finns många smidiga plugin som är gratis att ladda ner och använda.

jQuery har blivit så populärt att arbetsgivare nästan alltid vill att man ska kunna jQuery när de ska anställa en webbdesigner.

Biblioteket kan laddas ner från jQuery.com. Du kopplar det sen till din HTML-fil genom en textrad i dokumentets huvud, ungefär som med ett CSS-dokument:

<script type=”text/javascript” src=”jquery.js”></script>

Din jQuery-kod kan du ha i en extern JavaScript-fil som du anropar på samma sätt som du anropar jQuery-filen:

<script type=”text/javascript” src=”minFil.js”></script>

Du kan också ha din kod direkt i <head>-taggen i ditt HTML-dokument, på detta sätt:

<html>
<head>
<script type=”text/javascript”>
jQuery-kod här
</script>
</head>

Det kan vara en bra idé att börja på detta sätt med koden direkt i HTML-dokumentet för att göra det lite snabbare att arbeta med i början så att du slippter växla mellan flera olika filer. Dock kan det vara en mycket bra idé att ha all sin jQuery-kod i en separat .js-fil när man kommit igång med sitt kodande.

Skapa en första jQuery-funktion med .fadeOut

Symbolen som jQuery använder för att anropa är dollartecken $. Man börjar nästan alltid sitt jQuery-skriptande genom att skapa en funktion på detta sätt:

$(function() {
kod här
});

Din kod skrivs inom ”måsvingar” { och }. Se också till att på slutet ha med avslutande parentes ) samt ett semikolon ;. Nu ska vi skriva vår första funktion där vi ska få en länk och att långsamt tona bort/fade:a när man klickar på den. Här är jQuery-koden:

$(function() {
$(‘a’).click(function() {
$(‘a’).fadeOut();
});
});

Jag har lagt till radbrytningar för att göra koden mer läsbar. Använd även gärna tab-tangenten för att göra indrag för ännu mer läsbarhet om du vill. Alla gör på olika sätt. Man gör på detta sätt för att underlätta för sig själv och för andra som ska se din kod.

Du måste ockå ha en länk någonstans i din HTML, så se bara till att infoga en länk någonstans inuti <body>-taggen:

<a href=”#”>Klicka mig så försvinner jag!</a>

Har du nu gjort rätt så ska länken fade:a ut på ett läckert sätt när du klickar på den.

Demo:

Något lite mer användbart

Funktionen med att få en länk att försvinna är ett mycket bra sätt att lära sig grunderna i jQuery, men det är kanske inte den mest användbara funktionen. För att gå vidare, lära oss mer jQuery och göra någonting som är lite mer användbart så ska vi göra en funktion där du kan få en div att försvinna på ett läckert sätt genom att klicka på en länk. För detta kan vi återanvända lite kod från exemplet med den försvinnande länken ovan:

$(function() {
$(‘a’).click(function() {
});
});

Här ovan har vi fortfarande en kod som gör att något ska hända när vi klickar på en länk, men ännu inte angett vad som ska hända när länken klickas.

Att kunna dölja en div med dess innehåll kan bara användbart i ett flertal situationer. Vi måste börja med att skapa en länk och en div med ett ID i våran HTML för att vi ska kunna påverka den med jQuery:

<div id=”minDiv”></div>

<a href=”#”>Klicka!</a>

För enkelhets skull kan vi skriva CSS:en för detta exempel direkt i HTML-dokumentet, inuti <head>:

#minDiv {
height: 300px;
width: 300px;
background-color: #000;
}

Nu kan vi skapa jQuery-funktionen som får div:en att försvinna när vi klickar på länken:

$(function() {
$(‘a’).click(function() {
$(‘#minDiv’).fadeOut();
});
});

Nu när du klickar på länken så fade:ar den svarta diven bort och försvinner. Det går dock väldigt snabbt. Inom parenteserna efter ordet function kan man ange parametrar. I metoden .fadeOut kan man ange det antal millisekunder det det ska ta innan div:en ska försvinna. Fyra sekunder är 4000 millisekunder. Exempel:

$(function() {
$(‘a’).click(function() {
$(‘#minDiv’).fadeOut(4000);
});
});

Nu tar det 4 sekunder för div:en att försvinna. Det ser lite bättre ut.

Introduktion till .animate

För att få element att röra sig och animera använder vi metoden .animate. Vi har tidigare använt minDiv för att få den att fade:a bort, men säg att vi vill få den att röra sig 300 pixlar till höger istället. Här är koden:

$(function() {
$(‘a’).click(function() {
$(‘#minDiv’).animate({ ”left” : ”300px” });
});
});

Detta borde få minDiv att röra sig 300 pixlar till höger när vi klickar på länken, men om du provar koden kommer du se att så inte är fallet. Anledningen är att du måste lägga till följande i din CSS:

#minDiv {width: 300px; height: 300px; background: #000; position: relative;}

Lägg märke till position: relative; i slutet. För att ett element ska kunna animera och röra på sig måste du sätta dess position till relative. Om du ändrar detta och nu provar din kod så ska minDiv flytta sig 300 pixlar till höger.

Du kan lägga till animeringar som körs samtidigt. För att få våran div att minska sin bredd till noll samtidigt som den flyttas till höger kan vi göra enligt nedan:

$(function() {
$(‘a’).click(function() {
$(‘#minDiv’).animate({ ”left” : ”500px”, ”width” : ”0px” })
});
});

Ovan har vi skrivit ett kommatecken efter ”left” : ”500px” och lagt till ”width” : ”0px”. Notera också att vi ökat ”left” till 500px, eftersom den andra animationen där div:ens bredd minskar tar ut vänster-animationen om vi inte ökar den. Det är svårt att förstå utan att se själv så kör koden och ändra 500px tillbaka till 300px så förstår du.

När vi nu klickar på länken rör sig minDiv till höger samtidigt som den blir smalare och till slut försvinner. Men tänk om vi inte vill att de båda animationerna ska hända samtidigt utan efter varann? Då får vi ändra våran kod och skriva såhär:

$(function() {
$(‘a’).click(function() {
$(‘#minDiv’).animate({ ”left” : ”500px” });
$(‘#minDiv’).animate({ ”width” : ”0px” });
});
});

På detta sätt spelas den andra animationen efter att den första är klar.

Introduktion till .toggle

.toggle är en användbar funktion som gör att vi kan växla mellan olika lägen. Det bästa sättet för att förstå vad metoden gör är att testa koden själv. Vi fortsätter med våran div minDiv och länken som vi använt i alla tidigare exempel. Lägg nu till .toggle på minDiv såhär:

$(function() {
$(‘a’).click(function() {
$(‘#minDiv’).toggle();
});
});

När du testar koden kan du pröva att klicka på länken flera gånger, och du kommer att se att minDiv försvinner och kommer tillbaka när du klickar på länken. Helt klart användbart. Vi kan göra det hela lite snyggare genom att lägga till att metoden ska ske över 1000 millisekunder = 1 sekund:

$(function() {
$(‘a’).click(function() {
$(‘#minDiv’).toggle(1000);
});
});

Nu får du en snygg animation när du klickar på länken.

.toggleClass

Med metoden .toggleClass kan du lägga till(och ta bort) CSS från en class till ett element. I din CSS skapar du en ny class minDiv2 som vi ska lägga till våran ursprungliga minDiv:

.minDiv2 {border: 5px solid red}

I din jQuery-kod skriver du enligt nedan:

$(function() {
$(‘a’).click(function() {
$(‘#minDiv’).toggleClass(‘minDiv2′);
});
});

Trycker du nu på länken så läggs den röda ramen från minDiv2 till minDiv. Klickar du på länken igen så försvinner den.

.hover

Metoden hover används när man vill att någonting ska hända när besökaren för muspekaren över ett element. I koden nedan lägger jag till en bild i min HTML:

<div id=”minDiv”>

<img src=”bild.jpg” />

</div>

Se till att ha en bild på samma ställe som din HTML-fil så kommer den att ligga inuti minDiv.

$(function() {
$(‘#minDiv img’).animate({
”opacity” : .5
});
});

I koden ovan har vi bestämt bildens opacitet till .5, vilket gör den ”halvgenomskinlig”. Nu till koden som animerar opaciteten tillbaka till 1 när vi för musen över bilden:

$(function() {
$(‘#minDiv img’).animate( {
”opacity” : .5
});
$(‘#minDiv img’).hover(function(){
$(‘#minDiv img’).animate({
”opacity” : 1
});
});
});

Ovan har vi gjort så att när besökaren för muspekaren över bilden (img) som finns inuti minDiv, så körs en funktion. Denna funktion kör en .animate som gör bildens opacitet  till 1, alltså inget genomskinlighet. Notera dock att när man tar bort muspekaren igen så går inte opaciteten tillbaka till .5, och detta fixar vi såhär:

$(function() {
$(‘#minDiv img’).animate({
”opacity” : .5
});
$(‘#minDiv img’).hover(function(){
$(‘#minDiv img’).animate({
”opacity” : 1
});
},
function(){
$(‘#minDiv img’).animate({
”opacity” : .5
});
});
});

Här har vi lagt till en funktion som bestämmer vad som ska hända när besökaren tar bort sin muspekare från bilden. Funktionen säger åt bilden att animera tillbaka bildens opacitet till .5. Lägg märke till kommat efter den första hover-funktionen, efter }.