HTML-CSS-JS 1.2 Introductie jquery Javascript module 4
.jquery Wat is jquery? jquery is een bibliotheek voor javascript! jquery heeft als motto Wirte less, do more! Met meer code veel meer mogelijkheden! jquery is geen programmeertaal! Ontstaan in 2006 en bedacht door John Resig jquery is een framework ontworpen om het programmeren met javascript te vereenvoudigen! In 30% van de 10.000 meest bezochte website wordt jquery gebruikt!
Javascript module 4
.jquery De basis! Javascript module 4
Voorbereiding Om jquery ook daadwerkelijk te kunnen gebruiken, moet deze eerst gedownload worden en in de webpagina waar het gebruikt gaat worden opgenomen worden. In de html/php pagina link je deze dan weer Het is niet verplicht om jquery op de eigen server te hosten, omdat er verschillende alternatieven hiervoor zijn. Dit heeft als voordeel voor de eind gebruiker dat wanneer iedereen deze code included, zijn bandbreedte verbruik omlaag gaat. Op het internet zijn er meerdere sites die jquery als laatste versie hosten. v.b. http://code.jquery.com/jquery-latest.js Javascript module 4
Module 5 html/css /JS Downloaden van jquery jquery kan gedownload worden van, hoe verrassend, jquery.com. Er zijn 2 verschillende versies beschikbaar: De minified versie De development versie Het grote verschil tussen deze 2 versies is dat in de minified versie alle enters en het overbodige commentaar verwijderd zijn, maar daardoor ook vrij onmogelijk is om te lezen. In deze module maken we gebruik van de minified versie, alhoewel de voorbeelden waarschijnlijk ook prima werken met de development versie. Javascript module 4
.jquery Linken in pagina Om jquery te kunnen gebruiken moet in de <head> van iedere webpagina een link geplaatst worden naar het bestand. Intern extern Link naar voorbeelden
De basis van jquery De basis van jquery begint met het selecteren van de elementen waarmee je wilt gaan werken. Zodra je een element hebt geselecteerd kun je hier de krachten van jquery op loslaten. Het selecteren t.b.v. jquery is zeer eenvoudig. Je kunt hierbij CSS selectors gebruiken, maar ook CSS3 selectors kunnen worden gebruikt! Dit zijn enkele voorbeelden hoe je elementen kunt selecteren: // Selecteer all P elementen $("p") // Selecteer alle P elementen met de class "test" $("p.test") // Selecteer P elementen die in een DIV element staan $("div p")
events! jquery maakt gebruik van zogenaamde "javascript events". Het komt er hierbij op neer dat er een bepaalde actie aan het element gekoppeld wordt. Voorwaarde hiervoor is wel dat het element al bestaat wanneer de javascript code wordt uitgevoerd. Een oplossing hiervoor zou zijn om alle code onderin de pagina te zetten, maar het is ook mogelijk om javascript te laten wachten totdat alle code is ingeladen. Dat kan op 2 manieren: // De lange manier: $(document).ready(function() { // Hier komt alle code die uitgevoerd moet worden }); // De korte manier: $( function() { // Hier komt alle code die uitgevoerd moet worden });
Voorbeeld 1 Module 5 html/css /JS
jquery selectors! Module 5 html/css /JS In jquery kan je d.m.v. speciale selectors acties aan elementen koppelen. Hieronder 2 selectoren. :odd $( p:odd ).css("color","red"); // zorgt ervoor dat ieder gevonden even p-element rode teksten krijgt. :even $( p:even ).css("color", blue"); // zorgt ervoor dat ieder gevonden oneven p-element rode teksten krijgt. Voorbeeld 2
jquery selectors! Hieronder nog 2 selectoren. :first $( p:odd ).css("color","red"); // zorgt ervoor dat de eerst gevonden p-element rode teksten krijgt. :last $( p:even ).css("color", blue"); // zorgt ervoor dat de als laatste gevonden p-element rode teksten krijgt. Voorbeeld 3
Opdracht 1! Maak onderstaand voorbeeld na alle styling moet d.m.v. jquery script geregeld zijn! (upload naar natschool) body-element 3 p-elementen
jquery.click event //.click event $(selector).click(function() { // Hier komt alle code die uitgevoerd moet worden }); Handlers! //.hide $( div ).hide() // de div wordt niet getoond //.show $( div ).show() // de div wordt vertoond
Opdracht 2! Breidt het voorbeeld uit voor met Ajax, PSV en FC Twente. na alle styling en events moeten d.m.v. jquery script geregeld zijn! (upload dit voor het begin van de volgende les naar natschool) Klik tekst verschijnt Klik tekst verdwijnt