Jquery Tutorial.
Skift farve på et element, med et enkelt klik!
Denne blog går ud fra at du besidder basal viden omkring HTML og CSS,
Først er det vigtigt at man indsætter et link i toppen af sit dokument - dette er nødvendigt for at browseren kan forstå hvad du skriver til den.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Dit samlede HTML code lige skal se noglelunde sådan ud:
<div id="element"> er det element vi kommer til at skifte farve på, lige nu er det sat til "red" og ser således ud:
Step 1:
Først skal vi fortælle hvilket element vi vil vælge - Dette gøres på flg. måde:
Dette er jquerys måde at vælge elementer på, lig mærke til at det hedder #element fuldstændig lige som CSS,
(Du kan på samme måde også vælge en class ved at udskifte # med . "$('.element')" )
Step 2:
Herefter fortæller vi hvad vil have elementet skal reagere på - i dette tilfælde vil vi have der sker noget, når vi trykker på det.
Så vi tilføjer et ".click(function)" til vores lille linie kode.
"{" og "}" - det er herimellem magien sker - hvor vi fortæller hvad der skal ske når der klikkes.
")" til sidst er for at lukke vores .click.
step 3:
Vi fortæller så hvilket element der skal manipuleres med når vi klikker - i dette tilfælde er det, det samme element, så vi skriver endnu engang $('#element'), denne gang efterfulgt af ".CSS" der fortæller at vi vil ændre noget ved elementets CSS.
Her vil vi gerne have en anden farve på baggrunden, så vi fortæller den hvilken farve den skal have.
Husk at lukke hele din function med et ";" til sidst.
Her er hele koden:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
#element{
width:100px;
height:100px;
background-color:red;
}
</style>
</head>
<body>
<div id="element"></div>
</body>
<script>
$('#element').click(function(){
$('#element').css("background-color", "green");
});
</script>
</html>
