3
Tags:
javascript
Skrevet af
Bruger #14523
@ 18.01.2009
jQuery er et modificeret JavaScript bibliotek som samtidig med at simplicifere JavaScript/HTML integrationen, også giver en masse smarte og ikke mindst smukke funktioner.
jQuery er for tiden blev meget populært og bliver brugt på store hjemmesidder som Google og Digg, samt her på Udvikleren.dk (det er blandt andet jQuery der animere login menuen til venstre!) og når du trykker på "Kode" herunder.
Før vi begynder anbefaler jeg:
-Stærkt Kendskab til HTML
-Stærkt Kendskab til CSS
-En god basis teksteditor (Notepad er for simpel) Jeg bruger Coda (Mac) og når jeg er på Windows bruger jeg Visual Web Developer 2008 (Gratis, men tager helvedes lang tid at downloade, og du kan nøjes med Notepad++ hvis du ikke skal andet end simpel HTML/CSS/jQuery)
Denne serie af tutorials formoder at du hverken har kendskab til JavaScript eller jQuere. Det ville selvfølgelig ikke skade hvis du havde, og det kunne jo være du lærte noget nyt.
Før du går igang
Først skal du hente jQuery. Det gøres her:
http://www.jquery.comDerefter starter vi på vores HTML side (index.html)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Vores Første Side</title>
<script type="text/javascript" src="LINK TIL JQUERY"></script>
</head>
<body>
</body>
</html>
Du skal selvfølgelig ændre "LINK TIL JQUERY" til den rigtigt jQuery fil. Jeg lægger ofte jQuery i en mappe kaldet js, og mit script ender sådan:
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
Nu vil jeg putte noget fyld på siden. Lad os starte med en simpel overskrift og en paragraf: (skal sættes efter <body> og før </body>
<div id="main">
<h1>Lorem Ipsum</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
Find din browser frem og se på din side. "Ja flot... Simpel HTML med simpel fyldtekst... jQuery hvor?" tænker du sikkert. Det kommer nu!
Du kan vælge om du vil kode internt eller ekstern. Dvs om du vil skrive jQuery koden på selve HTML filen, eller om du vil skrive det i en seperat fil, som HTML filen henter ned.
Det smarteste er at lave en seperat fil hvis mange HTML filer skal bruge den samme funktion. Det gør det nemlige lettere at rette i den. Hvis du derimod kun har en HTML fil der skal bruge den funktion, er det lidt overflødigt at give jQuery koden en hel fil for sig selv.
Jeg giver den sin egen fil, så du kan se hvordan man gør:
Lav en ny fil der ligger i samme mappe som jQuery. Kald den hvad du vil, men vær sikker på at det er en JavaScript fil (filnavn.js)
Skriv nu i headeren:
<script type="text/javascript" src="LINK TIL DEN NY JAVASCRIPT FIL">
Du ændrer det selvfølgeligt så det virker for dig.
Så er det igang
Åbn den nye fil i din teksteditor, og skriv:
$(function() {
$('#main p').css({ "display" : "none" });
});Det er en meget simpel kode, men gem den, og opdater din HTML side. Hvis alting virker burde paragrafen blive rød. Jeg vil nu vise hvad koden gjorde:
$(function() { <-Starter en funktion når filen bliver indlæst
$('#main p') <- Henter alle paragrafer i div tagget med id= main (ligesom CSS)
.css({ "display" : "none" }) <-ændre CSS i #main p. Det ville svare til:
#main p {
display: none;
}Bemærk at hvis attributes skrives med bogstaver skal der ' i enden af dem (medmindre de er specielle som "function" og "this") eller kan de skrives uden (tal behøver ikke for eksempel)
; <- ; bruges til at lukke en kommando
}); <- Her lukker vi $(function() {
"Ok flot du fik teksten til at forsvinde... Og CSS ville kunne have gjort det med omtrent 3 gange mindre tekst" tænker du så nu.
Ja du har ret, MEN, når du arbejder med store projekter hvor du foreksempel vil et <p> tag til at forsvinde ved hjælp af: display: none; og så skal tagget poppe frem når man klikker på noget så er jQuery altså det bedste til CSS
Hvorfor? Hvis en bruger ikke har JavaScript slået til, vil <p> stadig kunne ses, selvom jQuery udførte "display" : "none" fordi brugen ikke kunne loade JavaScript filen og kommandoen der ændrer CSS ikke kunne køres.
Hvis du havde skrevet "display: none" ind i CSS filen, ville brugeren uden JavaScript SLET ikke kunne se <p> tagget og de ville slet ikke kun klikke på de link der ville få det til at poppe frem!
Jeg håber du forstår det!
Viderbyg din HTML fil
Nu vil vi have lidt mere fedt på den fesne HTML fil.
Skriv i index.html:
<div id="main">
<h1>Lorem Ipsum</h1>
<a href="#" class="expand">Åben</a>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
Hvad vi lige satte ind var
<a href="#" <- Nyt link der ikke fører nogen steder hen (#)
class="expand"> <- Linkets klasse er expand
Åben <- Teksten med et link
</a> <- Lukning af linket
Meget basisk men bare så jeg er sikker på at du ved hvad jeg lige gjorde!
Gem HTML filen og opdater siden. Du skulle nu se din overskrift samt et link nedenunder (husk nu at du gemte <p> tagget lige før)
Nu skal du så ændre i din jQuery fil:
$(function() {
$('#main p').css({ "display" : "none" });
$('#main a.expand).click(function() {
$('#main p').slideDown(1000);
});
});Det jeg lige skrev ind i koden var:
$('#main a.expand').click(function() {Når der klikkes på linket med klassen expand i <div> tagget med id=main skal der køres en funktion:
$('#main p').slideDown(1000);Den funktion der bliver kørt er: <p> tagget i <div> tagget med id=main skal glide ned (slideDown) på 1000ms (1 sekund).
Som jeg sagde kan tal skrives uden '
});Luk
$('#main a.expand').click(function() {Prøv at gemme alle dine filer og opdater siden. Klik på "Åben". Nu skulle <p> tagget meget gerne glide ned på 1 sekund. Hvis det ikke virker må du kigge mine koder igennem igen, eller downloade den medfølgende fil!
Jeg vil gå igang med et nyt afsnit af serien "Start på jQuery" når juletiden hos familien er forbi (efter anden juledag måske).
Næste gang skal vi viderbygge vores jQuery kode, og
måske kigge lidt på "this"
Vedhæftede filer:
Hvad synes du om denne artikel? Giv din mening til kende ved at stemme via pilene til venstre og/eller lægge en kommentar herunder.
Del også gerne artiklen med dine Facebook venner:
Kommentarer (10)
For mange fejl og forkerte argumenter, som om materialet ikke har været helt indøvet før man skriver.
Lad os tage det gode først:
Jeg må indrømme at jeg nok ALDRIG ville have hørt om jQuery
hvis du ikke have skrevet den her artikkel, så tak!
Dog vil jeg mene at eksemplerne er MEGET svært gennemskuelige og der er en smule for lidt... Skal vi bruge resten af vore dage på at lave dropdownmenuer? nej tak du. Jeg ved godt det kun er en introduktion men alligevel
En hel fin start på JQuery, dog er "onload" koden ikk den bedste. Jeg vil klart foreslå at bruge:
- $(document).ready(function()
- {
- // Kode...
- };
Tak for kritikken. Når jeg selv sidder og læser det igennem, kan jeg sagtens se mine fejl, men det skyldes også min "iver" efter at lære fra mig :p
Jeg går igang med anden del, og det kommer også til at omfatte et specifikt emne, men kan bruges til meget mere. Og så vil jeg prøve at formulere mig bedre næste gang.
Til Jakob: Der fik du mig, og jeg indrømmer at jeg faktisk kun lige er begynd med $(document).ready. Tak for rettelsen, og jeg skriver den ind næste gang.
<script type="text/javascript" src="LINK TIL DEN NY JAVASCRIPT FIL">
Den vil få IE7 til at fucke fuldstændigt, et script tag skal lukkes korrekt i et xhtml miljø som du ligger op til.
Det SKAL være <script></script>
/J
Hvornår får vi mere?
Jeg kunne godt tænke mig at du havde startet med at forklare hvilke fordele jQuery har fem for normal JavaScript. De få eksempler du nævner kunne jeg sagtens lave med JavaScript.
Simon, alt der laves med Jquery kan laves med normalt javascript..
Du spare bare flere timers kodning! Og så er det rigtigt nemt at gå til, plus du har nogen fede effekter på kort tid
.
Jeg vil give det en chance og se hvad det kan. Jeg håber bare at der er andet end en samling blærefunktioner.
Du skal være
logget ind for at skrive en kommentar.