jQuery
Javascriptin tuki ja toimivuus vaihtelee valitettavasti selaimittain joten on järkevää ottaa käyttöön kirjasto, joka piilottaa ohjelmoijalta selainten eroavaisuudet. jQuery on suosituin javascript-kirjasto.
Esimerkki. Katso sivun lähdekoodi
Comparison of layout engines - Wikipedia
Ennen jQueryn käyttöönottoa sinun on hallittava javascript-kielen perusteet. Lisäksi lue läpi How jQuery Works, Using jQuery Core ja tutustu myös jQueryn API-dokumentaatioon sekä jQuery FAQ.
Perusteet
- Saadaksesi jqueryn käyttöön sinun täytyy ladata jqueryn sivulta viimeisin version jQuery-kirjastosta
- Linkitä jquery html-sivuusi kuten mikä tahansa javascript-tiedosto mutta tee linkitys ennen niitä tiedostoja, jotka tarvitsevat jqueryn ominaisuuksia
- $( elementti ) tai $( "merkkijono") muodostavat erityisen jQuery-objektin, joka laajentaa normaalia DOM-rajapintaa uusilla ominaisuuksilla. kts. jQuery object
- $ ( "css_selector" ) hakee kaikki selektoria vastaavat elementit. Esim. $( "p" ) hakee kaikki p-elementit.
jQuery-objektin length-ominaisuus kertoo montako elementtiä löytyi.
var p = $("p"); var eka_p = p.eq(0); // antaa vain ensimmäisen p-elementin jquery-objektina var eka_p_dom = p.get( 0 ) // antaa vain ensimmäisen p-elementin puhtaana DOM-objektina. Ei siis tunnista jQueryn lisäominaisuuksia // haetaan id:n perusteella var a = $("#omaid"); // haetaan classin perusteella var bar = $(".luokka"); // haetaan elementtejä joilla on tietty sisältö tietyssä attribuutissa var input = $('input[type="text"]'); // monimutkaisempi css-selektori: var input = $("#lomake1 input[name='nimi']"); if ( input.length ) ... // testataan onnistuiko haku. Jos length > 0 niin jotain löytyi
kts. Selecting elements ja working with selections - Jokainen jQuery-objekti on uniikki joten niitä ei voi suoraan vertailla
var foo = $("#oma") // palauttaa objektin jonka id on oma var bar = $("#oma") if ( foo === bar ) alert("ovat samat") // ei toteudu! if ( foo.get( 0 ) === bar.get( 0 ) ) alert("ovat samat") // Toteutuu! DOM-objekteja voi vertailla
- jQuery-objektit eivät ole "live" samaan tapaan kuin DOM-objektit
- HTML-attribuutteja voi muokata .attr()-metodilla:
// muuttaa kaikkien a-elementtien href-attribuutin arvoksi kurssin kotisivun osoitteen: $("a").attr("href", "http://appro.mit.jyu.fi/web-sovellukset"); // palauttaa ensimmäisen a-elementin href-attribuutin arvon: var osoite = $("a").attr("href");
- $(document).ready() vastaa window.onload-tapahtumaa mutta tapahtuu heti kun
sivun DOM on valmiina. window.onload odottaa myös kuvien lataantumista. Yleensä voit aloittaa sovelluksesi seuraavalla rungolla:
$( document ).ready(function() { console.log( "Nyt lähtee!" ); });
Elementtien manipulointi
jQueryssa yleensä sama metodi sekä palauttaa halutun asian arvon tai asettaa sen.
- .html() asettaa tai palauttaa elementin sisältämän html:n
- .text() asettaa tai palauttaa elementin sisältämän tekstin
- .attr() asettaa tai palauttaa elementin attribuutin
- .val() asettaa tai palauttaa lomake-elementin arvon
Huom. muutos vaikuttaa kaikkiin valittuihin elementteihin. Jos haluat vaikuttaa vain yhteen niin älä käytä liian leväperäistä selektoria tai pyydä erikseen vain ensimmäinen elementti.
$("#foo").text("Asetetaan elementille uusi tekstisisältö. Korvaa kaiken vanhan mukaanlukien html-elementit"); var arvo = $("#nimi").val();
Elementtejä voi sijoitella DOM-puussa uusiin paikkoihin seuraavilla tavoilla:
var eka = $("#eka"); var p = $("p"); // kaikki p-elementit p.insertAfter( eka ); // Siirtää kaikki p-elementit eka-objektin jälkeen eka.after ( p ) // sama kuin edellä mutta toisella tavalla esitettynä
Samaan tapaan kuin insertAfter ja after-funktiot toimivat myös insertBefore / before ja appendTo / append.
Elementin voi kloonata .clone()-metodilla.
.remove() poistaa elementin
.detach() poistaa elementin DOM-puusta mutta säilyttää sen vielä muistissa ja elementti voidaan myöhemmin lisätä takaisin DOM-puuhun
.empty() tyhjentää elementin sisällön
Uusia elementtejä voi luoda suoraan: $("<p></p>"); tai $("<p>Uusi kappale</p>");
DOM-puussa navigointi
Työkalut
Kts. iterating.
$.trim(" poista whitespace merkkijonosta "); var taulukko = [1,2,3,4,7]; // iteroidaan taulukko läpi. $.each() on muille kuin jquery-objekteille! $.each( taulukko ) , function(idx, val) { console.log( idx + " : " + val ); }); // valinnoille on oma .each()-metodi: $("p").each(function ( index ) { console.log( index + " : " + $(this).text() ); }); )
Tapahtumien rekisteröinti
Kts. Introduction to events ja jQuery Events.
window.onload = function() { $('#napin_id').on('click', tee_operaatiot); // tai $('#napin_id').click(tee_operaatiot); $('#napin_id').off(("click"); // poistaa kaikki click-tapahtumankäsittelijät $('#napin_id').off(("click", tee_operaatiot); // poistaa vain tee_operaatiot-funktion // delegated event handler. Tämä kuuntelee kaikkien #list-elementin alla olevien // a-elementtien click-tapahtumia. Nyt ei tarvitse erikseen liittää käsittelijää jokaiseen // a-elementtiin vaan #list hoitaa koko homman //. http://learn.jquery.com/events/event-delegation/ $( "#list" ).on( "click", "a", function( event ) { event.preventDefault(); console.log( $( this ).text() ); }); function tee_operaatiot(event) { event.preventDefault(); var dom_object = event.target; // dom-objekti joka aiheutti tapahtuman var dom_object = this; // sama kuin edellä var obj = $( dom_object) // ehdään dom-objektista jQuery-objekti var x = event.pageX; // hiiren x-koordinaatti var y = event.pageY; // hiiren y-koordinaatti var type = event.type; // tapahtuman tyyppi esim. "click" var data = event.data; // mahdollinen eventissä liikuteltu data event.stopPropagation(); // estetään eventin bubbling eteenpäin } }
Katso myös Custom events
Ajax-operaatiot
jQueryn Ajax-ominaisuudet käsitellään Ajax-materiaalissa.
Käyttäjien kommentit