Hvad er jQuery, hvorfor bruges det og hvordan bruger man det i praksis?

jquery logo - lær jquery framework og få eksempler på jQuery framework og javascript. Læs mere her på devblog
jQuery - verdens største JavaScript bibliotek

Synes du også det er svært og overvælende at skulle lære JavaScript? 

Så er det heldigt at der i dag findes jQuery, som gør det lettere at udvikle webapplikationer og hjemmesider, som er baseret på JavaScript. 

I denne artikel vil jeg komme omkring alt indenfor jQuery samt give nogle eksempler på hvordan man kan bruge jQuery og sammenligne disse eksempler med JavaScript. 



Hvad er jQuery? 

jQuery er et bibliotek med utallige JavaScript funktioner, som er blevet simplificeret, så der behøves færre linjer kode for at opnå samme resultat. 
Det er et stærkt værktøj som mange web-integratorer og udviklere bruger til at programmere avancerede applikationer, hjemmesider og spil med. 


Hvis du allerede nu kender til CSS og HTML, vil du også vide, at når man skal bruge en selector (id eller class) fra HTML'en i CSS, skal man bruge "#" eller ".". Det samme gælder for jQuery, hvilket gør det mere ensartede at kode og så behøver du ikke at huske på flere forskellige måder at vælge en selector på. Jeg giver eksempler på flere forskellige jQuery funktioner og sammenligner dem med samme funktion i JavaScript, længere nede i denne artikel. 

 

Hvorfor bruger man jQuery?

Det bruges generelt for at programmøren hurtigere kan udvikle nogle professionelle og avancerede hjemmesider og apps, men kan også være en hjælp for programmører der skal vedligeholde en webapplikation eller hjemmeside, da koden er lettere at gennemskue og have et overblik over. Dette er en vigtig faktor at have i mente, da det ikke er sikkert at det er den samme udvikler, der laver support og vedligholder siden, som den udvikler der har lavet siden. 

Hvordan bruger man jQuery?

jQuery er et bibliotek man er nødt til at downloade eller referere i sit HTML dokument, før det er muligt at bruge de mange funktioner, som der tilbydes. Jeg foreslår at downloade jQuery, da dette er med til at optimere pagespeed. Du kan downloade jQuery biblioteket på deres hjemmeside.

Eksempel på hvordan man loader jQuery på de to forskellige metoder: 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

eller

<script src="js/jquery.min.js"></script>

I det første eksempel bliver jQuery hentet fra nettet og det andet eksempel har man filen i en folder kaldet "js".

OBS: Placeringen af jQuery er essentiel, placer det før dit script, ellers virker funktionerne ikke, dette er en fejl man kommer til at begå mange gange før man husker det. 

 

Eksempler på hvordan man kan bruge jQuery

Nu kommer de længe ventede eksempler på hvordan man bruger jQuery.

Alle funktioner kan downloades i bunden af denne artikel.

 

Onclick-funktion i jQuery

I denne funktion vil teksten i p-tagget blive ændret fra sort til rødt. Kopier koden og prøv selv.  

 

<h1>Click funktion</h1>
<button type="button">Klik på mig, for at ændre farven på body-teksten</button>
<p>Jeg er en body-tekst. Når der bliver trykket på knappen, så får jeg en anden farve.</p>

<script>
$("document").ready(function(){
   $("button").click(function(){
      $("p").css("color", "red");
   });
});
</script>

 

 

Vis eller fjern et element med jQuery

I dette eksempel bliver teksten vist eller fjernet. Her er også brugt et id til at definere hvilket element der skal påvirkes. Det er jQuerys toggle-funktion som gør sig nyttigt i det her tilfælde. 

 

<h1>Show/hide funktion</h1>
<button type="button">Klik på mig, jeg fjerner og viser teksten</button>
<p id="toggle">Fjern eller vis mig</p>

<script>
$("document").ready(function(){
   $("button").click(function(){
      $("#toggle").toggle();
   });
});
</script>

 

 

Samme funktion til flere ens elementer med $(this)-selector

Det kan være nyttigt i mange tilfælde at bruge den samme funktion, f.eks. show/hide, hvis der er flere elementer der skal kunne det samme. 
I dette eksempel bliver den samme class brug flere gange, men påvirker kun det element som der bliver trykket på.

 

<h1>Påvirk ét element med samme class som de andre.</h1>
<p class="clickable">Klik på mig</p>
<p class="clickable">Klik på mig</p>
<p class="clickable">Klik på mig</p>
<p class="clickable">Klik på mig</p>

<script>
$("document").ready(function(){
   $(".clickable").click(function(){
      $(this).css("background-color", "blue");
      $(this).css("color", "white");
   });
});
</script>

 

 

 

Sammenligning af JavaScript og jQuery

Her kommer nogle sammenligner af funktioner i JavaScript og jQuery.

 

Hvordan man vælger et element

Der er stor forskel på hvordan elementerne i HTML'en bliver valgt. Her ser du hvor stor forskellen er.

JavaScript

document.getElementById("toggle");
document.getElementsByTagName("p");


jQuery

 

$("#toggle");
$("p");


Det er tydeligt at se en forskel; JavaScript koden er meget længere. 
Dette er en vigtig del af hvorfor webudviklere vælger at bruge jQuery fremfor JavaScript. Ikke fordi det er dumt eller skidt at bruge JavaScript, men simpelthen fordi det hele kan kodes meget hurtigere og kortere med biblioteket. 

 

 

Onclick-funktion i JavaScript

Du har set hvordan man kan lave en klik-funktion med jQuery, nu vil jeg vise dig den samme funktion bare med JavaScript.

 

<h1>Click funktion med JavaScript</h1>
<button type="button" id="clickableId">Klik på mig, for at ændre farven på body-teksten</button>
<p id="pTag">Jeg er en body-tekst. Når der bliver trykket på knappen, så får jeg en anden farve.</p>

<script>
document.getElementById("clickableId").onclick = function(){ changeColor()}

function changeColor(){
   document.getElementById("pTag").style.color = "red";
}
</script>

 

 

 

Jeg håber at disse eksempler gør det lidt lettere at forstå jQuery og hvordan det virker samt forstå hvorfor det er, at udviklere vælger at bruge det fremfor JavaScript.

Download jQuery og JavaScript eksemplerne

 

Lad andre vide at du kunne lide denne artikel

Denne artikel er udgivet af DevBlog.dk devblog logo sort - dansk blog til udvikling af web