0 jQuery för nybörjare

jQuery för nybörjare

,

Vill du på ett enkelt sätt komma igång och börja använda javascript på din webbsida eller blogg så ska du definitivt använda dig av jQuery!

jQuery är ett lätt Javascript bibliotek som gör det enklare, snabbare och roligare att använda javascript på din blogg eller webbsida.

Genom enkla men ändå kraftfulla funktioner kan du enkelt skapa animationer och effekter, använda dig av Ajax för att visa RSS-flöden och mycket annat.

Några fördelar med jQuery:

  1. jQuery är betydligt enklare än vanlig javascript!
  2. jQuery minskar mängden kod som behöver skrivas och gör programmeringen snabbare!
  3. jQuery har bra dokumentation och det finns massor av guider och tutorials på internet.
  4. jQuery gör det lätt att använda Ajax som används av bl.a. Google och Facebook
  5. jQuery har mängder av gratis plugins som direkt går att använda.

Kom igång – steg för steg guide

1. Länka till jQuery biblioteket

Det första du måste göra är att länka in jQuery biblioteket på din hemsida. Det finns två sätt att göra detta. Endera kan du ladda hem den senaste versionen från jQuerys hemsida. Sedan lägger du upp jQuery-filen på din server och hänvisar sedan till filen i <head> delen av HTML-dokumentet där biblioteket ska användas.

HTML

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

Det går även att hämta jQuery direkt från Google vilket ofta är att föredra då det bl.a. kortar sidans laddningstid särskilt om det redan finns en version av jQuery lagrad i webbläsarens cacheminnet. För att ladda jQuery från Google skriver du följande HTML-kod mellan <head>-taggarna i HTML-dokumentet.

HTML

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

2. Ange (document).ready funktionen

När jQuery biblioteket väl är hämtat kan vi sätta igång att skriva själva koden. För att köra jQuery kod måste den vara skriven inuti en speciell jQuery funktion. Se nedanstående exempel:

HTML

<script type="text/javascript">
   $(document).ready(function () (
       // Skriv koden här...
   ));
</script>

Denna funktion gör så att jQuery koden i HTML-dokumentet körs när webbsidan är färdigladdad. (Mer precis så körs jQuery skripten där webbsidans DOM är redo.)

3. Skriv jQuery koden

Nu kan du hur man länkar in jQuery biblioteket och hur (document).ready funktionen fungerar är du redo att skriva ditt första Följande exempel gör alla paragrafer (HTML p) blåa när man klickar på dem med musen.

HTML

<script type="text/javascript">
   $(document).ready(function () {
       $('p').click(function () {
         $(this).css('color','blue');
      });
   });
</script>

$(‘p’) är skriptets ”väljare” och fungerar precis som väljaren i CSS. I detta fall anger väljaren att skriptet ska gälla alla paragrafer (HTML p).

Punkten som står direkt efter väljaren behövs för att koppla ihop väljaren med klick-funktionen click(function () { }) som följer direkt efter. Innehållet mellan måsvingarna { } är den kod som ska köras när en användare klickar på väljaren.

$(this) är en speciell väljare som anger att funktionen ska gälla just det element som blev klickat på.

.css(‘color’,'blue’) är en funktion som anger en CSS-regel för ett HTML element. I detta fall anges att CSS-egenskapen ”color” ska anta värdet ”blue”. Varje kodbit avslutas med ett semikolon ; som anger att just detta stycke kod är slut.

Här följer ett all kod för ovanstående exempel:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <script type="text/javascript"
   src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></ script>
   <script type="text/javascript">
      $(document).ready(function () {
          $('p').click(function () {
            $(this).css('color','blue');
         });
      });
   </script>
</head>
<body>
   <p>Detta är en paragraf som blir blå när man klickar på den</p>
</body>
</html>

Läs vidare om jQuery

Dela

| Mer

Kommentarer

O kommentarer för " jQuery för nybörjare" Kommentera nu!

Lämna en kommentar!

Lämna en kommentar

Namn* Epost* Blogg / Webbsida
Liknande artiklar