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.
")" 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>
det virker, MEN det er meget forvirrende sat op, du siger aldrig hvorfra man skal hente det library der. Det virker også som at du regner med folk er lidt klogere end hvad folk ellers normalt er med hensyn til at kunne gætte sig til hvad du mener med dine forklaringer til div punkter.
SvarSletBare den der smule kode, giver mig en del bedre forståelse for jQuery :D.
SvarSletDen var ret nem at følge, og så kan jeg godt lide, at al koden står til sidst som tekst, så man har mulighed for at kopiere det, hvis man er for doven til selv at skrive det :)
Godt forklaret. Det eneste utroligt lille ting kunne være at informere 'dummies' om at css er ergo style. Ellers godt forklarende og nem at følge! :)
SvarSletI could follow it well enough. Having all the code in one window at the end was a good idea.
SvarSletdet ser meget godt ud
SvarSletLidt overkill kode men det kan vi altid snakke om, ellers ok tut :D
SvarSletNice tutorial, thumbs up!
SvarSlet