U ovom tutorijalu ćemo se upoznati sa osnovama jQuery-ja i načinom na koji radi. Neophodno je napredno znanje HTML-a i JavaScript-a pre početka ovog tutorijala (uskoro kompletni tutorijali o njima).
jQuery
jQuery je brza JavaScript biblioteka koja pojednostavljuje upravljanje i rukovanje HTML elementima, omogućuje animacije, i AJAX aplikacije za ubrzani web razvoj. jQuery je je osmišljen da promeni način na koji pišete JavaScript.
Iz mog dosadašnjeg iskustva, jQuery je JavaScript biblioteka koju je najlakše savladati i koja se najlakše koristi. I predstavlja upravo to, revoluciju u načinu pisanja vaših JavaScript aplikacija. Kao relativno mala, brza i stabilna biblioteka, ona je najbolji izbor, kako za početnike tako i za iskusne developere.
U prilog tome govori i činjenica da se jQuery koristi na mnogobrojnim poznatim sajtovima kao što su: Google, Digg, Mozilla, Drupal, Wordpress, i mnogi drugi.
Primena
Šta sve možete sa jQuery-jem?
Pošto je, kao što smo rekli, jQuery napredna JavaScript biblioteka, sa njim možete sve što i upotrebom klasičnog JavaScript-a, samo mnogo brže i jednostavnije. Od prikupljanja informacija o elementima stranice, preko menjanja atributa i vrednosti, do menjanja samih elemenata unutar HTML-a. Rad sa AJAX-om nikada nije bio lakši. Ugradjene funkcije u koje je potrebno samo da prosledite vrednost, vraćaju obradjeni podatak sa servera bez potrebe vašeg znanja rada sa AJAX-om.
Dakle, sve što ste ikada želeli da postignete sa JavaScript-om, a za to vam je bila potrebna gomila koda, sada ste u mogućnosti da uradite u samo desetak linija.
I najvažnije od svega, ne morate da brinete o verziji i vrsti browser-a na kojem će se izvršavati vaš kod! Pošto svi znako kakve muke mogu da zadaju različiti browseri korišćenjem svako svojih (ne)standarda, programiranje u klasičnom JavaScript-u je podrazumevalo pisanja više različitih funkcija za iste radnje, kako bi radile na različitim browser-ima. Koristeći jQuery to više nije slučaj, jer su njegove funkcije pisane da podrže svaki browser i verziju koja se koristi, od starijih pa sve do najnovijih.
Browser-i koje jQuery podržava su:
- Internet Explorer 6+
- Firefox 2+
- Safari 3+
- Opera 9+
- Chrome
Kako se koristi
Prvo što je potrebno da uradite je da skinete poslednju verziju jQuery-ja sa oficijalnog sajta www.jquery.com. Trenutna verzija za koju su pisani tutorijali je 1.4.3, i isti će biti dopunjavani ili menjani kako se i izmene u jQuery-ju budu pojavljivale.Nakon skidanja jQuery-ja, potrebno je da ga pozovete u vašem HTML dokumentu unutar <head> odeljka, kao što pozivate i svaki drugi JavaScript fajl.
<script type="text/javascript" src="/jquery.js"></script>
Napomena: pozivanje jQuery skripte se obavezno vrši pre pozivanja bilo kojih drugih skripti koje koriste jQuery
Nakon ovoga ste spremni da pišete i uključujete svoje skripte u dokument.
Ukoliko ste se ikada susreli sa nekom aplikacijom pisanom u nekoj od popularnih JavaScript biblioteka kao što su jQuery, MooTools ili Prototype, verovatno ste primetili korišćenje dolar ($) znaka. To otprilike uvek izgleda ovako:
var abc = $('div.class');
Poznavaoce JavaScript-a moguće je da će zbuniti ova funkcija jer na prvi pogled ne liči na normalnu funkciju, medjutim ona predstavlja samo ime JavaScript objekta.
Ukoliko vas zanima kako dolar funkcija radi, evo primera:
jQuery = window.$ = function(selector, context) {
// kod funkcije
};
U navedenom primeru, jQuery objekat je ekvivalentan globalnom objektu window koji predstavlja glavni objekat HTML stranice. U javaScript-u kada proširite window objekat tj. drugim rečima, kada window objektu dodate metodu pomoću tačke (.), to znači da se tom novom objektu dodeljuje ista memorija glavnog window objekta. window objekat sadrži sve DOM elemente stranice, tako da se shodno tome novom objektu dodeljuju dati elementi. Ukoliko vam ovo zvuči konfuzno, najlakše objašnjenje posle gornjeg primera je da, svejedno da li ćete vaš glavni objekat pozvati sa window.$ ili samo sa $, odnosi se na isto. Umesto dolar oznake ili jQuery imena, objekat je mogao da se nazove bilo kojim drugim imenom ili simbolom.
Dakle, dolar funkcija predstavlja glavni objekat koji jQuery koristi za smeštanje i pozivanje svojih metoda. Konkretno, unutar dolara prosledjujete željeni element a na njega pomoću tačke nadovezujete jQuery-jeve metode za rad sa datim elemetom.
Ono što karakteriše sve biblioteke i sam razlog njihovog postojanja su njihove metode. Koriste se isto kao i u klasičnom JavaScript programiranju, vezujući ih na objekat, u ovom slučaju dolar objekat, pomoću (.) tačke.
$("div#myid").nekaMetoda();
jQuery poseduje razne vrste metoda, od onih koje vrše prikupljanje podataka o odredjenim elementima, odredjenih radnji na istim i zatim ponovnog vraćanja obradjenih podataka, do onih koje imaju ulogu čiste manipulacije elemntima bez povratnih informacija. Sve ove metode čine jQuery-jev API.
Podeljene su u grupe i neke od njih su: metode za upravljanje atributima, metode za kretanje kroz DOM, za manipulaciju elementima i CSS-om, AJAX metode, itd.
Na delu
Pogledajmo sada najosnovniji primer upotrebe jQuery-ja:
$(document).ready(function(){
// kod za izvršavanje
});
Dakle, pomoću dolar objekta smo jQuery-ju prosledili document element koji predstavlja deo glavnog window objekta i samim tim sadrži sve elemente HTML stranice. Na njega smo vezali metodu .ready() čija je funkcija da sačeka da se prosledjeni element učita i tek onda pokrene prosledjeni kod. Ovako se najčešće pokreću jQuery-jeve funkcije iz <head> odeljka, kako bi se izbeglo pokretanje skripte pre nego što se dokument u potpunosti učita.
Pre nego što nastavimo sa praktičnom primenom, potrebno je da se upoznamo sa svakom od jQuery metoda, kako bi znali čime da postignemo ono što želimo. U narednom tutorijalu vas čekaju detaljna objašnjenja svih njegovih metoda sa konkretnim primerima.
![Web Arena [at] Blink](/images/stories/web-arena-at-blink/thumb-small.jpg)
