Algemeen
Als je begint met het maken van een site, dan kom je allerlei informatie tegen op het internet. Je hebt allerlei scripttalen waar je iets mee kan doen. Maar probeer maar eens een begin te vinden als je iets nieuws wilt leren. Dit valt niet mee. Vandaar dat ik op deze site hele simpele voorbeelden en tutorials heb samengesteld om daar verandering in te brengen. Deze tutorial gaat over JQuery.
Om JQuery te gebruiken in je site, moet je een verwijzing opnemen naar het brondocument van JQuery. Dit kun je op verschillende manieren doen. De volgende wijze is het beste, aangezien je dan altijd gebruik maakt van de meest recente versie.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
je kunt ook een link naar specifieke versie van jquery opnemen. Nadeel hiervan is dat je niet verzekerd bent van de meest recente versie van JQuery. Dit gaat als volgt:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
Plaatsen van JQuery in je script
Plaats de tag altijd achter de laatste tag van je pagina. Op die manier laad je eerst de pagina zelf voordat je script wordt geladen.Dit voorkomt veel irritatie bij bezoekers.
Je script plaats je tussen de volgende tags in je pagina:
<script type="text/javascript"></script>
Om een goede jquery script te kunnen maken, moet je weten hoe je bepaalde elementen op je pagina selecteert. Als je al bekend bent met CSS is het niet moeilijk, anders is het even wennen. Je selecteert een element met het $ teken (dollar teken). Vervolgens moet je haakje openen, aanhalingsteken hoog, elementnaam, aanhalingsteken sluiten, haakje sluiten schrijven.
Voorbeeld:
$('div')
Elk element kan je gebruiken als selectiemiddel.
$('div p') // selecteren van alle paragrafen binnen een div
$('#opmaak') // selecteren elementen met een id genoemd "opmaak"
$('.opmaak') // selecteren elementen met class genoemd "opmaak"
$('div p#opmaak a') // selecteren van alle anchor elementen in een paragraaf met id genoemd "opmaak" binnen een div
Om verder te gaan met je eerste jquery pagina, maak je nu een div sectie in je pagina.
<div id="opmaak"> <p>Hier schrijf je wat tekst op</p> </div>
De div sectie maak je op door CSS te gebruiken.
#opmaak {
width: 150 px;
height: 300px;
background-color: blue;
color: white;
border: 6px solid red;
margin: 100px 0 0 80px;
}
JQuery heeft een functie .animate(aanpassing,snelheid,callback) waarmee je zaken kunt laten bewegen over je pagina. En hier komt de puzzel samen. Namelijk dat wat je wilt laten bewegen zul je moeten doorgeven aan de functie .animate. Door de naam aan te geven, weet de functie wat je wilt laten bewegen. Vervolgens geef je aan de functie mee wat je wilt veranderen, de snelheid en of er iets moet gebeuren met de callback. Dit laatste laat ik nu voor wat het is.
De code komt er als volgt uit te zien:
<script type="text/javascript">
$('#opmaak').animate({'margin-top': '300px', 'margin-left': '400px'},1000);
</script>
Allereerst geef je aan wat je wilt veranderen aan jouw element. In het voorbeeld verander je de margin-top en de margin-left waardoor je een schuif effect krijgt. Daarna geef je aan hoe snel dit moet. In dit geval gaat het om millisecondes, waarbij 1000 milliseconde gelijk staat aan ��n seconde.
Als je de functie van animate wilt omschrijven, kun je de volgende omschrijving hanteren:
.animate({'param': 'value', 'param2': 'value'}, speed, callback)
Hieruit blijkt wat de zaken zijn die je kunt aanpassen.