jQuery del 2: Ett praktiskt exempel på jQuery-kod

JQuery är ett ytterst kraftfullt ramverk som får tidigare svåra kodsnuttar att bli extremt enkla. Det är numera superenkelt att söka i och manipulera HTML. Här följer en snabb introduction till syntaxen och med ett praktiskt exempel som visar styrkan och enkelheten i jQuery.

Du har väl läst Del 1. hur man får igång intellisense för jQuery i Visual Studio?

Så här ser ett typiskt (men enkelt) exempel ut på jQuerys struktur och syntax.

$("h1").click(function() {//När man klickar på en h1-tag
    $(this).toggleClass("highlight");//lägg till eller ta bort css-klassen highlight på taggen man klickade på
});

Strängen ”h1” är en selektor och styr vilket/vilka element du vill göra nånting med. I exemplet ovan så plockas alla h1-taggar ut i HTML-dokumentet och får ett onclick-event som lägger till alternativt tar bort klassen highlight på det klickade elementet (”this” i detta exemplet är alltså det element som användaren klickade på).

Selektorn fungerar precis som vanliga CSS-selektorer, d.v.s. du kan kombinera taggar, klasser, attribut och id för att få väldigt specifika frågor, allt från ”h1” för alla h1, till ”h1.myClass” för alla h1 med klassen myClass till väldigt avancerade som t.ex. ”#ID .class1.class2 .class3, .class4” som då betyder alla element med class3 som ligger under ett element med class1 och class2 som dessutom ligger under ett element med id #ID, samt alla element med class4.

Det som står efter parentesen, t.ex. .click eller .change (för onchange på textboxar) eller .toggleClass(”klassnamn”), kommer att appliceras på alla elementen som passade selektorn. Detta gör det väldig enkelt att lägga på ett betende på flera olika element vilket gör att man inte behöver skriva mängder med onclick=”blabla” på varenda element i HTML-koden. Man kan alltså använda JavaScript på samma sätt som man idag använder CSS, d.v.s. för att separera innehåll och struktur (HMTL) från layout (CSS) och interaktion och logik (JavaScript).

Här följer ett komplett exempel hur man kan göra ihopfällbara sektioner med med pytteliten kod (för enkelhetens skull ligger all kod direkt i HTML-dokumentet).

<script type="text/javascript" src='jquery-1.3.2.js'></script>
<style type="text/css">
   .panel h1 {cursor:pointer;margin: 5px 0px;padding:5px 5px 5px 25px; background-color: #9bb5e4; color: #FFF; font-size: 14px; }
   .panel.closed .content { display: none; }
</style>
<script type="text/javascript">
    $(document).ready(function() {
        $(".panel h1").click(function() {
            $(this).closest(".panel").toggleClass("closed");
       });
    });
</script>
<div class="panel">
   <h1>Första sektionen</h1>
   <div class="content">
        Lite innehåll som går att fälla ut här. Denna är utfälld när sidan laddas.
   </div>
</div>
<divclass="panel closed">
   <h1>Andra sektionen</h1>
   <div class="content">
        Lite innehåll som går att fälla ut här. Denna är ihopfälld när sidan laddas.
   </div>
</div>

Det finns mängder av exempel och nästan exemplarisk dokumentation med kodexempel för varje liten funktion på jquery.com där du också hittar praktiska plug-ins som går från små praktiska hjälpfunktioner ända fram till anvancerade kontroller som kalendrar och redigerbara tabeller. Där finns också steg för steg-instruktioner som kan ta dig från att vara en absolut nybörjare till att bli ett fullblodsproffs.

Nästa del i serien kommer att handla om Ajax med jQuery och WCF (Windows Communication Foundation).