På denna sida beskrivs "det inledande" om jQuery, bl.a. vad
som krävs för jQuery samt vad funktionen $() och
händelsehanteraren .ready() är
och hur de används.
För att använda jQuery behövs två saker:
Bortsett från att det släpps nya versioner av jQuery med jämna mellanrum så finns det två olika jQuery-filer. Skillnaden mellan dem är att en är i "läsbart" format, d.v.s. är tänkt för utveckling och felsökning, och den andra i komprimerat format (mellanrum och radbrytningar tagits bort), d.v.s. är tänkt för produktion.
jquery-X.Y.Z.js - version X.Y.Z (version 1.6.2 var 231 kB).jquery-X.Y.X.min.js - komprimerad version X.Y.Z (version 1.6.2. var 90 kB).I denna webbplats har jag tagit bort versionsnumret i filnamnet för att inte behöva redigera alla filer om jag byter version.
För att spara besökares bandbredd (och tid) så kan man ange en referens till jQuery-ramverk på en server på Internet, t.ex. hos Google. (Därmed är sannolikheten större att besökare redan laddat ner ramverket när den besöker sida.)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>Ett problem med ovanstående URL är att den laddar en viss version av ramverk, d.v.s. version 3.4 i detta fall, och att om man vill använda den senaste versionen av ramverket så måste man ändra URL:er i alla dokument. Man skulle istället kunna referera till ramverksfilen jquery-latest.js, men då kan man få problem med kompabilitet när ny version av ramverk släpps.
"jQuery-skript" (som faktiskt är "vanlig" JavaScript) kan t.ex. placeras i webbsidans head-tagg eller innan avslutade body-tagg, men även i en extern fil.
<script>
$("h2").css("color", "red");
</script>
<script src="my_jquery_script.js"></script>Till början på sida
jQuery-ramverket bygger på ett jQuery-objekt, vars uppgift är att kapsla in ett eller flera element (DOM-objekt) i webbsidan för att exponera en enhetlig samling av metoder. Genom att kapsla in elementen så kan man använda samma samling av metoder (funktioner) oavsett webbläsare eller version av webbläsare.
Skillnader mellan webbläsare, och versioner av webbläsare, hanteras alltså inuti ramverkets kod. Alltså mer som vi inte behöver bry oss om. :-)
Till början på sida
$() (och konstruktorn jQuery)För att skapa ett jQuery-objekt används funktionen $(),
som är en förkortning för konstruktorn jQuery().
Som argument till funktionen $() (eller jQuery-konstruktor)
kan skickas ett DOM-objekt (t.ex. document) eller en sträng med element i
sida att hämta referenser till. Strängen innehåller "selektorer"
(vilket är ämnet för nästa sida).
De två exemplen nedan betyder samma sak, d.v.s. först används funktionen $()
och sen konstruktorn jQuery(). I exempel så väljs alla h2-taggar och ges (text-)färgen
röd.
$("h2").css("color", "red");jQuery("h2").css("color", "red");
Till början på sida
.ready()Händelsehanteraren .ready() användas för att
skript inte ska börja exekveras förrän hela webbsidan har
laddats. Om sida inte laddats klart så kanske vissa element inte finns
och kod för att manipulera dem kommer inte att fungera.
<script>
$(document).ready(function() {
//kod som ska exekveras nar sida laddats
});
</script>Om argumentet till funktionen $() är en funktion så motsvarar
det ett anrop till händelsehanteraren .ready().
<script>
$(function() {
//kod som ska exekveras nar sida laddats
});
</script>Till början på sida
I detta avsnitt beskrivs en del JavaScript-relaterade saker man behöver förstå, bl.a. konceptet anonyma funktioner.
En anonym funktion är en funktion utan namn, d.v.s. det går inte att anropa den (om den inte kopplats till något, t.ex. en variabel eller händelsehanterare :-)).
Den grundläggande strukturen/koden är följande:
function () { //har saknas namn pa funktion
//kod i funktion
}Anonyma funktioner kan bl.a. användas då man inte behöver referera till funktionen vid namn i kod, t.ex. när man kopplar en händelsehanterare till ett elements händelse eller då man skickar en funktion som argument till en annan funktion.
Funktioner är objekt i JavaScript och kan därför tilldelas till en variabel skickas som argument till en annan funktion.
var minFunktion = function () {
//kod i funktion
}
minFunktion(); //Anropa funktionTill början på sida
Nedan finns några böcker och webbsidor/-platser som jag använt för att skapa denna underwebb.