jQuery tutorial – del 1

Jag har jobbat som programmerare i tio år, och har under mycket av den tiden koncentrerat mig på att se till så all data landar på rätt ställe – med rätt förhållande till annan information.

I mitt arbete har jag genom åren också insett att det inte bara krävs att all data kommer rätt. För att skapa ett system som har en bra känsla, där en användare förstår vad han gör och webbsidan svarar på ett sätt som är naturligt, måste man jobba med användargränssnittet. Det är här jQuery kommer in i bilden.

jQuery är ett bibliotek för javascript. Det är en samling funktioner som är avsedda att förenkla arbetet för programmerare och gör det lätt att skapa användbara applikationer. Bland det bästa med biblioteket är att det automatiskt fungerar lika bra i alla stora webbläsare, något som annars kan orsaka mycket huvudvärk och tandagnisslan att uppnå.

jQuery har i benchmarks visat sig vara mycket snabbare än t.ex. Prototype.

För att jobba med jQuery bör man, förutom vana med javascript, ha en del koll på CSS, stylesheets, se min kollega Henriks artikel om detta ämne.

Källkod för senaste versionen av jQuery, 1.4.2 (april 2010), hittar man på http://code.jquery.com/jquery-1.4.2.min.js.

(I exemplen nedan länkar jag till biblioteket direkt).

I denna inledning till att börja förstå jQuery kommer jag att gå igenom några av de grundläggande delarna man behöver för att komma igång:

Selectors

hur man får tag i objekten

Events

när funktioner ska aktiveras

Funktioner, manipulators

funktioner som man påverkar objekt med

Selectors

I jQuery finns det något som kallas för selectors. Genom att använda dem väljer du vilka element du vill påverka.

Exempel:

// Hitta, "selecta", div-element med klassen "info"
$("div.info");

jQuery skapar nu en samling objekt som man kan iterera över med metoden each.
I iterationen behöver man skapa en anonym funktion, som vi kan ge två parametrar, första är index, dvs position i loopen, och andra är en referens till nuvarande objekt i loopen.

Exempel:

$("div.info").each(
	function (index, obj){
		$(obj).text("Div med index #" + index);
	}
);

Nu ska vi skapa några tomma div:ar med klassen info och lägga in javascriptet i vårat dokument.
Vi måste också koppla våran javascriptkod till en “event”, händelse. Denna händelse kan vara t.ex. klick eller när man för muspekaren över ett element. I exemplet nedan använder jag händelsen $(document).ready( ... som talar om för jQuery att köra koden först när sidans element har laddat färdigt.

Exempel:

 <!DOCTYPE html>
 <html lang="sv">
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script>

    <script type="text/javascript">
    $(document).ready(function(){
        $("div.info").each(
            function (index, obj){
                $(obj).text("Div med index #" + index);
            }
        );
    });
   </script>

 </head>
 <body>
    <div class="info"></div>
    <div class="info"></div>
    <div class="info"></div>
    <div class="info"></div>
 </body>
 </html>

När jag kör denna kod blir resultatet:

Div med index #0
Div med index #1
Div med index #2
Div med index #3

Fler exempel på selectors:

// alla text-inputfält i formuläret med id "form"
$('#form input[type=text]').each(...);

// värdet på det valda alternativet i selectmenyn med id "bilmodeller"
bilmarke = $("#bilmodeller :selected").val();

Events

Det är i olika events, händelser, man som webbutvecklare kan påverka hur användaren upplever webbsidan.
En event är som jag tidigare nämnt när sidan laddats, $(document).ready(...);

De objekt man “får tag i” med en selector kan man tilldela funktioner som aktiveras av olika events.

Exempel:

// för varje tabellrad
// sätt färg till #ffccff vid mus över
// tag bort färg när musen lämnar tr
	$(document).ready(function(){
		$("#producttabell tr").each(function(){
			 $(this).mouseover(function(){
			   $(this).attr("style", "background: #ffccff");
			 });
			$(this).mouseout(function(){
			   $(this).attr("style", "");
			 });
		});
	});

Funktioner, manipulators

Ovan manipulerade jag varje element i listan med en metod, .text(), med vilken du kan byta ut innehållet i t.ex. en div.

Det finns många andra metoder man kan jobba med.

Funktionen .attr() sätter attribut på valt element.

Man kan t.ex. ändra värde i en selectbox eller bild i en img-tag.

Exempel:

// när man klickar på knappen med id "changepic":
// välj img-tag med id "mainpic"
// byt därefter ut src-attributet i bilden
// inaktivera knappen när bilden är utbytt

    $("#changepic").click(function(){
    	$("#mainpic").attr("src", "http://images1.wikia.nocookie.net/inciclopedia/images/3/3d/Tux.gif");
        $("#changepic").attr('value', 'Bild utbytt!').attr('disabled', true);
    });

sen måste vi lägga funktionen i $(document).ready(…) för att den ska aktiveras

Exempel:

<!DOCTYPE html>
<html lang="sv">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script>

	<script type="text/javascript">
	$(document).ready(function(){
	$("#changepic").click(function(){
			$("#mainpic").attr("src", "http://images1.wikia.nocookie.net/inciclopedia/images/3/3d/Tux.gif");
			$("#changepic").attr('value', 'Bild utbytt!').attr('disabled', true);

		});
	});
	</script>

 </head>
 <body>

	<img src="http://smt-info.com/wp-content/uploads/2009/12/microsoft_logo.jpg" id="mainpic" />
	<br /><br />

    <input id="changepic" type="button" value="Byt bild!" />

</body>
</html>

Sammanfattning

Nu har du fått en enkel genomgång av hur man kommer igång med jQuery. Den här tekniken jag använder underlättar mycket för oss utvecklare på PRODUKTION203, kodningen går snabbare och resultatet blir stabilt.

De delar jag tagit upp i denna artikel är bara en topp på jQuery-isberget. I nästa artikel kommer jag att gå igenom mer avancerade funktioner/principer. Tveka inte att komma med eventuella synpunkter eller frågor i kommentarsfältet under tiden!

På http://docs.jquery.com/Main_Page finns också mycket material så att du enkelt kan komma vidare.