jQuery voor beginners

Je kent HTML en CSS. Nu wordt het tijd om meer functies aan je website toe te voegen. Hiervoor kun je JavaScript gebruiken, maar nog beter is het om jQuery te gebruiken. Deze javascript library biedt zoveel voordelen en heeft eigenlijk vrij weinig nadelen. In dit artikel sta ik stil bij deze voor- en nadelen en de manier waarop je jQuery toe kunt passen in je website.

De voordelen van jQuery

Iedereen die wel eens wat in JavaScript heeft gemaakt zal wellicht tegen het probleem zijn aangelopen dat het script in de ene browser wel werkt en in de andere totaal niet doet wat de bedoeling was. Het team ontwikkelaars van jQuery heeft als uitgangspunt genomen dat de functies in alle browsers werken. Dat wordt Cross-browser compabiliteit genoemd. Dit is feitelijk het grootste voordeel van jQuery. Het blijft handig om steeds de nieuwste versie van jQuery te gebruiken, maar zelfs de ellende-browser Internet Explorer 6 werkt goed met jQuery.

Toekomst

Naast de compabiliteit is er ook nagedacht over toekomstige ontwikkelingen. jQuery is ook volledig te gebruiken met CSS3. Hiermee heb je nog meer krachtige tools in handen.

Er zijn al mooie dingen gemaakt met jQuery, het handige is dat er in de kern van jQuery al nuttige toepassingen zijn verwerkt. Dit is verstopt in een aparte library, de jQuery User Interface (jQuery UI) genoemd. Dialoogvensters, agenda’s en dat soort zaken hoef je dus niet meer zelf te bouwen, maar kun je al gebruiken vanuit de jQuery UI.

Plugins

Mocht je toch iets missen in de kernmodule van jQuery, dan is er ook nog de mogelijkheid om te putten uit een scala aan plugins, speciaal gemaakt om de kern aan te vullen met eventueel ontbrekende elementen.

Geen inline scripts

Mooi is dat het eigenlijk niet mogelijk is om je html code te vervuilen met scripts. De bedoeling is dat je een html pagina gebruikt voor de opzet van een pagina, CSS gebruik je om de elementen op te maken, JavaScript om de functionaliteiten toe te voegen. Het beste is om deze drie verschillende aspecten zoveel mogelijk uit elkaar te houden. Vandaar aparte html pagina’s, externe stijlbladen en externe javascripts.

Bij jQuery kan dit niet anders en dat houd je code schoon en vrij van ongewenste onderdelen die lastig te vinden zijn.

Grote partijen

Naast al deze voordelen kun je er vanuit gaan dat jQuery niet zomaar weer verdwijnt. jQuery wordt toegepast door Google, IBM en Microsoft, en daarmee wordt de levensduur wel gegarandeerd. Als zulke grote partijen meedoen dan moet het ook wel werken en goed zijn.

De nadelen van jQuery

Tja eigenlijk zijn er vrijwel geen nadelen te vinden. Mocht je andere javascript bibliotheken willen gebruiken voor een specifiek onderdeel, dan kan dat, maar meestal is jQuery het beste te gebruiken.

jQuery stelt qua grootte ook weinig voor. Het basisdocument is nog geen 20 kB groot en de makers doen iedere keer hun best om dit nog kleiner te krijgen.

Toepassen van jQuery

jQuery is niets anders dan het toevoegen van JavaScript aan je website. Dat gaat dan ook op dezelfde manier, namelijk door een .js bestand aan te roepen.

jquery website

Dit .js bestand kun je vinden op de website van jQuery. Daar kun je het downloaden en vervolgens in de hoofddirectory plaatsen van je website.

Die code zou er als volgt uit zien:


<head>
<title>Hello jQuery world!</title>
<script type='text/javascript' src='jquery-1.4-min.js'></script>
<script type='text/javascript' src='script.js'></script>
</head>

‘jquery-1.4-min.js’ is het kernbestand, de basismodule en ‘script.js’ is het bestand waar je de toepassingen kunt laten uitvoeren die je zelf schrijft.

CDN

Zoals al eerder aangegeven is Google ook gecharmeerd van jQuery. Zij hebben een Content Delivery Network (CDN) waaruit je de nieuwste versie van jQuery kunt oproepen. Nu hoef je de laatste versie van jQuery niet op je eigen server te draaien.

Er zijn een paar manieren om jQuery op te roepen vanuit de CDN.


<head>
<title>Hello jQuery world!</title>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js'></script>
<script type='text/javascript' src='script.js'></script>
</head>

Wanneer je in het vetgedrukte deel 1.4.0 vervangt door 1.4 dan zal de laatst gemaakte versie binnen de reeks 1.4 worden gebruikt. Dus als 1.4.3 de nieuwste versie is dan wordt deze automatisch overgenomen.

Verander je 1.4 in 1, dan zal, als 1.5 gereleased wordt, deze versie gebruikt worden.

Bovenstaande is dus een voordeel als je Google’s CDN toepast op je website.

Het vervolg

In een volgend artikel wil ik het gaan hebben over hoe je jQuery praktisch gaat toepassen in een website en hoe eenvoudig het gebruik is.

14 Reacties

  1. Ah super! Ik heb al lopen zoeken naar een goede jQuery beginners-tutorial, maar kon niks vinden. Hier zat ik op te wachten. Kijk uit naar het volgende artikel!

  2. @admin, goed artikel. jQuery is naar mijn mening de beste JS library.

    @Joost, Google eens op ‘jQuery for beginners Themeforest Screencast’. Die screencasts hebben voor mij goed gewerkt.

  3. Net van Mootools naar jQuery overgestapt.
    Eerst was Mootools mijn favoriet, tot ik meer dan 5 scriptjes gebruikte (slider, twitter, smoothscroll etc.) toen werkte opeens niets meer.

    Leuk artikel, ga je nog eens verder op jQuery in?

  4. @DNA is Spry niet dood?
    ik gebruikte het altijd met Dreamweaver, maar sinds dat CS4 is verschenen heeft spry geen updates meer gekregen :S

  5. Ik heb geen idee, gebruik het zelf niet.

    Maar ik mix eigenlijk van alles door elkaar. Soms jQuery, soms MooTools en dan weer totaal iets anders…

    Heb bij geen van allen nog echt een grote voordeel gezien tegenover de andere.

  6. Ik gebruik maar één jQuery ding op mijn website: jquery.badbrowser (om te checken voor oude browser en ze dan een melding voor te schotelen). Het was mij echter opgevallen dat óf mijn Lightbox niet werkt, óf mijn badbrowsers niet (hangt er vanaf op welke volgorde ik ze in de code zet, lightbox onderaan in de head werkt lightbox, badbrowser onderaan de head werkt badbrowser maar lightbox niet). Dat snap ik dus niet???

  7. DNA, jQuery is gewoon de beste, waarom ..? 😀

    Er is het meest over te vinden op internet, dus zelf iets “uitvinden” is echt niet meer nodig.
    Het is even snel als mootools en veel sneller dan prototype en yui.
    dojo daarintegen is wel iets sneller, maar die vreet niet alle selectors, dus ook hier is jQuery weer “beter”.

    Geen discussie meer mogelijk => http://mootools.net/slickspeed/

  8. dojo wint dus niet want die vind sowieso 4 selectors niet, dan kan het dus wel sneller zijn, maar als 4 dingen niet werken….

  9. Ik kan wel meer info gebruiken over jQuery, bijv, hoe je een pagina kunt laten scrollen. Ik heb vrijwel het hele internet afgezocht en alles geprobeerd dat ik tegenkwam (da’s best veel) maar ik kom er nog steeds niet uit….dus een gezellig makkelijke tutorial in het Nederlands inclusief complete broncode zou welkom zijn…..;) Thanx alvast!

    Doeiiii!

    D.

  10. hallo,
    ik ben alleen met html bekend en wil nu mijn kennis en site verder uitbreiden, was van plan met php en mysql verder te gaan maar is dit net zoiets, ik heb heel veel foto’s op mijn site.
    wie weet wat in mijn situatie de beste weg is?
    bedankt alvast.

  11. Misschien ook even goed om te vermelden dat je er beter voor kunt zorgen dat je naast de versie op het Google CDN nog een kopie lokaal hebt staan om op terug te vallen als je moet ontwikkelen of wanneer de API van Google opeens niet beschikbaar is.
    Ik gebruik de volgende (failsafe) code daarvoor:
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><script type="text/javascript">if(typeof jQuery==='undefined') document.write(unescape("%3Cscript src='./libaries/jQuery.js' type='text/javascript'%3E%3C/script%3E"))</script>
    Plaats zelf een kopietje van jQuery op je server, voeg het pad daarvan toe aan het tweede <script> blok (hier is dat ./libaries/jQuery.js) en je code zal ook werken wanneer ajax.googleapis.com niet bereikbaar is.

Een reactie achterlaten

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *