CSS tulajdonságok módosítása

 Ha megvan a kiválasztás, a visszakapott jQuery objektumon a .css(nev, ertek) metódust meghívva állíthatunk be stílus tulajdonságokat. Ahogy stíluslapok szerkesztésekor, itt is a stílus szabály nevét, és a hozzá tartozó értéket kell megadni.

A négyzet háttérszínét tehát így lehet átállítani (a konzolban ki lehet próbálni ezen az oldalon, a fenti négyzet színét fogja átállítani!):

var negyzet = $('#negyzet');            // a "negyzet" id-vel rendelkező element kiválasztása
negyzet.css('background-color', 'red'); // a kiválasztott element(ek) háttérszínének átállítása vörösre

Azt nem kell tudnunk előre, hogy a kiválasztás hány elementet ad vissza. Ha a kiválasztásban egyszerre több element szerepel, akkor egyszerre mindegyiken végzünk műveleteket, ha pedig nem szerepel egy element sem, akkor nem történik semmi.

A következő két példa közül az első az összes bekezdés betűszínét megváltoztatja, a második viszont nem csinál semmit, mert nincs olyan element, amire illeszkedne a megadott kiválasztó kifejezés:

var bekezdesek = $('p');          // a "p" típusú element(ek) kiválasztása
bekezdesek.css('color', 'blue');  // a kiválasztott element(ek) betűszínének átállítása kékre

var ures_kivalasztas = $('.nemletezo'); // a "nemletezo" osztályú element(ek) kiválasztása
ures_kivalasztas.css('color', 'blue');  // a kiválasztott element(ek) betűszínének átállítása kékre

Események

A böngésző a weboldal felhasználójának legtöbb tevékenységét (kattintás, szöveg beírása, stb.) eseményként kezeli. Egy eseményhez mindig hozzá tartozik két fontos tulajdonság (de ezen felül lehet több adata is):

• az esemény típusa (pl. kattintás)
• az az element, amin az esemény keletkezik (pl. az az element, amire a felhasználó rákattintott)

Az eseményekre fel lehet iratkozni, ami úgy zajlik, hogy megadunk egy függvényt, ami meghívódik, ha az esemény bekövetkezik. A feliratkozásnál mindig meg kell adni, hogy melyik element milyen típusú eseményeire iratkozunk fel.

A jQuery-ben az .on(esemeny_tipusa, esemenykezelo_fv) metódus használható feliratkozásra, amit azon a jQuery objektumon kell meghívni, amelyiken a várt esemény be fog következni. A két argumentum jelentése:

• esemeny_tipusa: sztring típusú argumentum, ami az esemény típusát adja meg (pl. 'click')
• esemenykezelo_fv: függvény típusú argumentum, ami meg fog hívódni az esemény hatására

Példa a használatára:

var negyzet = $('#negyzet');
negyzet.on('click', function() {
  if (Math.random() < 0.5) {
    negyzet.css('background-color', 'green');
  } else {
    negyzet.css('background-color', 'red');
  }
});

A példát érdemes a konzolban kipróbálni. Ez után a fenti négyzet kattintás hatására véletlenszerűen vörös vagy zöld színű lesz.

További események, metódusok

Néhány további gyakran használt esemény típus:

• mouseenter: az egérkurzor a kiválasztott element felé kerül
• mouseleave: az egérkurzor a kiválasztott element területét elhagyja
• dblclick: dupla kattintás
• change: beviteli mezőkön (<input>) jön létre, ha megváltozik a mező tartalma

Egyéb hasznos metódusok jQuery objektumokon egyszerű alkalmazások készítéséhez:

• .val(ertek): beviteli mezők (<input>) tartalmának beállítása vagy kiolvasása (ha meg van adva az ertek argumentum, akkor beállít, egyébként kiolvas; dokumentáció)
• .attr(nev, ertek): egy HTML attribútum lekérdezése, vagy beállítása (ha meg van adva az ertek argumentum, akkor beállít, egyébként kiolvas; dokumentáció)
• .hide(): a kiválasztott elementek elrejtése (dokumentáció)
• .show(): a kiválasztott elementek mutatása, ha el voltak rejtve (dokumentáció