jQuery är ett Javascript Framwork vilket innebär att du kan göra riktigt läckra effekter utan att skriva särskilt mycket kod överhuvudtaget. jQuery förenklar animationer, AJAX, HTML och DOS-modifiering samt händelsehantering.

Kom igång

Om du nu inte kommit igång med jQuery ännu så är stunden kommen. Klivet in för att skapa sina första -snygga- effekter och animeringar är förvånansvärt kort. Gå in på jQuerys hemsida och ladda ner den senaste stabila versionen. Skapa en mapp för din hemsida och lägg jQuery-filen i samma mapp.

Importera jQuery

För att importera jQuery till ditt dokument skriver du följande innanför head-taggarna.

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

OBS! Denna kod förutsätter att din jQuery-fil heter jquery.js och att den ligger i samma mapp som ditt dokument.

Alternativt kan du använda dig av Googles API, och ladda jQuery från en extern källa. Lägg då till följande kod innanför head-taggarna.

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'>

Denna kod laddar version 1.3.2 av jQuery från Google.

Hur man börjar

För att trigga igång scriptet när sidan laddat klart skriver du följande kod:

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

Att man låter sidan ladda klart innan man startar scriptet gör att man kan slippa buggar eller onödiga väntetider som du får om du startar det direkt när sidan laddas.

Låt magin börja

Nu ska vi skriva ihop en bit kod som ska ändra ett CSS-attribut hos ett objekt, i det här fallet en DIV som jag skapat lite snabbt. 

#minDIV{width: 200px; height: 200px; background-color: black}

För att göra det måste vi först tala om vad det är för DIV vi vill ändra på. Detta görs genom:

$("#minDIV")

Jag hade tänkt att CSS-attributet ska ändras på min DIV när jag trycker på den, alltså:

$("#minDIV").click();

När jag trycker på den ska vi starta en annan funktion som ska ändra i CSS:en.

$("#minDIV").click(function(){
//Här händer det saker när jag klickar.
  });

Nu måste vi välja vilket objekt som skall påverkas när man trycker på #minDIV, vilket i det här fallet ska vara DIVen själv. Man skriver då helt enkelt $(this).

$("#minDIV").click(function(){
$(this)
});

Du kan även välja att annat objekt genom att skriva följande:

$("#minDIV").click(function(){
$("#EnAnnanDiv")
});

Här är det möjligt att välja i princip vad som helst, allt från ett id till den sista klassen på sidan. Mer läsning om sk. jQuery selectors hittar du i dokumentationen.

Nu är det dags att bestämma vad som ska hända när man trycker på DIVen. Jag vill att bakgrunden ska ändras till en grön färg. jQuery har en funktion som heter css som låter dig ändra ett objekts stil väldigt enkelt. Lägg bara till .css{( attribut )}; efter $(this). För att ändra bakgrunden till grön med CSS skriver man:

background-color: green;

I jQuery blir det:

background: "green"

Lägg bara till det i jQuery-koden nu:

$("#minDIV").click(function(){
$(this).css{(background: "green")};
 });

.css är bara ett av väldigt många olika funktioner jQuery tillhandahåller. Exempel på andra är; SlideUp, FadeIn, Hide, Toggle. Åter igen, dokumentationen.

Nu är det klart. Allt du behöver göra nu är att inkludera scriptet mellan head-taggarna. Slutprodukten blir alltså:

<html>
<head>
<style type="text/css">
#minDIV{width: 200px; height: 200px; background-color: black;}
</style>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#minDIV").click(function(){
$(this).css({background: "green"});
}); });
</script>
</head>
<body>
<div id="minDIV"></div>
</body>
</html>

Kolla in resultatet här.

jQuery kan mer

Det här var bara en liten, liten, liten del av vad jQuery kan göra. För att ge er lite insperation har jag valt ut ett par riktigt snygga jQuery-effekter ni kan kika på.