Då Microsoft har sagt att jQuery följer med i framtida versioner av ASP.NET så kan det vara bra att veta vad som egentligen går att göra med det. Det finns väldigt många som inte vågar peta på javascript, utan istället använder antingen helt färdiga javascript, eller använder t.ex. ASP.NET Ajax Control Toolkit (inget illa om det, det gör det möjligt att på ett snabbt sätt få in smutt funktionalitet på sidan) för att få sidan lite mer dynamisk. Problemet här är dock att man inte alltid får det exakt som man har tänkt sig, och för att få det så måste man faktiskt våga skapa den där lite småläskiga js-filen och börja skriva.
Visual Studio 2008 kom med utbyggd intellisense för javascript, inklusive möjligheten att ha XML-kommentarer på funktionerna. I och med implementerandet av jQuery i ASP.NET så kommer vi även att få full intellisense med kommentarer även för det, vilket underlättar en hel del.
Jag kommer här att gå igenom en snabb introduktion av selectors i jQuery. Selectors var något som fanns med på ASP.NET Ajax Roadmap, men varför uppfinna hjulet på nytt? Selectors i jQuery är väldigt användbara och välutvecklade och vi kan med dem hämta vissa kontroller på ett mycket smidigare sätt än med vanlig javascript.
HTML-filen jag kommer att använda mig utav ser ut på detta sätt:
1: <html xmlns="http://www.w3.org/1999/xhtml">
2: <head>
3: <title>jQuery Demo</title>
4: <script src="scripts/jquery-1.2.6.js" type="text/javascript"></script>
5: <style type="text/css">
6: .redBackground { background-color: #f00; }
7: </style>
8: </head>
9: <body>
10: <div id="mainContainer">
11: <h1>jQuery Demo</h1>
12: <ul id="ul1">
13: <li><a href="#1">Link #1</a></li>
14: <li><a href="#2">Link #2</a></li>
15: <li><a href="#3" class="link3">Link #3</a></li>
16: <li><a href="#4">Link #4</a></li>
17: <li><a href="#5">Link #5</a></li>
18: </ul>
19:
20: <ul id="ul2">
21: <li><a href="#1">Link #1</a></li>
22: <li><a href="#2">Link #2</a></li>
23: <li><a href="#3" class="link3">Link #3</a></li>
24: <li><a href="#4">Link #4</a></li>
25: <li><a href="#5">Link #5</a></li>
26: <li><a href="#6">Link #6</a></li>
27: <li><a href="#7">Link #7</a></li>
28: <li><a href="#8">Link #8</a></li>
29: <li><a href="#9">Link #9</a></li>
30: <li><a href="#10">Link #10</a></li>
31: </ul>
32: </div>
33: </body>
34: </html>
Det är inga konstigheter här, det enda jag har lagt till här förutom den vanliga HTML-koden är en css-klass kallad redBackground samt att jag hämtar in jQuery 1.2.6 som är den senaste versionen i nuläget.
Selectors i jQuery gör att man kan hämta ett eller flera element med minimal kod. Nedan finns en lista på enkla selectors samt en beskrivning på vad de gör:
Hämtar alla element på sidan.
Hämtar alla ul-element på sidan.
Hämtar alla li-element som ligger någonstans under en ul.
Hämtar alla li som ligger under ett element med id satt till “ul1”.
Hämtar den första länken av alla länkar som ligger under någon li i den ul som har id “ul1”.
Hämtar alla element som har klassen “link3”.
Detta är bara ett handplock av alla varianter som finns med jQuery. När vi har hämtat någon av dessa så kan vi sedan antingen använda dem som vanligt med javascript, eller använda någon utav de funktioner som följer med jQuery. Vill vi sätta klassen “redBackground” på de element som har klassen “link3” så kan vi köra följande kod:
$(".link3").addClass("redBackground");
Då alla metoder returnerar objektet i sig så kan man helt enkelt lägga till nästa metod direkt efter på samma rad. Ett annat exempel där vi vill “fade:a” ut och sedan in varannan li i den ul som har id:t “ul2” så kan vi göra det på detta sätt:
$("#ul2 li:odd").fadeOut().fadeIn();
Sådant som kräver mängder med rader kod om vi hade behövt skriva det själva kan vi nu skriva med en enkel rad!
Vill ni testa de här exemplen snabbt så kan ni lägga till den här koden på sidan efter att referensen till jQuery-javascriptet:
1: <script type="text/javascript">
2: $(document).ready(function() { RunScripts(); });
3:
4: function RunScripts() {
5: $("#mainContainer").fadeOut().fadeIn().fadeOut().fadeIn();
6: alert('All: ' + $("*").length);
7: alert('ul: ' + $("ul").length);
8: alert('ul li: ' + $("ul li").length);
9: alert('#ul1 li: ' + $("#ul1 li").length);
10: alert('#ul1 li a:first: ' + $("#ul1 li a:first")[0].length);
11: alert('.link3: ' + $(".link3").length);
12: $("#ul2 li:odd").fadeOut().fadeIn();
13: $(".link3").addClass("redBackground");
14: }
15: </script>
I javascriptet ovan så kör jag $(document).ready(function); för att köra RunScripts. Anledningen till att jag kör det istället för window.onload = function; är att den sistnämnda kör scriptet när allt på sidan är laddat, inklusive stora bilder och annat som körs på sidan. Med ready-metoden som ingår i jQuery så kan man köra metoden när all HTML-kod har laddats in, vilket gör att det går mycket snabbare.
Ni kan även se att $ används flitigt, och det är i själva verket bara ett alias för jQuery. Det går att skriva till exempel jQuery(“*”), men det kräver extra tecken vilket är anledningen. Används andra bibliotek som t.ex. prototype eller mootools så kan det vara bra att använda originalet då det kan krocka annars.
För mer info om de metoder och selectors som finns, besök jQuery.
Om du har önskemål på något annat om jQuery, så lämna gärna en kommentar så kan jag se vad jag kan göra.