Uvod
Šta je jQuery? JQuery je biblioteka JavaSkript funkcija koja će vam pomoći da lako napravite napredni korisnički interfejs u web aplikacijama. jQuery je dodatak standardnom JavaSkript jeziku koji mu dodaje veliki broj korisnih funkcija za rad sa HTMLom.
Ako bi se napravilo poređenje moglo bi se reći da je jQuery za JavaSkript ono što je .NET za C# - veliki skup korisnih funkcija koje vam pomažu u programiranju. Ovde možete videti osnove jQuery biblioteke.
Uključivanje jQuery biblioteke
jQuery biblioteka je jedan JavaSkript fajl koji treba da uključite u vaše web strane. Sve što je potrebno da uradite je da referencirate jQuery fajl u zaglavlju HTML strane kao što je prikazano u sledećem primeru:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"/>
</head>
<body>
</body>
</html>
Umesto ovog fajla koji je postavljen na jQuery sajtu, možete koristiti neki koji hostuje Microsoft CDN na http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js ili Google CDN https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js. Ako koristite Visual Studio 2010 i ako napravite web aplikaciju jquery biblioteka će već biti uključena u projekat. U tom slučaju je dovoljno uključiti lokalni fajl /Scripts/jquery-1.7.2.min.js. Bez obzira da li uključujete globalni ili lokalni fajl, čim učitate jQuery biblioteku moći ćete da koristite njene funkcije.
Korišćenje jQuery biblioteke
Ukljućili smo jQuery biblioteku i šta sad? Kao i u svakom JavaSkript kodu potrebno je samo staviti kod koji se izvršava u <script> tag koji je postavljen negde u HTML strani kao na primer:
<script type="text/javascript">
var obaveznapolja = $("input.required");
obaveznapolja.each(function(){ $(this).addClass("red"); } );
</script>
Ovaj kod pronalazi sve input elemente koji imaju klasu "required" i svakom dodaje klasu "red". Detalji će biti objašnjeni u nastavku.
Zašto uopšte koristimo Javaskript? U najvećem broju slučajeva da bi napisali neke funkcionalnosti koje se izvršavaju u pregledaču, menjaju HTML trenutne strane, dodaju događaje i slično. U narednim sekcijama će biti prikazano kako se ovo može uraditi pomoću jQuery biblioteke.
Selektovanje HTML elemenata
U standardnom JavaSkriptu postoje funkcije koje omogućavaju da pronađete neke HTML elemente u strani. Uvek su vam na raspolaganju standardne funkcije:
- getElementById - pronalazi elementepo atributu id
- getElementsByName - pronalazi elemente po atributu name
- getElementsByTagName - pronalazi elemente po imenu taga
- getElementsByClassName - nalazi elemente koji imaju određenu klasu (ne podržavaju ga svi pregledači)
jQuery pruža dolar funkciju $( ) za pronalaženje elemenata koja zamenjuje ove funkcije. Primer korišćenja standardnih JavaSkript funkcija i ekvivalentnih konstrukcija sa jQuery bibliotekom je prikazan u sledećoj tabeli:
|
JavaSkript funkcija
|
Ekvivalentna jQuery funkcija |
|
document.getElementById("naslov")
|
$( "#naslov")
|
|
document.getElementByTagName("input")
|
$( "input")
|
|
document.getElementByClassName("required")
|
$( ".required")
|
Kao što se može videti $ funkcija koristi argument koji specificira šta treba da se nađe. Izrazi u $ funkciji se pišu po CSS pravilima (npr # označava identifikator, . CSS klasu). Prednost $ funkcije je u tome što je podržana u svim pregledačima - samo je potrebno uključiti jQuery biblioteku u kojoj se nalazi.
U sledećem kodu se može videti primer kako se jedan element može pronaći po identifikatoru, imenu, tagu ili klasi.
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"/>
</head>
<body>
<input type="text" id="naslov" class="tekst"/>
<script type="text/javascript">
var element = $("#naslov");
element = $(".tekst");
element = $("input");
element = $("[type='text']");
</script>
</body>
</html>
jQuery $ funkcija pruža mnogo više od jednostavne zamene standardnih funkcija - ona vam omogućava da napravite složene upite kojima se pronalaze elementi po nekom kriterijumu. Na primer ako je potrebno pronaći tabelu sa identifikatorom "lista" pa u njoj sve ćelije koje imaju klasu "red" koristila bi se sledeće konstrukcija:
$("table#lista td.red");
Ovakve konstrukcije je nemoguće napraviti bez jQuery biblioteke bez pisanja neke petlje koja prolazi kroz elemente strane i proverava složene uslove. jQuery vam znatno olakšava posao u ovakvim slučajevima.
Promena HTML elemenata
Pored pronalaženja elemenata u HTMLu, jQuery vam omogućava da elementima promenite vrednosti, atribute, klase i slično. Neke od metoda koje su vam na raspolaganju su:
- .html(vrednost) - postavlja html elementa
- .attr(atribut, vrednost) - postavlja vrednost atributu
- .val(vrednost) - postavlja vrednost poljima za unos (tekstualnim poljima, listama i slično)
- .addClass(vrednost),
- .removeClass(vrednost) dodaje ili uklanja CSS klase elementu.
U slučaju da pozovete ove funkcije bez parametra "vrednost" umesto da se postavi vrednost, funkcija će vratiti trenutnu vrednost.
Primer koda koji pronalazi element u HTMLu, postavlja mu vrednost, jedan atribut i klasu je prikazan u sledećem primeru:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"/>
</head>
<body>
<input type="text" id="naslov"/>
<script type="text/javascript">
var element = $("#naslov");
element.val("JQuery");
element.attr("style", "width: 50%");
element.addClass("required");
</script>
</body>
</html>
Možete naći više primera sa ovim funkcijama na jQuery sajtu.
Postavljanje događaja na HTML elemente
Poslednja stvar koja će biti prikazana ovde je postavljanje događaja. Da bi se implementirala neka interakcija sa korisnikom, obično se na elemente postavljaju funkcije koje će biti pozvake kada se izvrši neki događaj. Na primer u sledećem kodu je prikazano kako su postavljene funkcije koje će prikazati obaveštenja kada korisnik klikne na element:
<script type="text/javascript">
function klik() { alert('Kliknuo je na polje' }
function dvoklik() { alert('Dva puta je kliknuo na polje' }
function promena() { alert('Promenjena je vrednost u polju' }
</script>
<input type="text" id="naslov"
onclick="klik"
ondblclick="dvoklik"
onchange="promena"/>
Kao što možete videti funkcije koje će odreagovati na klik, dvostruki klik i promenu su unesene direktno u element kao atributi što je loša praksa zato se tako meša HTML i JavaSkript kod. bolji pristup je ostaviti HTML u čistom obliku i u posebnom JavaSkriptu dodati funkcije koje će reagovati na događaje. Ovaj primer je prikazan u sledećem listingu:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"/>
</head>
<body>
<input type="text" id="naslov"/>
<script type="text/javascript">
var element = $("#naslov");
element.click( function() { alert("Korisnik je kliknuo na polje za unos"); });
element.dblclick( function() { alert("Korisnik je kliknuo na polje za unos"); });
element.change( function() { alert("Korisnik je kliknuo na polje za unos"); });
</script>
</body>
</html>
Funkcije click(funkcija), dblclick(funkcija), change(funkcija) vam omogućavaju da na element postaite funkciju koja će reagovati na neki događaj i to u posebnom JavaSkript delu. Na ovaj način se dobija čistiji kod.
Lokacija JavaSkript koda
U prethodnim primerima JavaSkript kod je stavljen u <script> tag na kraju tela HTML strane. Razlog za ovo je jednostavan - pošto u kodu pronalazimo elemente u HTML strani, kod mora da sačeka da se ti elementi učitaju. Ipak, obično se JavaSkript kod stavlja ili u <head> tag ili u eksterne JavaSkript fajlove koji se opet stavljaju u <head>. Međutim, da smo stavili kod na početak strane on ništa ne bi pronašao pošto HTML elementi koje pokušava da nađe još uvek nisu učitani.
Stavljanjem koda na kraj strane možete biti sigurni da će svi elementi koji vam trebaju biti učitani.
Međutim možete staviti ovaj kod na na početak strane pod uslovom da obezbedite da se neće izvršiti odmah nego da će sačekati da dokument postane spreman.
Dolar funkcija vam ovo omugućava. Dolar funkciji možete da prosledite celu funkciju kao argument (umesto stringa koji predstavlja CSS izraz kojim tražite neke elemente) kao što je prikazano u sledećem primeru:
$(function() {
// Kod ce biti pozvan tek kada se dokument ucita
});
Funkcija koja je prosleđena kao argument će biti izvršena tek kada se sve na strani učita.
Na primer, ako bismo kod iz prethodnog primera koji kači događaje na element stavili u telo funkcije koju bi predali kao argument dolar funkcije $( ) ovaj kod bi se izvršio tek kada je ceo HTML dokument učitan. Primer je dat u sledećem kodu:
$(function() {
var element = $("#naslov");
element.click( function() { alert("Korisnik je kliknuo na polje za unos"); });
element.dblclick( function() { alert("Korisnik je kliknuo na polje za unos"); });
element.change( function() { alert("Korisnik je kliknuo na polje za unos"); });
});
Gde god da stavite ovaj kod on će biti pozvan tek kada su svi elementi spremni i učitani što je upravo ono što želite. U praksi ovo se veoma često koristi posebno ako svoj JavaSkript kod stavljate u posebne .js fajlove koje uključujete u HTML strane.
Zaključak
jQuery je osnova za programiranje naprednih korisničkih interfejsa. to je odlična biblioteka koja će vam omogućiti da napravite čist i funkcionalan korisnički interfejs u web aplikacijama. Ovo je samo kratak primer korišćenja jQuery biblioteke ali ako nastavite da detaljnije istažujete njene mogućnosti videćete na koji način možete da napravite odličan korisnički interfejs uz minimum kodiranja.
jQuery možete koristiti sa bilo kojim serverskim jezikom (C#, ASP, PHP, Java) ali ako radite C# i MVC možete videti i post jQuery pluginovi u ASP.NET MVC aplikacijama.
Sledeći post: jQuery pluginovi u ASP.NET aplikacijama>>
jQuery dijalozi >>
Komentari će biti prikazani pošto ih odobri moderator sajta. Da bi komentari bili objavljeni, moraju biti u skladu sa politikom objavljivanja.