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

Elementtien manipulointi

jQueryssa yleensä sama metodi sekä palauttaa halutun asian arvon tai asettaa sen.

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

Kommentoi Lisää kommentti
Kurssimateriaalien käyttäminen kaupallisiin tarkoituksiin tai opetusmateriaalina ilman lupaa on ehdottomasti kielletty!
http://appro.mit.jyu.fi/tiea2120/luennot/jquery/
© Tommi Lahtonen (tommi.j.lahtonen@jyu.fi) <http://hazor.iki.fi/>
2017-10-30 15:02:30
Informaatioteknologia - Jyväskylän yliopiston informaatioteknologian tiedekunta