jQuery tutorijal za apsolutne početnike
Kategorija: Web dizajn
Delicious
Stumble It!
Web dizajn danas bi se teško mogao zamisliti bez mnogobrojnih JavaScript biblioteka. Budući da se već neko vreme igram sa jQuery-jem, rekoh možda ne bi bila loša ideja da napišem jedan kraći uvod u jQuery za one koji su zainteresovani da nauče nešto o ovoj veoma popularnoj JavaScript biblioteci.
Podrazumeva se da znate šta je HTML i CSS, još bolje da ste napravili neki web sajt koristeći iste. U suprotnom ovo vam neće mnogo koristiti. Ako niste radili sa html/css-om, pogledajte tekst CSS za početnike – top 5 web sajtova za učenje CSS-a.
Pre svega, šta je to jQuery i čemu to služi? Najprostije rečeno, jQuery je moćna JavaScript biblioteka koja vam omogućava da web sajtu dodate funkcionalnosti koje sa čistim html/css-om ne biste mogli da uradite. Između ostalog, možete pristupati raznim delovima web stranice kao i samom sadržaju strane i menjati ih, dodavati razne animacije na web stranicu, reagovati na neki impuls od strane korisnika kao što je na primer klik ili prelazak mišem na određenom delu strane, vaditi informacije sa servera bez potrebe za ponovnim učitavanjem cele strane (ovo je poznato kao AJAX) itd.
Prvo što treba da uradite je da preuzmete poslednju verziju jQuery-ja sa www.jquery.com, to je u ovom trenutku verzija 1.2.6. Kada dođete na početnu stranicu sajta, videćete link za preuzimanje jQuery-ja i dve mogućnosti: production i development. Preuzmite production verziju, koja je manja po obimu. Development verziju možete preuzeti ako hoćete da vidite sam kod jQuery-ja, i šta se dešava “ispod haube”. U ovom trenutku to vam nije potrebno. Kada kliknete na download jQuery link bićete preusmereni na Google.com gde možete kliknuti na jQuery link i tako ga preuzeti.
Takođe možete odmah preuzeti i ceo index.html fajl koji ćemo koristiti u ovom tutorijalu.
U vašem početnom html fajlu koji bi mogao da izgleda ovako:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>jQuery tutorijal</title>
<style type=”text/css”>
#wrapper {margin: 50px auto; width: 450px;}
</style>
</head>
<body>
</body>
</html>
u okviru head taga, odmah ispod linije kojom se uvozi css dokument (odnosno u ovom slučaju pišemo css kod direktno u html fajlu), potrebno je ubaciti sledeću liniju koda koja nam omogućava da radimo sa jQuery-jem:
<script type="text/javascript" src="jquery.js"></script>
Pazite na putanju koja se upisuje u src atribut, ako vam je jquery.js u istom folderu kao i html fajl, ovo je ispravna putanja, u suprotnom prilagodite putanju.
Sada imamo dve mogućnosti: da pišemo jQuery kod u okrivu samog html dokumenta ili da izdvojimo ceo kod u poseban fajl. Naravno, ovaj drugi način je pravilniji i kada budete koristili jQuery u svojim projektima tako i radite. Ovde ćemo zbog jednostavnosti sve raditi u jednom html fajlu. Tako da odmah posle linije kojom ste uvezli jquery.js (veoma je važno da to bude posle, a ne pre), napišite:
<script type="text/javascript"></script>
Sada imamo sve spremno za početak rada sa jQuery-jem. Dodaćemo u ovaj html fajl i nekoliko linija teksta da imamo sa čime da radimo. Naš index.html fajl dakle izgleda ovako:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>jQuery tutorijal</title>
<style type=”text/css”>
#wrapper {margin: 50px auto; width: 450px;}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
//ovde cemo pisati javascript kod
</script>
</head>
<body>
<div id="wrapper">
<h1 id="glavniNaslov"> jQuery za početnike </h1>
<h2 class="podnaslov">i sve one koji se tako
osećaju!</h2>
<p>Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Cras in purus nec justo euismod
bibendum.</p>
<p class="drugiPasos"> Curabitur luctus risus a dui.
Aenean augue ectus,pharetra eu, viverra non,
tempor vel, sem. Quisque eu orci.</p>
</div>
</body>
</html>
jQuery selektori
Jedna od osnovnih, fundamentalnih operacija u jQuery-ju jeste selektovanje dela dokumenta, na primer nekog h1 elementa, ili div, p, bq ili bilo čega drugog, sa kojim želimo da radimo. Selektori u jQuery-ju su skoro isti kao u CSS-u i koriste skoro identičnu sintaksu. Ovo se radi pomoću specijalne funkcije za selektovanje elemenata:
$()
a na sledeći način:
$("p").addClass("top");
$(“p”) znači selektuj sve p elemente, a zatim primeni na njih metod addClass(), koji svakom elementu dodaje klasu, u ovom slučaju top. Prethodno ste u css fajlu definisali tu klasu i njena svojstva.
$() prima string kao parametar (što će reći uvek koristite navodnike pa u okviru njih upišite šta treba), a može sadržati bilo koji css selektor klasu, id ili html element. Pogledajte spisak svih jQuery selektora. Evo još nekoliko primera:
$("#glavniNaslov").addClass("top");
$("p.drugiPasos").removeClass("top");
$("#nav ul li a").removeClass("top");
Kao što možete videti, $() nije ograničen samo na jednostavne pozive jednom html elementu, već se može koristiti bilo koja kombinacija selektora koju biste i inače u css fajlu mogli isto tako da napišete. Metod removeClass(“top”) radi suprotno od addClass(), oduzima navedenu klasu elementu.
U ovom primeru sav jQuery kod pišemo u okviru html dokumenta, međutim kao što rekoh to radimo zbog jednostavnosti. Pravilno je izdvojiti sav kod u poseban .js dokument i tada sav jQuery kod skoro uvek počinje ovako:
$(document).ready(function(){
// ovde ide kod
}
U prevodu, to znači kada je DOM spreman, izvrši JavaScript koji se nalazi između velikih zagrada. DOM (document object model) posmatrajte kao neki sistem pomoću koga svaki element u html dokumentu ( p, div, h1-6, tekst itd) postaje objekat, kome se može pristupati koristeći ugrađene (već postojeće) funkcije, kao i one koje sami napravite i koji se može menjati po želji. To je upravo ono što mi ovde radimo, koristeći jQuery.
Napisaćemo kod koji će svaki put kada kliknete na glavni naslov sakriti drugi pasos teksta, a na sledeći klik ponovo ga vratiti. Kod izgleda ovako:
$(document).ready(function(){
$("#glavniNaslov").click(function(){
$("p.drugiPasos").slideToggle("slow");
});
});
Kao što sam već rekao, prva linija znači kada je DOM spreman, u drugoj liniji koda selektujemo element koji ima id glavniNaslov $(”#glavniNaslov”) i njemu dodajemo click funkciju .click(function(). koja osluškuje da li je neko kliknuo da dati element. Kada neko klikne na h1#glavniNaslov primenjuje se treća linija koda, koja kaže sada uzmi p element sa klasom drugiPasos i primeni na njega efekat slideToggle, koji čini da tekst polako nestaje, a na drugi klik se vraća.
Evo još nekoliko jednostavnih primera šta sve možete raditi u jQuery-ju. Zamenite samo treću liniju koda sa nekom od sledećih da biste primenili neki drugi efekat:
$("p.drugiPasos").fadeOut("slow");
$("p.drugiPasos").animate({width: "200px" });
Igrajte se sa ovim kodom, probajte da selektujete neki drugi element umesto p.drugiPasos, ili dodajte nešto svoje. Sve kombinacije su dozvoljene.
Toliko za ovaj prvi tutorijal, za dalje čitanje preporučujem:
jQuery tutorijal za početnike 2. deo
Potencijalno povezani tekstovi:
Ko dizajnira web sajt: klijent ili dizajner?
CSS Dizajn – prva domaća CSS web dizajn galerija
Najčešće greške prilikom dizajniranja web sajta
Napravi mi web sajt za džabe...
Najpopularniji sistemi za upravljanje sadržajem sajta (CMS)
jQuery tutorijal za početnike 2. deo
Komentari
Ilija - 2008-11-15 13:50
Izvanredno!!! Ne zbog toga što sam početnik, već zbog koncepcije, logistike, dizajna – svega! Nastavite…
Andrija - 2008-11-15 16:59
Hvala Ilija, drago mi je da Vam se dopada tutorijal, biće nastavaka svakako, pozdrav
koel - 2009-01-30 05:26
gde ubacujem ove kodove
$(”#glavniNaslov”).addClass(“top”);
$(“p.drugiPasos”).removeClass(“top”);
$(”#nav ul li a”).removeClass(“top”);inace blog vam je super samo napred
Andrija - 2009-01-30 06:41
@koel
Pa, ima dve varijante, prva je u okviru samog html dokumenta, gore u head delu, između<script type=“text/javascript”>
$(document).ready(function(){
// ovde ide kod
}
</script>(preuzmi ceo index.html fajl, link je pri vrhu ove strane, pa pogledaj kod), a druga je u izdvojenom .js dokumentu. U tom slučaju kod ide između
$(document).ready(function(){
// ovde ide kod
}a taj .js dokument bi se pozivao u html fajl sa istom linijom koda kojom se poziva i jQuery, dakle:
<script type=“text/javascript” src=“jquery.js”></script>
samo umesto jquery.js treba upisati naziv fajla.
Hvala na lepim rečima :)
Sanja - 2010-06-21 15:29
$(document).ready(function(){….
Ok a ovo function() je neka funkcija koju smo definisali gde? a document znaci da se odnosi na tekuci dokument?Andrija - 2010-06-21 15:54
Nismo je nigde definisali mi sami, vec postoji, tako se to pise u jQuery-ju, jednostavno prihvati da tako pocinjes uvek da pises i to je to :)
anita - 2011-11-18 21:26
mene zanima ako jedan naslov ima vise paragrafa a drugi isto tako. na koji nacin animirati kad se klikne na prvi naslov da se otvore svi paragrafi prvog a da paragrafi drugog naslova ostanu zatvoreni…please
Andrija - 2011-11-18 23:55
Ako sam dobro razumeo, tebi treba ovako nesto
anita - 2011-11-20 10:28
da tako nesto mi treba. da se klikom na naslov otvori samo sadrzaj tog naslova. a da sadrzaj drugog ostane zatvoren
slavko - 2012-03-30 20:28
Zasto u ovom vasem primjeru (indexu) sto sam skinuo sa vaseg sajta ne radi jqury, kada otvorim index sve je staticno.
Andrija - 2012-03-31 10:32
Trebalo bi da radi, proverite putanju do jquery fajla..
Rade - 2015-08-04 02:41
Možeš li mi objasniti zašto ovaj primer nije jednostavno urađen u javaskriptu nego je korišten jquery. Koja je njegova prednost baš u ovom primeru u odnosu na običan javaskript? Šta je tu konkretno jquery library pomogla (unapredila)?
Komentarisanje zatvoreno.
