Att komma igång med jQuery är inte svårt över huvudtaget. Allt du behöver veta är egentligen vad du vill göra. Sen kan det även hjälpa om du kan formulera din idé, för att kunna söka upp andra som gjort samma sak tidigare. Mentaliteten kring programmering i största allmänhet är att man delar med sig av sin kod, och det gäller även i jQuery-samhället.
Enkel installation och implemention
För att du ska kunna komma igång och skriva din egen jQuery-kod behöver du inte göra särskilt mycket. Jag tänkte ta ett väldigt enkelt exempel. Vi ska markera varannat element i en lista. Något som kan vara väldigt omständigt med klasser, php-loopar och annat tjafs.
1. HTML
Vi börjar med en simpel html-uppmärkning, allt vi behöver är en lista med ett par exempelelement, vilket ser ut som följande:
<html>
<head></head>
<body>
<ul>
<li>Exempel</li>
<li>Exempel</li>
<li>Exempel</li>
<li>Exempel</li>
<li>Exempel</li>
<li>Exempel</li>
<li>Exempel</li>
</ul>
</body>
</html>
Låt säga att vi nu vill sätta en ljsugul bakgrund på vartannat li-element, enbart för användarens bekvämlighet. Ofta så markeras tabeller och “datagrids” upp för att underlätta ögats vandring mellan raderna, och det vill vi självklart göra även i det här exemplet.
I det här inlägget tänker jag inte gå in närmare på CSS och klasser i HTML, det kommer senare. Men det vi vill göra är att, genom jQuery, sätta en klass som vi döpt till odd. Det jQuery gör åt oss är då att den applicerar odd på vartannat element, hur lång listan än är.
2. Inkludera jQuery-biblioteket
För att få tillgång till hela härligheten måste vi berätta för vår webbläsare vart jQuery finns att hämta. I det här exemplet tänkte jag att vi länkar till jQuery.com’s egen version. Vilket de själva tycker är helt okej, det underlättar och förenklar för oss användare.
Allt du behöver göra är att klistra in en enkel rad. Den ska ligga i head-taggen enligt följande:
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
</head>
Det här betyder ungefär: inkludera ett javascript-script, hämta det på den här adressen.
3. Komponera koden
Nu är allting klart, allting förutom själva jQuery-koden iallafall.
Som jag skrev tidigare så ska vi markera vartannat element, och sätta klassen odd på de valda raderna. För att koden ska veta vilket html-element som vi vill sätta klassen på så måste vi specificera det.
Det här görs genom CSS-selectors. Man skulle kunna kalla det för en sökning. Om jag t ex skriver in ”p”, som min selector så kommer alla paragrafer att väljas. Vilket i det här fallat (ovan) inte väljer någonting. Hypotetiskt så väljs alla paragraf-element i dokumentet. Skriver vi istället ”ul li” väljer vi alla li’s som ligger i ett ul-element. ”Div#post” väljer alla div-taggar med ett id satt till post. Svårare än så är det inte.
Det vi ska använda är då ”ul li”. Men hur väljer vi vartannat li? Genom att skriva till ”:odd” i slutet förstås! Det blir då alltså ”ul li:odd” (obs: det går även att använda :even).
Nu har vi alltså vår selectorsträng klar, men det saknas fortfarande ett steg. Vi måste sätta klassen odd till de element vi har valt. Det här är väldigt enkelt: vi använder funktionen addClass(). Funktionen tar en parameter, vilket är en textsträng med det namn på klassen som ska appliceras:
addClass(‘odd’);
Syntaxen
Nu har vi alltså vår “sökning” klar, och vi vet även hur man sätter en klass. Det som saknas nu är bara ett par små detaljer. Vi måste till att börja med kontrollera så att allting är färdigladdat på sidan. Alltså ”bromsa” vår kod tills det att sidan är klar och kan hantera jQuery-koden. Om vi kör vår kod innan dess kan vi inte vara 100% säkra på att listan faktiskt har laddats, och i så fall kan koden inte hitta li-elementen.
Ytterligare en detalj som är viktig är att vi måste sätta ihop ”sökningen” och funktionen addClass().
I jQuery, och ett flertal andra programmeringsspråk, skriver man funktioner följande sätt: aktuella-objektet.addClass(‘klassnamn’); Objektet ersätts i syntaxen med t ex ett valt html-element, ett objekt i någon form. I vårt fall skriver vi det såhär: $(‘ul li:odd’). Det här väljer, som ovan nämnt, ut alla udda li-element.
Sammansatt får vi alltså den väldigt enkla kodsnutten:
$(‘ul li:odd’).addClass(‘odd’);
Som jag skrev så måste vi även vänta på “nedladdningen” av sidan. För att göra det här sätter vi vår snutt i en funktion som anropas när den processen är klar. Det ser ut såhär:
$(document).ready(function(){
$(‘ul li:odd’).addClass(‘odd’);
});
Det allra sista vi nu behöver göra är att köra den här koden någonstans. Den här gången väljer vi att köra koden direkt i samma fil som html-koden. Alltså i samma html-fil som vi skrivit listan och inkluderat jQuery-koden ifrån jQuery.com.
För att utföra kod lägger man det i en script-tagg. Såhär:
<script type=”text/javascript”>
$(document).ready(function{
$(‘ul li:odd’).addClass(‘odd’);
});
</script>
Grattis! Du har nu fått till din ett enkelt jQuery-skript! Och svårare än såhär behöver det faktiskt inte vara.
Här kommer all kod tillsammans:
<html>
<head>
<script type=”text/javascript”>
$(document).ready(function(){
$(‘ul li:odd’).addClass(‘odd’);
});
</script>
</head>
<body>
<ul>
<li>Exempel</li>
<li>Exempel</li>
<li>Exempel</li>
<li>Exempel</li>
<li>Exempel</li>
<li>Exempel</li>
<li>Exempel</li>
</ul>
</body>
</html>
