login  Naam:   Wachtwoord: 
Registreer je!
 Tutorials
Tutorials > Javascript

Gegevens:
Geschreven door:
 svm
Moeilijkheidsgraad:
 Gemakkelijk
Hits:
 20104
Punten:
Aantal punten:
  (4)
Aantal stemmen:
 2
Stem:
 Niet ingelogd
Nota's:
 Lees de nota's (6)
 

Tutorial:

jQuery - Basis

1. jQuery: een JavaScript framework
2. Installatie
3. Selectors
4. Voorbeelden

1. jQuery: een JavaScript framework

Je hoort het van alle kanten als je het over javascript hebt: jQuery.
Ook wordt dit framework vaak als weg naar de oplossing gegeven op het forum; maar wat is er dan zo magisch aan jQuery?

jQuery is dus een framework voor javascript.
Een framework is een code die het gemakkelijker maakt om in die programmeer- of scripttaal te programmeren.
De code wordt hierdoor vaak compacter, gemakkelijker te maken (je hebt minder code nodig om een functie te bereiken) en dus ook overzichtelijker.

Naast jQuery zijn er, zoals je vast al zal verwachten, meerdere frameworken voor javascript beschikbaar; ieder met zijn eigen functies en opmaak, al komen ze grofweg wel op hetzelfde neer.
jQuery is een van de meest gebruikte javascript frameworken die ook op diverse grote website s wordt toegepast, zoals Mozilla, Dell en Drupal (waarschijnlijk ook Google, maar dit heb ik niet zelf kunnen achterhalen).
 top

2. Installatie

Je kunt jQuery op je website toepassen door het framework als extern js-bestand in te laden in je website.
De meest recente versie van jQuery kun je downloaden via de website van jQuery zelf: www.jquery.com.
Je hebt dan de keuze uit de ongecomprimeerde en de gecomprimeerde versie (productie- en ontwikkelingsversie).
Voor gebruik op je website gebruik je de gecomprimeerde versie.

Je doet er echter slim aan om het script niet zelf te hosten, maar het in te laden via Google Code.
Dit omdat de Google servers snel zijn, het je dataverkeer bespaart en het script mogelijk uit de cache geladen wordt; ook goed voor je SEO dus.
Hieronder de simpelste manier van hoe je jQuery 1.5.1 laadt vanaf de Google server:

<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
top

3. Selectors

Zoals de naam al zegt gebruik je selectors om elementen van de webpagina te selecteren.
Als je een element bij het ID wilt selecteren in javascript gebruik je document.getElementById('id_van_element').
Bij jQuery is dit verkort tot $('#id_van_element').
Hierbij staat het dollarteken ($) voor jQuery: dit geeft dus aan dat het stukje code uit het framework voort komt.
Je mag dit ook vervangen door jQuery (dan krijg je dus jQuery('#id_van_element'), maar een dollarteken is uiteraard korter en dus sneller).
Vervolgens geef je aan welk element je selecteert (tussen de ronde haakjes dus) en daarachter kun je een functie zetten, gekoppeld met een punt (.).
De selector in jQuery is dus een stuk compacter dan in het gewone JavaScript, en een ander voordeel is dat je ook op childs kunt gaan zoeken:
Stel je wilt in onderstaande code de div selecteren met id tweede en class opmaak, welke zich bevindt in de div eerste.

<div id="tweede">ID tweede</div>

<div id="eerste">
  <div id="tweede">In eerste ID tweede zonder class</div>
  <div id="tweede" class="opmaak">In eerste ID tweede met class opmaak</div>
</div>

<div id="tweede" class="opmaak">ID tweede met class opmaak</div>
Dan doe je dit met $('#eerste #tweede.opmaak'), iets wat met document.getElementById('id_van_element') niet kan.
Hieronder even drie voorbeeldjes (op bovenstaande div s toegepast) om dit verschil zichtbaar te maken.
Hierbij gebruik ik de functie .css() in jQuery, welke je op een element kunt toepassen om de huidige waarde van een css attribuut te krijgen of deze te wijzigen.
In dit geval zal dus de tekst in de div die door de selector gevonden wordt rood kleuren; de rest blijft zwart:
Standaard JavaScript JavaScript met jQuery framework 
<script language="javascript" type="text/javascript">
window.onload = function () {
    document.getElementById('tweede').style.color = '#FF0000';
}
</script>

ID tweede
In eerste ID tweede zonder class
In eerste ID tweede met class opmaak
ID tweede met class opmaak
 
<script language="javascript" type="text/javascript">
$(document).ready(function(){
   $("#tweede").css("color","#FF0000");
});
</script>

ID tweede
In eerste ID tweede zonder class
In eerste ID tweede met class opmaak
ID tweede met class opmaak
 
<script language="javascript" type="text/javascript">
window.onload = function () {
    document.getElementById('tweede.opmaak').style.color = '#FF0000';
}
</script>

ID tweede
In eerste ID tweede zonder class
In eerste ID tweede met class opmaak
ID tweede met class opmaak
 
<script language="javascript" type="text/javascript">
$(document).ready(function(){
   $("#tweede.opmaak").css("color","#FF0000");
});
</script>

ID tweede
In eerste ID tweede zonder class
In eerste ID tweede met class opmaak
ID tweede met class opmaak
 
<script language="javascript" type="text/javascript">
window.onload = function () {
    document.getElementById('eerste tweede.opmaak').style.color = '#FF0000';
}
</script>

ID tweede
In eerste ID tweede zonder class
In eerste ID tweede met class opmaak
ID tweede met class opmaak
 
<script language="javascript" type="text/javascript">
$(document).ready(function(){
   $("#eerste #tweede.opmaak").css("color","#FF0000");
});
</script>

ID tweede
In eerste ID tweede zonder class
In eerste ID tweede met class opmaak
ID tweede met class opmaak
Wat hierboven gebeurt in gewoon javascript kan niet, omdat je hier alleen het element in kunt aanroepen, en zal dus als waarde null geven.
Met jQuery is dit echter geen probleem.

top
4. Voorbeelden

Hieronder volgen een paar voorbeelden waarin een stukje jQuery wordt gedemonstreerd.
Uiteraard dient van te voren wel het jQuery script ingeladen te worden.
Ook eventuele css die hieronder gebruikt wordt is weggelaten: deze heeft immers geen invloed op het script.

CodeUitwerking
<button id="left">&laquo;</button> <button id="right">&raquo;</button>
<div class="block"></div>

<script language="javascript" type="text/javascript">
$("#left").click(function(){
  $(".block").animate({"left": "-=50px"}, "slow");
});

$("#right").click(function(){
  $(".block").animate({"left": "+=50px"}, "slow");
});
</script>

<button id="fadeToggle">Fade in/uit</button>
<div class="fadeblock"></div>


<script language="javascript" type="text/javascript">
$("#fadeToggle").click(function(){
  $(".fadeblock").fadeToggle();
});
</script>
Voorbeeld van een jQuery plugin: een script geschreven in jQuery voor meer effecten
<!-- het pluginscript inladen -->
<script language="javascript" type="text/javascript"
 src="jquery.tooltip.js"></script>

<script type="text/javascript">
    $(function(){ 
        $("li").tooltip();
    }); 
</script>

<ul>
    <li id="ops1">Opsomming 1</li>
    <li id="ops2">Nummer 2</li>
    <li id="ops3">En een derde</li>
</ul>

<div style="display:none">
    <div id="data_ops1">En een tooltip voor nummer 1</div>
    <div id="data_ops2">Andere tooltip</div>
    <div id="data_ops3">En tooltip nummer 3</div>
</div>
  • Opsomming 1
  • Nummer 2
  • En een derde
En een tooltip voor nummer 1
Andere tooltip
En tooltip nummer 3
Deze code dus: 
<script language="javascript" type="text/javascript"
 src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
Klik om het js-bestand van de tooltip plugin te downloaden.

Dus wil je iets bereiken met JavaScript, maar zou je niet weten hoe je al die code moet schrijven?
Mogelijk kan jQuery je een hoop tijd en werk besparen.

top

 
Persoonlijk Mocht er iets niet duidelijk zijn, dan kun je een nota posten.
Beslis je om laag te stemmen, geef dan a.u.b. ook aan waarom je laag stemt.


« Vorige tutorial : WYSIWYG-editor

© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.02s