jQuery — Sve što smo naučili

Pregled svih jQuery pojmova i metoda obrađenih na satu, na jednom mjestu.

Kreni prema pojmovima ispod.

⬅ Povratak na početnu

Pojmovi

jQuery
JavaScript biblioteka za brži i kraći kod.
Sintaksa: $(selektor).metoda()
.click() event
Sluša klik korisnika na element i izvršava funkciju.
$('#btn').click(function() { ... });
.slideToggle()
Animirano prikazuje ili sakriva element klizanjem.
$('#box').slideToggle(400);
.fadeIn() / .fadeOut()
Postupno prikazuje ili sakriva element promjenom prozirnosti.
$('#el').fadeIn(500);
.addClass() / .removeClass()
Dodaje ili uklanja CSS klasu na elementu.
$('#el').addClass('aktivan');
.css()
Mijenja CSS stilove elementa direktno iz JavaScripta.
$('#el').css('color', 'red');

Lekcije

jQuery koristi CSS selektore za pronalaženje elemenata. $('#id') bira po ID-u, $('.klasa') po klasi, $('p') sve paragrafe. Na kraju selektora uvijek dolazi metoda koja radi nešto s tim elementima.
Eventi su reakcije na korisnikove radnje. .click() reagira na klik, .hover() na prelazak mišem, a .on('event', fn) je moderniji način pisanja svih eventa.
jQuery ima ugrađene animacije: .show(), .hide(), .toggle(), .slideDown(), .slideUp(), .fadeIn(), .fadeOut(). Sve primaju broj milisekundi kao parametar.
Možemo mijenjati sadržaj i stilove: .text() mijenja tekst, .html() mijenja HTML sadržaj, .val() vrijednost forme, .css() stilove, .addClass() i .removeClass() klase.

Metode — pregled

Metode za prikaz/skrivanje elemenata:

.show() — prikazuje element
.hide() — sakriva element
.toggle() — naizmjenično prikazuje/sakriva
.fadeIn(ms) — pojavljuje se postupno
.fadeOut(ms) — nestaje postupno
.slideDown(ms) — klizi prema dolje
.slideUp(ms) — klizi prema gore
.slideToggle(ms) — naizmjenično klizanje
Metode za upravljanje CSS klasama:

.addClass('klasa') — dodaje klasu
.removeClass('klasa') — uklanja klasu
.toggleClass('klasa') — dodaje ili uklanja klasu
.hasClass('klasa') — provjerava postoji li klasa
.css('svojstvo', 'vrijednost') — mijenja stil direktno
Metode za čitanje i mijenjanje sadržaja:

.text() — čita ili postavlja tekstualni sadržaj
.html() — čita ili postavlja HTML sadržaj
.val() — čita ili postavlja vrijednost forme
.attr('naziv') — čita atribut elementa
.attr('naziv', 'vrijednost') — postavlja atribut