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
- Linkitä jquery html-sivuusi kuten mikä tahansa javascript-tiedosto, mutta tee
linkitys ennen niitä tiedostoja, jotka tarvitsevat jqueryn ominaisuuksia
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
- $( 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.
kts. Selecting elements ja working with selectionsvar 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
- 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
Käyttäjien kommentit