2010-09-17 00:47 #0 av: johan-ahlback

Här går jag igenom lite grunder för jquery. Det förutsätter att du kan html och css då båda dessa krävs för att använda jquery.

Först en liten förklaring om koderna i den här artikeln:
Jag brukar skriva förklaringar på alla koder jag skriver men då skulle artikeln blivit superlång. Men eftersom man måste kunna html och css för att kunna använda jquery så får jag hoppas att du kan läsa koden ändå.

Jquery Grunder.
Jquery är inte ett eget språk utan är ett bibliotek med funktioner, objekt, metoder och egenskaper. Med jquery kan du skriva mindre javascript men ändå göra mer. Med jquery kan du lätt skapa animatiner och ändra noder som finn i DOM. Och om du kan html, css och lite javascript kommer du att kunna att använda lite jquery direkt efter du läst det här.

Om du inte kan javascript så rekommenderar jag att du läser min crash course. det är inte nödvändigt men det kan vara bra.


Hur använder man jquery?
För att kunna använda jquery måste du länka till ett jquery document. Du kan ladda ner det här: http://jquery.com/. Eller så kan du länka till googles jquery document: http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js. Hur länkar man in jquery då? jo det gör man på samma sätt som ett vanligt javascript:

<script type="text/jaascript" src="jquery.js"></script>

Sen skapar du ett js document där du kan lägga din kod och länkar in den på samma sätt.

När ska man använda jquery?
Innan du skapar något i jquery ska du ha nästan all html och css klart. jquery ska inte skapa en sida utan ska bara göra den lite mer användarvänlig och tilltalande. Att skapa sidor bara för att göra sidor i jquery är inte varken bra eller användarvänligt.

Vad är fördelarna med jquery?
Jag kommer aldrig att säga att den är bättre än andra bibliotek, jag har bara fastnat för jquery. men fördelarna med att använda jquery istället för att skriva "vanlig" javascript är många. för det första behöver du inte oroa dig över webbläsare. jquery funkar med de vanligaste inklusive IE6(!). För det andra går det fortare att skriva.

jämnför de här två raderna:

var x = document.getElementById("box");

$x = $("#box");

Det är samma sak. Och om du har jobbat med css förstår du. Jquery använder css selectors. Så du väljer noder precis som du gör i css. Det är behändigt. om vi till exempel ska välja en länk som ligger i en div som i sin tur ligger i en div med id box blir det så här:

$x = $("#box div a");

istället för:

var x = document.getElementById("box");
var div = x.getElementsByTagName("div")[0];
var link = div.getElementsByTagName("a")[0];

En rad istället för tre. Det sparar ganska mycket tid.

jquerys syntax
Jqureys sätt att deklarera variabler och funktioner kan se lite konstiga ut. Man deklarerar variabler med "$" istället för "var", det gör man även med selektorer. Ett onclick i vanlig javascript ser ut så här:

var div = getElementById("link");
div.onclick = click;
function click(){
...
}

men i jquery ser det ut såhär:

$("#link").click(function(){
...
})

man kan även lägga ihop vissa saker:

$("#link").delay(2000).slideUp().slideDown();

Window.onload
Du behöver aldrig använda det längre. Jquery har sin egen funktion för att se om dokumentet laddat klart. den kallas document.ready och ser ut så här:

$(document).ready(function(){
//din kod här
})

Den där lilla biten gör så att skriptet inte körs förens hela DOM är färdigt. Det går även att förkorta det ännu mer genom att skriva

$(function(){
//din kod här.
})

fler css selector
Det är inte bara id och klass selectorn som man kan använda. du kan aven använda :first-child, :last-child, >, nth-child(child) och många fler. en fullständig lista hittar du här: http://api.jquery.com/category/selectors/.

Slide box
För att visa hur jquery fungerar ska jag visa hur man gör en så kallad slide box. du kanske har sett att vissa sidor har en feedback knapp och när man trycker på den så glider en låda ut med ett formulär. jag ska skapa en låda som kommer att glida uppifrån och ner.

När man skapar en sak i javascript är det bra att stanna upp och tänka på vad man vill göra. Och sen planerar man därefter. Jag vill ha en box som glider fram när man klickar på en knapp. man ska stänga boxen med samma knapp. Det betyder att jag behöver tänka på det här:
hur ska html koderna se ut?
hur ska jag hålla reda på om boxen är öppen eller stängd?

Jag börjar med html koderna. Jag behöver en div som ska hålla allt, en div för knappen och en för rutan som ska döljas och visas:

<div id="slider">
<div id="slidercontent">
<div id="slidercontentboxholder">
<div class="slidercontentbox">
<h3>Johan's jquery demo!</h3>
<p>Här visar jag hur lätt jquery är.</p>
</div>

<div class="slidercontentbox">
<h3>logga in</h3>
<form>
<label for="user">Användarnamn:</label>
<input type="text" name="user"/>
<label for="pass">lösenord:</label>
<input type="text" name="pass"/>
<input type="submit" class="button" value="Logga in"/>
</form>
</div>

<div class="slidercontentbox">
<h3>Registrera</h3>
<form>
<label for="user1">Användarnamn:</label>
<input type="text" name="user1" />
<label for="mail">mail: </label>
<input type="text" name="mail" />
<input type="submit" class="button" value="registrera"/>
</form>
</div>

<div class="clear"></div>
</div>
</div>
<div id="sliderbutton">
<a href="#" id="open">logga in | registrera</a>
<a href="#" id="close">stäng</a>
</div>
</div>

Inte den bästa lösningen då jag använder en onödig div för att centrera innehållet. Lägg märke till att jag har både en öppna knapp och en stäng knapp i samma div. Jag döljer stängknappen med css och kommer att använda jquery för att visa/döja rätt knapp.


Nu ska utseendet fixas till med lite css:

#close{display:none;}
p{margin-bottom:10px;}
ul{padding-left:10px;}
#slider{
color:#fff;
position:absolute;
width:100%;
}
#slidercontent{
background-color:#2d2d2d;
padding:10px 0;
display:none;
}
#sliderbutton{
width:200px;
background-color:#2d2d2d;
text-align:center;
-moz-border-radius-bottomright: 50px;
-moz-border-radius-bottomleft: 50px;
padding:5px;
position:relative;
left:70%;
}
#sliderbutton a{color:#fff;}
.slidercontentbox{
display:inline;
float:left;
width:180px;
padding-left:10px;
padding-right:10px;
}
#slidercontentboxholder{
width:600px;
margin:auto;
}

nu när vi är klara kan vi även dölja boxen med display:none; på #slidercontent. Nu syns bara knappen så nu kan vi gå över till jquery för att skapa effekten.

För det första måste vi vänta till DOM är laddat och klart och det gör vi med

$(function(){

})

Nu ska vi tänka till igen och fundera på hur man ska lösa problemet. Man ska trycka på knappen och då ska box visas eller döljas. Alltså måste vi fånga upp när click eventet avfyras för knappen. Sedan måste vi visa eller dölja box. Vi har två knappar med två olika id. Så vi anger bara deras id och fångar click eventet:

$("#open").click(function(){

});

$("#close").click(function(){
});

för att visa eller dölja element med jquery kan man använda hide() och show(). men nu vill jag att den ska glida ner. Därför använder jag istället slideDown() och slideUp(). (Det är viktigt att komma ihåg att slideUp() döljer ett element genom att låta den glida uppåt. Det går inte att visa ett element med slideUp().):

$("#open").click(function(){
$("div#slidercontent").slideDown("slow");
});

$("#close").click(function(){
$("div#slidercontent").slideUp("slow");
});


Om du testar sidan nu kan du öppna den men inte stänga den. Det är för att stäng knappen är dold. För att skifta mellan vilket som är som synlig eller dold kan vi använda en enkel sak som heter toggle. Den kollar upp om ett element är dolt med css. Så om vi har två knapper i samma element och det ena är dolt kommer den att skifta mellan dem:

$("#sliderbutton a").click(function () {
$("#sliderbutton a").toggle();
});

När man klickar på knappen så blir den nuvarande knappen dold och den andra visas istället.

Svårare än så är det inte att skapa något i jquery. För att lära dig mer kan du gå till api.jquery.com och läsa vad det finns för funktioner, metoder och klasser.

Animate
Med jquery kan man även animera på andra sätt. Animate använder css attribut för att animera element (notera: för att animera färger krävs ett plugin som heter jquery.color)

För att visa hur det fungerar kommer jag att använda mig av toggle. Den metoden skiftar funktion varje gång man klickar. Toggle ser ut så här:

$("#knapp").toggle(function(){
//första koden
}, function(){
//andra koden
});

För att animera behöver vi först ett element med tillhörande css:

<a href="#" id="knapp">Animera</a>
<div id="box"></div>

#box{
width:200px;
height:200px;
background-color:#f00;
position:relative;
}

nu ska vi använda toggle och animate för att skapa en animation. När man klickar på länken första gången kommer #box växa. När man klickar igen krymper den tillbaka. Men hur vet vi vilka värden den ska krympa tillbaka till? Om vi hårdkodar det så blir det jobbigt att ändra när man ändrat i css filen. Därför hämtar vi värderna för css först. det gör vi innan toggle:

$box = $("#box");
$boxHeight = $box.css("height");
$boxWidth = $box.css("width");

$("#knapp").toggle(function(){
//första koden
}, function(){
//andra koden
})

nu när vi har de värderna kan vi använda dem senare för att återgå till ursprunget.

Första animationen
Först ska vi skapa en animation som gör elementet större och flyttar på den:

$("#knapp").toggle(function(){
$box.animate({
height: 400,
width: 400,
left: "+50"
})
}, function(){

})

Nu har vi gjort så att när man klickar på knappen så blir elementet dubbelt så stort och så flyttar den sig 50px åt höger.

Så hur får vi tillbaka den igen? Jo vi skapar en ny animate metod i nästa toggle funktion och använder oss av värderna vi plockade fram tidigare:

$("#knapp").toggle(function(){
$box.animate({
height: 400,
width: 400,
left: "+50"
})
}, function(){
$box.animate({
height: $boxHeight,
width: $boxWidth,
left: 0

})
})

Nu animeras den tillbaka när man klickar på knappen igen.

Om man vill ha fler animationer då?
Om man vill ha fler animationer som inte körs samtidigt kan man lägga till en anonym funktion som körs när animationen är klar. kolla på den här exemplet:

$("#knapp").click(function(){
$box.animate({
left: "+50"
},function(){
$box.animate({
top: "+50"
},function(){
$box.animate({
left: 0
}, function(){
$box.animate({
top: 0
})
})
})
})
})

Där har jag nästlat flera animate för att få boxen att glida runt på sidan. Nästan alla metoder i jquery har en så kalla callback funktion som jag använde i animationen.

Hur du ska gå vidare
Vill du lära dig mer om jquery? gå till www.jquery.com och kolla på tutorials och i api dokumenten. Där finner man många exempel och tipps.

Plugins
plugins är script som förlänger jquerys metoder. Det kan vara att man kan skapa bildspel (jquery lightbox) eller som gör det möjligt att animera färger. Det kan vara bra att kolla om det finns ett plugin som är som du tänkt dig innan du kodar. Det är onödigt att koda något som redan finns.

Det var lite om jquery. Hoppas att du är sugen att kolla närmare på det.