1 Inleiding
Last updated
Last updated
Interactieve websites bestaan al lang niet meer uitsluitend uit HTML en CSS. Deze technologieën zorgen respectievelijk voor de inhoud en de opmaak van de pagina, maar om het geheel dynamisch te maken, gebruikt men JavaScript.
JavaScript is een client-side scripttaal. Het script wordt dus niet op een webserver uitgevoerd, maar rechtstreeks in de browser. Alle recente browsers ondersteunen JavaScript. Moderne websites maken gretig gebruik van deze technologie om de gebruikerservaring te verbeteren.
Hoewel JavaScript een gestandaardiseerde scripttaal is, geldt dit niet altijd voor de verschillende browsers. Zo hanteren Firefox, Safari en Internet Explorer een totaal verschillend objectmodel.
Om een pagina op al deze browsers eenzelfde gebruikerservaring te geven, zal u vaak per browser specifieke instructies moeten schrijven. Dit maakt het programmeren in pure JavaScriptcode vaak een tijdrovende en frustrerende bezigheid.
Gelukkig zijn er verschillende JavaScriptbibliotheken, ook wel JavaScriptframeworks genoemd, die ons hierbij kunnen helpen. Zo hoeven we ons script maar eenmaal te programmeren en het framework transformeert het script naar de juiste instructies voor de juiste browser.
jQuery is veruit het populairste JavaScriptframework en wordt op heel wat grote websites gebruikt. Denk hierbij maar aan Twitter, Amazon, Microsoft, enz...
De statistieken op de website http://trends.builtwith.com/javascript tonen aan dat jQuery nog steeds in populariteit toeneemt.
De belangrijkste eigenschappen van jQuery kunnen we als volgt samenvatten:
jQuery: The Write Less, Do More, JavaScript Library.
De slogan van jQuery is duidelijk: met enkele lijntjes code kan u zeer krachtige en uitgebreide instructies schrijven.
Crossbrowser compatibel. Schrijf één instructie voor een verscheidenheid aan browsers en browserversies. Zelfs oude browsers, zoals Internet Explorer 6 worden nog vrij goed ondersteund.
Zeer uitgebreide core-bibliotheek. De basisbibliotheek (de core) bevat ontzettend veel kant-en-klare methodes. Zo kan u bijvoorbeeld in één instructie alle elementen met de class .abc selecteren. In pure JavaScriptcode is dit niet zo evident en zal u een ingewikkelde functie moeten schrijven om hetzelfde resultaat te bekomen.
Elementen selecteren gebeurt volgens de CSS-notatie. Een instructie bestaat steeds uit twee of meer delen. Het eerste deel, de selector, selecteert een element. Alle volgende delen beschrijven de bewerking die op de selector wordt uitgevoerd. De selectie gebeurt volgens de CSS-notatie. Al uw kennis over CSS-selectors kan u dus dadelijk verwerken in een jQuery statement. Een voorbeeld: $('img').hide(); Het eerste deel van de instructie, $('img') selecteert alle afbeeldingen op de pagina. Het tweede deel, hide() verbergt alle afbeeldingen.
De inhoud en de lay-out van een webpagina wijzigen (DOM manipulatie). Met jQuery kan u zeer eenvoudig elementen binnen de pagina manipuleren. U kan elementen verwijderen, verplaatsen, wissen en zelfs de lay-out wijzigen.
Reageren op acties van de gebruiker (events). Zodra de gebruiker een event activeert (click, change, resize, ...) wordt een bepaalde actie uitgevoerd. Deze events zijn reeds jaren door alle browsers ondersteund. Meer recente events zoals dblclick en focusout worden maar door enkele recente browsers herkend. jQuery zorgt ervoor dat deze events ook door oudere browsers begrepen worden.
Animaties. jQuery bevat een zeer uitgebreide bibliotheek van animaties en effecten.
Informatie van de server ophalen zonder de volledige pagina te vernieuwen (AJAX). Eén van de belangrijkste toepassingen voor een goede gebruikerservaring is het dynamisch wijzigen van pagina-inhoud zonder de volledige pagina te vernieuwen. Deze techniek, ook wel AJAX genoemd, zit volledig in jQuery geïntegreerd.
jQuery is uitbreidbaar. Naast de basisbibliotheek bestaan er tal van uitbreidingen of plug-ins die u vrij kan gebruiken.
