jQuery voor beginners: introductie
9
Aphichat
Nov 13, 2008
Ik ben op dit moment jQuery aan het leren en wil hierbij graag stap voor stap met jullie delen. Voor mij is jQuery erg interessant, omdat het erg universeel en makkelijke javascript library is.
” Voor de algemene informatie kun je naar www.jquery.com “
Ik ga jullie introduceren met een makkelijk scriptje hoe je een class toepast op een element zodra het HTM document geladen is.
01.jQuery koppelen
Voordat we gaan beginnen met onze eerste code gaan we eerst jQuery bibliotheek bestand in de html pagina inladen.
- Download jQuery hier
- Maak HTML document aan
- Maak map (js/) aan
- Zet daarin je jquery-1.2.3.min.js
Tussen je HEAD tags koppel je de javascript bestand.
<script src="js/jquery-1.2.3.min.js" type="text/javascript" charset="utf-8"></script>
02.$(document).ready()
Nu hebben wij jQuery klaar staan voor het maken van onze eerste script.
Voordat we gaan experimenteren moet er 2 regeltjes komen altijd als je jQuery wilt aanroepen!
Ja kan dit onderstaande code ook extern aanroepen, maar omdat dit een korte code is gaan we gelijk in de html inladen.
Zet tussen je HEAD het volgende
<script type="text/javascript" charset="utf-8">
// jQuery aanroepen
$(document).ready(function(){
// Hier gaan we onze script schrijven!
}); // Afsluiting voor alle jQuery code
</script>
03.Class toevoegen
Maak tussen body een h1 kopje aan.
<h1>Mijn eerste jQuery code</h1>
Nu gaan we op de H1 een class toevoegen met behulp van jQuery.
$('h1').addClass('onderlijn');
De H1 op de BODY zal bij het openen van je HTML bestand een class (onderlijn) toegewezen krijgen (die zie je niet in je code) die wordt dus via javascript geladen…
Nu is het simpel een css stijl maken met daarin:
.onderlijn { text-decoration: underline; }
04.Resultaat
Het resultaat is dat je H1 kop een onderlijn krijgt. Dit is nog maar het simpele code van jQuery, de mogelijkheden zijn eindeloos.
<html>
<head>
<title>untitled</title>
<script src="js/jquery-1.2.3.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
// Laden
$(document).ready(function(){
$('h1').addClass('onderlijn');
});
</script>
<style type="text/css" media="screen">
/*css style*/
.onderlijn { text-decoration: underline;}
</style>
</head>
<body>
<h1>Mijn eerste jQuery code</h1>
</body>
</html>
Later zal ik ook gaan uitleggen hoe je een moet animeren met jQuery.
01/06/2009
Dit is al een leuk begin wat jquery betreft…
01/21/2009
Vind ik ook. Ik wil nog wel een paar lessen!
02/02/2009
[...] heb op de vorige jQuery tutorial onder (01.jQuery koppelen) uitgelegd hoe je jQuery in je html pagina kan [...]
02/19/2009
Danku
was al effe aan het rond zoeken
en dit heeft mij wel geholpen
08/08/2009
Je kunt inplaats van
$(document).ready(function () {
});
ook dit doen:
$(function() {
});
Dit is de kortere manier.
08/08/2009
Ah handig ja die korte manier!
11/09/2009
Dankjewel dit helpt me echt op weg.. Het was eerst knip en plak werk en na deze tut snap ik er veel meer van.. Kan je nog meer nederlandse tuts plaatsen?
Alvast heel erg bedankt
12/03/2009
Hoi,
Kijk, dat is nou een goed begin ! Hoop dat je hiermee verder gaat. Is inmiddels al een jaar geleden zie ik.
Zou wel erg handig zijn voor beginners zoals mij.
Bedankt !
01/06/2010
Dat is een zeer mooi begin om jQuery goed te gaan gebruiken, en het idee dat erachter staat te begrijpen!