jQuery för nybörjare

Sakta skall det växa fram en bra nybörjarsida om jquery här.

Jag börjar med en länk till jQuery och deras webplats. Det finns så mycket bra dokumentation och information där.

En riktigt bra och aktuell kurs finns på nettuts webplats: …the-largest-jquery-class-in-the-world.
Hoppa på den! Den lär dig massor på 30 dagar!

Då kör vi.

För att jquery skall fungera måste du länka till jquery biblioteket. Lägg länken till jquery i slutet av ditt HTML dokument, innan </body>, lägger du länken till Google CDN:


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Nu när vi har lagt till jquery i HTML filen kan vi börja använda jquery i vårt exempel.

Document ready:

För att inte jquerykoden skall börja köras innan dokumentet är färdigladdat lägger vi all kod innom dokument ready:

$(document).ready(function() {
   // Här skriver du din kod.
 });

Det finns ett alternativt sätt (men jag kommer använda det första alternativet):

$(function() {
 // Här skriver du din kod.
 });

Börja med att välja ut ”p” med med hjälp av jquery:

$(document).ready(function() {        // Vänta tills dokumentet är färdigladdat
 $('h1').hide(5000); // Välj h1. Göm h1 under en tid av 5000 millisekunder (5 sekunder)
 });


Nu har vi ett HTML dokument som detta:

<!doctype html>
 <html>
 <head>
 <meta charset=utf-8>
 <title>jQuery</title>
 </head>
 <body>

<h1>Min Hemsida!</h1>

<!-- Lägg in din jquery sist i dokumentet -->
<!-- Först en länk till jquery biblioteket som ligger på Google's CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<!-- Här skriver vi in jquerykoden mellan <script>...</script>
<script>
$(document).ready(function() {        // Vänta tills dokumentet är färdigladdat
 $('h1').hide(5000); // Välj h1. Göm h1 under en tid av 5000 millisekunder (5 sekunder)
 });
</script>

</body>
 </html>

Testa detta i jsFiddle. Tryck på Run och Rubriken försvinner!

Tänk på att om du vill prova jQuery i jsFiddle, då behöver du tala om att du vill använda jQuery:

Skriv in din kod (eller ändra i min) och tryck på Run:

Läs mera om .hide() på jQuerys sida.

Annonser

Kommentera

Fyll i dina uppgifter nedan eller klicka på en ikon för att logga in:

WordPress.com Logo

Du kommenterar med ditt WordPress.com-konto. Logga ut / Ändra )

Twitter-bild

Du kommenterar med ditt Twitter-konto. Logga ut / Ändra )

Facebook-foto

Du kommenterar med ditt Facebook-konto. Logga ut / Ändra )

Google+ photo

Du kommenterar med ditt Google+-konto. Logga ut / Ändra )

Ansluter till %s