I föregående del gjorde vi de förberedelser som krävs för att börja använda jQuery. Om du inte läst igenom det, gör det här.
I denna del ska jag gå igenom lite grundläggande kodsnuttar så att du får en smak av hur koden ska byggas. Det är inte svårt och det går snabbt eftersom det mesta redan är inbyggt i .js filen du länkat som source.
Från och med nu skall all kod placeras mellan kommentarsraderna i ditt dokument (om inget annat specificeras). Gör alla exempel genom att klistra in koden och ladda upp till din server, observera vad som händer och läs vidare. Detta för att du ska få lite känsla för jQuery.
Demo
Kod
$(”a”).click(function(event){
alert(”Tack för ditt besök!”);
});
Vad händer?
Demo
Kod
Börja om på nytt, rensa innehållet mellan kommentarstaggarna i din jQuery-kod.
Infoga följande i <head>-delen av ditt dokument (som en vanlig klass):
<style type=”text/css”>
a.fet_text { font-weight: bold; }
</style>
Infoga nu detta innanför kommentarstaggarna:
$(”a”).addClass(”fet_text”);
Vad händer?
Demo
Kod
Lägg in detta i jQuery:
$(”a”)
.filter(”.filter_1″)
.click(function(){
alert(”You are now leaving the site.”);
})
.end()
.filter(”.filter_2″)
.click(function(){
$(this).hide();
return false;
})
.end()
Byt länkarna i html-koden mot följande:
<a href=”http://nthdesign.se” class=”filter_1″>nthDesign</a>
<a href=”http://google.se” class=”filter_2″>Google!</a>
Vad händer?
Resterande kod fungerar ungefär som tidigare. Notera att koden är uppdelad i två delar, där vi först anger egenskaper för a-taggar med classen filter_1, avslutar med .end() och repeterar för classen filter_2.
Nu har du förhoppningsvis fått lite kött på benen vad gäller jQ, …
I nästa del av min jQuery-serie kommer jag att visa ett mer avancerat tutorial. Vad sägs om ett dynamiskt dragspel (accordion) i AJAX?
Slut: Del 2 – inledande kodning
Fortsättning: Del 3 – dragspel
kan du inte lägga upp länkar till sidor som kör de exempel du gör?
$(”a”).addClass(”fet_test”);??
Done, dock skulle det vara fet_text och inte fet_test.. tack för det!
[...] Fortsättning:Del 2 – jQuery inledande kodning [...]