Kako radi jQuery
Osnovni uvod u jQuery i osnovne koncepte koje trebate znati
Original: How_jQuery_Works
Autor: John Resig.
Preveo i doradio: Leftfield
Predgovor
Html, Css, Php... sad još i javascript!? Kakva je to biblioteka jQuery? Nevjerovatna! jQuery je jedna od najboljih JavaScript biblioteka. Sa lakoćom možete uraditi jako puno korisnih stvari. Jedna od najvažnijih je interaktivnost sa korisnikom i dinamičnost koju možete postići sa veoma malo programiranja. Zašto smo se odlučili da pišemo o jQuery biblioteci? Nama je najvažnije to što pojednostavljuje razvijanje Ajaksa. Jednostavna i jezgrovita biblioteka koja uveliko skraćuje pisanje dosadnih linija javascript-a. Ako ste ikad imali dodira sa javascript-om toplo ćete se iznenaditi! Sa jQuery, pucate pravo u centar, brzo se uči i ono što želite kôd će učiniti sve bez ikakvih komplikacija. Takodje ne morate se više petljati sa DOM skript pozivima. Šta je od znanja potrebno da se radi sa jQuery bibliotekom? CSS i skoro ništa javascript-a. Skoro ništa? Pa potrebno je da vježbate primjere koje ćemo vam zadati i važno je da znate kako se prave pozivi.Ovo je samo prva od lekcija sa kojom smo počeli. Uskoro ćemo vas toplo iznenaditi sa odličnim tutorijalima i gotovim skriptama koje možete skinuti.
Osnova
Ovo je osnovni uvod, dizajniran kako bi vam pomogao da koristite jQuery. Ukoliko još uvijek nemate spremnu testnu stranicu, počnite da je pravite izradom nove HTML stranice sa sljedećim sadržajem:
<html>
<head>
<script type="text/javascript" src="/jquery.js"></script>
<script type="text/javascript">
// Vaš kod ide odje
</script>
</head>
<body>
<a href="http://www.joomlamontenegro.com/">jQuery</a>
</body>
</html>
Ako je potrebno, izmijenite src atribut u skripti da bi ste ispravili putanju do vašeg jquery.js. Na primjer, ako je jquery.js u istom direktoriju kao i HTML datoteku, onda možete koristiti kao gore navedeno:
<script type="text/javascript" src="/jquery.js"></script>
Obično se danas stavljaju zasebno css, html, image, javascript i ostale datoteke kako bi bila lakša preglednost i radi lakšeg snalaženja. Možete napraviti novi pod-direktorijum i nazovite ga "js" i u njega ubacite jQuery skriptu:
<script type="text/javascript" src="/js/jquery.js"></script>
Kopiju skripte možete preuzeti sa Downloading jQuery stranice.
Pokretanje Koda kad je Dokument spreman
Prva stvar koju Javascript programeri najviše završe radeći je dodavanje koda sličnog ovom:
window.onload = function(){ alert("welcome"); }
Unutar kojeg je kod koji želite pokrenuti čim se stranica učita. Problematično, međutim, Javascript kod se neće prikazivati sve dok ne završite preuzimanje slika (ovo uključuje i banner oglase). Na prvom mjestu, razlog za korištenje window.onload je to što HTML 'dokument' nije još završio učitavanje, kada vi pokušavate pokrenuti svoj kôd.
Za zaobilaženje oba problema, jQuery ima jednostavnu izjavu, da provjeri dokument i da čeka dok nije spreman da se manipulira, poznato i kao "spreman događaj":
$(document).ready(function(){
// Vaš kod ide odje
});
Unutar spremnog događaja, dodajte dogadjaj "kad se klikne na link":
$(document).ready(function(){
$("a").click(function(event){
alert("Hvala na posjeti!");
});
});
Sačuvaj HTML datoteku i osvježi (F5) stranicu u Vašem pretraživaču. Klik na link na bi trebao da izbaci iskakajući prozor, prije nego odet ići na glavnu stranicu Joomlamontenegro.
Za klik i većinu drugih događaja, možete spriječiti zadata ponašanja - ovdje, prateći link na joomlamontenegro.com - pozivom event.preventDefault (), u manipulatoru dogadjaja:
$(document).ready(function(){
$("a").click(function(event){
alert("Link vas nije odveo na joomlamontenegro.com");
event.preventDefault();
});
});
Dodavanje i uklanjanje CSS klase
Važno: Preostali jQuery primjeri će morati biti smješteni unutar "readz event", tako da se izvršavaju kada je dokument spreman da se radilo na njemu. Pogledajte gore Pokretanje Koda kad je Dokument spreman za detalje.
Još jedna zajednički zadatak je dodavanja (ili uklanjanje) CSS (Cascading Style Sheet) klase.
Prvo, definišite neki izgled u <head> vašeg dokumenta, recimo ovako:
<style type="text/css">
a.test { font-weight: bold; }
</style>
Zatim, dodajte addClass da poziva vašu skriptu:
$("a").addClass("test");
Svi vaši a elementi će sada biti podebljani.
Da biste uklonili neku klasu upotrijebite removeClass
$("a").removeClass("test");
- (CSS omogućava da više klasa mogu biti dodijeljene jednom elementu.)
Specijalni efekti
U jQuery, par fensi efekata su omogućeni da bi ste stvarno napravili svoj sajt fenomenalnim. Da bi to testirati, promijenite klik koji ste ranije dodali ovako:
$("a").click(function(event){
event.preventDefault();
$(this).hide("slow");
});
Sada, ako kliknite na bilo koji link, to bi trebalo učiniti da isti polako nestaju.
Povezanost (lančanost) (Magija jQuery-ja)
jQuery koristi interesantan koncept nazvan "Graditelj" (en: Builder) da bi njegov kod bio kratak i jednostavan. Ovaj model dobija na velikoj popularnosti radi toga što je objektno orijentisan.
Ukratko: Svaka metoda unutar jQuery upita vraća upitan objekt kao takav, omogućavajući vam primjenu povezanosti (lanca) na njemu, na primjer:
$("a").addClass("test").show().html("foo");
Svaki od tih pojedinačnih metoda addClass show i html vraća jQuery objekt, omogućujući vam da nastavite primjenom metode za trenutnu skup elemenata.
Možete se čak i dalje od toga, dodavanjem ili uklanjanjem elemenata iz selekcije, izmjena tih elemenata i zatim vraćanje na staru selekciju, na primjer:
$("a")
.filter(".clickme")
.click(function(){
alert("Sada napustate ovaj sajt.");
})
.end()
.filter(".hideme")
.click(function(){
$(this).hide();
return false;
})
.end();
Koje bi radilo protiv sljedećih HTML:
<a href="/http://google.com/" class="clickme">
Ja dajem poruku kad napustis sajt
</a>
<a href="/http://yahoo.com/" class="hideme">
Klinki da me sakriješ!
</a>
<a href="/http://microsoft.com">
Ja sam normalan link
</a>
Metode koje modifikuju jQuery izbor i mogu se poništiti sa end(), su sledeće:
- add(),
- children(),
- eq(),
- filter(),
- find(),
- next(),
- not(),
- parent(),
- parents(),
- siblings() and
- slice().
Provjerite API dokumentaciju za detalje tih metoda.
Povratni pozivi (Callbacks) i Funkcije
Definicija "callback": izvršni kod koji je proslijedjen kao parametar nekom drugom kodu.
Definicija "callback function": funkcija koja je proslijedjena kao parametar (dijete) nekoj drugoj funkciji i koja se izvršava tek kad se prva (roditelj) funkcija izvrši.
Povratni poziv je funkcija koja je prošla kao argument za neku drugu funkciju i egzekutira se nakon što je izvršena njena matična funkcija. Posebna stvar u vezi povratne pozivne funkcije je što se pojavljuje nakon što se "roditelj" može izvršiti prije nego što se povratni poziv izvrši.
Još jedna važna stvar je da zna kako se ispravno pravi povratni poziv. Ovo je mjesto gdje često zaboravljam pravilnu sintaksu.
Povratni poziv bez argumenata
Za povratni poziv bez argumenata što prođete to ovako:
$.get('myhtmlpage.html', myCallBack);
Primijetite da je ovdje drugi parametar jednostavno ime funkciju (ali ne kao string i bez zagrada). Funkcije u Javascript su "Prvorazredna klasa građana" i tako se može prenijeti naokolo kao varijabilne reference i izvršiti bilo kad kasnije.
Povratni poziv sa argumentima
"Što učiniti ako imate argumente koje želite dodati?", možete se upitati.
Pogrešno
Pogrešan put (neće raditi!)
$.get('myhtmlpage.html', myCallBack(param1, param2));
To neće raditi jer poziva
myCallBack(param1, param2)
i onda daje povratnu vrijednost kao drugi parametar u $.get()
Ispravno
Problem u prethodnom primjeru je da myCallBack (param1, param2) je evoluirao prije nego što je proslijedjen kao funkcija.
U donjem primjeru, anonimna funkcija je kreirana (samo blok izjave), i registrovana je kao povratni poziv funkcija. Primjetite korišćenje "function (){'. Anonimna funkcija obavlja tačno jednu stvar: poziva myCallBack, sa vrijednostima param1 i param2 u vanjskom dometu.
$.get('myhtmlpage.html', function(){
myCallBack(param1, param2);
});
param1 and param2 su izračunate kao povratni poziv kad je'$.get' već završio učitavanje stranice.
Komentari mogu biti izbrisani ili izmjenjeni bez vase saglasnotsi ili bilo kakvog obavjestenja.