jQuery on JavaScript-ohjelmointikielellä toteutettu kirjasto. JavaScriptillä tehtävät toiminnot voidaan ohjelmoida jQueryn avulla huomattavasti lyhyemmässä ajassa ja vähemmällä koodilla. Kirjaston virallinen verkkosivusto on www.jquery.com. JavaScriptin DOM-rakenteeseen (Document Object Model) liittyvät elementtien valinnat onnistuvat jQueryllä huomattavasti sujuvammin. Esimerkiksi animaatioita voidaan luoda paljon yksinkertaisemmalla koodilla. jQuery-kirjasto sisältää lukuisia valmiita metodeja, joiden avulla voidaan toteuttaa animaatioita sekä valita elementtejä niiden tunnisteen (ID) tai luokan (class) perusteella kirjoittamalla huomattavasti vähemmän koodirivejä. Koska jQuery mahdollistaa niin monia asioita, se kuuluu suosituimpiin JavaScript-kirjastoihin. Monien verkkosivustojen lähdekoodia tarkasteltaessa huomaa, että niissä käytetään jQuery-kirjastoa. Seuraavat esimerkit ovat peräisin jQueryn viralliselta sivustolta: voimme vaihtaa 'continue'-luokalla varustetun painikkeen tekstin helposti seuraavalla koodilla: $( "button.continue" ).html( "Next Step..." ). Saman toiminnon tekeminen perinteisellä DOM-koodilla vaatisi huomattavasti enemmän koodirivejä. Vastaavasti voimme tuoda esiin piilotetun osion, jolla on tunnus banner-message, painiketta napsauttamalla: var hiddenBox = $( "#banner-message" ); $( "#button-container button" ).on( "click", function( event ) { hiddenBox.show(); });
Kuva: rawpixel.com – www.freepik.com
Kaikki käytetyt metodit on selitetty jQuery-kirjaston verkkosivuston API-dokumentaatiossa. Metodien lisäksi saatavilla on lukuisia valmiita käyttöliittymäkomponentteja, joista yksi esimerkki on https://jqueryui.com/. jQuery UI on jQuery-kirjaston päälle rakennettu valikoitu kokoelma käyttöliittymävuorovaikutuksia, tehosteita, pienoisohjelmia (widgets) ja teemoja. Rakennatpa sitten erittäin vuorovaikutteista verkkosovellusta tai tarvitset vain päivämäärävalitsimen lomakkeeseen, jQuery UI on täydellinen valinta. Bootstrapin tapaan vuorovaikutukset, komponentit, tehosteet ja työkalut ovat sivustolla saatavilla valmiiksi koodattuina. Käyttäjän tarvitsee vain lisätä tarvittavat CDN-linkit HTML-sivulleen. Tarkempaa tutustumista ja käytännön esimerkkejä varten kannattaa vierailla jQuery UI -sivustolla. Toinen tällaisena resurssina käytettävä sivusto on Owl Carousel 2. Se on jQuery-liitännäinen, ja sivustolta löytyy runsaasti myös ilmaista esimerkkikoodia. Lähteet: jquery.com, jqueryui.com, owlcarousel2.github.io/OwlCarousel2