jQuery tutorijal za početnike 2. deo
Kategorija: Web dizajn
Delicious
Stumble It!
Kao što vidite izbacio sam iz naslova za apsolutne početnike, jer budući da ste već pročitali 1. deo jQuery tutorijala, više niste apsolutni početnik :). U prvom delu govorili smo o tome šta je to jQuery, čemu služi i šta možemo da radimo s njim, zatim kako da pravilno ubacimo jQuery u html i kako da nam bude dostupan za dalji rad, upotrebljavali smo fundamentalnu $() funkciju da selektujemo html elemente i primenimo neke od unapred dostupnih jQuery efekata na njima, dodavali smo i oduzimali klase elementima.
Jedan mi prijatelj reče nedavno kako danas postoje jQuery pluginovi za verovatno sve što može da zatreba jednom web dizajneru, pa mu nije jasno zašto bi se mučio i učio o samoj sintaksi jQuery-ja. Dovoljno je naći, preuzeti plugin i povezati ga sa html fajlom i eto nekog efekta na stranici. Nadam se da ne razmišljate kao on, jer će vam često zatrebati da prilagodite plugin svom dizajnu. Osim toga, ponekad ćete poželeti da sami nešto napravite jer vam je tako lakše, pre nego da tražite plugin i podešavate ga.
U ovom delu nastavićemo da istražujemo koje još mogućnosti postoje sa jQuery-jem u pogledu selektovanja elemenata, jer se sve oko toga vrti. Da biste bilo šta mogli da uradite, morate prethodno da pogodite baš onaj element ili elemente koje želite.
Ako ste koristili html/css, verovatno ste nabasali na neka od ograničenja css-a koja se odnose na kretanje kroz html dokument. Najbolje da krenemo sa primerom (html kod je pojednostavljen radi preglednosti):
<html>
<head>
<title>jQuery tutorijal 2. deo</title>
<script type="text/javascript"
src="jquery-1.2.6.min.js"></script>
<style type="text/css">
.podmeni { color: red;}
.glavniMeni { color: yellow;}
.istaknuto { font-weight: bold; font-size: 20px;}
</style>
</head>
<body>
<ul id="nav">
<li>
<ul id="oNama">
<li><a href="#">Gde se nalazimo</a></li>
<li>Šta možemo da uradimo za vas</li>
<li>Naši klijenti</li>
<li>Jos neka stavka</li>
</ul>
</li>
<li>Zašto mi?</li>
<li>Usluge</li>
<li>Kontakt</li>
</ul>
</body>
</html>
Pre svega, važno je razumeti hijerarhiju i odnose u samom html dokumentu. Posmatrajući ovaj primer, možemo reći da su svi elementi potomci html elementa, odnosno sam html element je nesto kao praroditelj svih drugih elemenata. Head i body elementi su deca samog html elementa. U isto vreme, ul#nav je dete body elementa, ali je takođe i potomak samog html elementa. Dalje, svi li elementi u okviru jedne liste su braća, ali prvi li element u ul#nav je u isto vreme i roditelj celoj ul#oNama.
Kao što vidite, postaje malo komplikovano, ali ne previše, jednostavno hijerarhija je ista kao i u stvarnom životu između roditelja i dece i predaka.
Na osnovu onoga što smo naučili u prvom tutorijalu, mogli bismo uraditi na primer sledeće:
$("li") - selektovati sve li elemente
$("#nav") - selektovati element sa #nav
$("#oNama li a") - selektovati a element koji se nalazi
u okviru li elementa u ul#oNama
Dakle sve ono što biste i inače koristili u CSS-u, jednostavno stavite u okviru navodnika. jQuery je između ostalog zato i popularan među web dizajnerima jer se savršeno nadograđuje na CSS. Primetili ste možda da koristim dvostruke navodnike u okviru $(). Možete slobodno koristiti i jednostruke ako vam tako više odgovara, rezultat će biti isti.
Mogli bismo uraditi i ovako nešto:
$(document).ready(function() {
$("#oNama > li").addClass("podmeni");
});
Pomoću znaka > selektujemo sve li elemente koji su deca elementa sa #oNama i dodajemo svakom elementu klasu .podmeni. Znači pogađamo samo prvo koleno.
Ili:
$("#nav li:not(.podmeni)").addClass("glavniMeni");
Obratite pažnju, sada selektujemo sve li elemente koji su potomci #nav, znači ne samo neposredne potomke, decu, nego sve li elemente, a to uključuje i one u drugoj listi koja ima id #oNama. Međutim, stavke u drugoj listi sa #oNama vec imaju klasu podmeni i mi bismo želeli da tako i ostane. Zato koristimo not operator kojim kažemo selektuj sve li elemente osim onih koji već imaju klasu podmeni, i samo takvima dodaj klasu glavniMeni (kao što znate, možete dodeliti više klasa jednom elementu, po potrebi).
Sada svi li elementi u našoj listi sa #oNama imaju klasu .podmeni. Recimo da želimo da posebno selektujemo treću po redu stavku i dodamo joj još jednu klasu. Kao što znate, u css-u to je praktično neizvodljivo zbog loše podrške različitih brauzera. To bismo uradili ovako:
$("#oNama li").eq(2).addClass("istaknuto");
Koristimo specijalni jQuery selektor eq() koji u okviru zagrade prima redni broj elementa koji želimo da selektujemo. Primećujete da sam rekao kako ćemo selektovati treću stavku, a napisao sam eq(2). Nisam pogrešio, u JavaScriptu nizovi počinju da se računaju od nule, tako da je eq(2) u stvari treći element po redu.
Osim eq(), postoji još nekoliko specifičnih jQuery selektora-filtera koji vam mogu poslužiti u radu. To su even i odd, koji selektuju parne i neparne elemente nekog niza.
$("#nav li:even").addClass('istaknuto');
U div.primary mogu biti samo p elementi, i na ovaj način bismo selektovali svaki drugi element počevši od prvog koji je nulti, i samim tim paran.
Mogao bi vam zatrebati i filter contains:
$("#nav li:contains('Usluge')").addClass("istaknuto");
Ovaj selektor pretražuje sve li elemente u okviru ul#nav koji sadrže reč Usluge u sebi i dodaje im klasu .istaknuto. Pomenuo sam ranije da koristim dvostruke navodnike umesto jednostrukih. Primetite ovde da se Usluge nalaze u jednostrukim navodnicima. Ako biste stavili Usluge u dvostruke navodnike ovaj kod ne bi radio.
Do sada smo se uglavnom kretali od roditelja ka deci, dakle na dole. Međutim, moguće je kretati se i na gore, od dece ka roditeljima. Ako bismo rekli:
$('li').parent().addClass('green');
onda bismo dodali klasu .green u obe naše liste iz navedenog primera.
Pomenuo sam listu jQuery selektora u prvom delu tutorijala, ali zbog važnosti teme hteo sam da ih u ovom delu još malo obradim.
Selektori su osnova, početak svega u jQuery-ju. Ako ne znate šta sve i kako možete da selektujete, nećete moći efikasno da koristite jQuery. Zbog toga vam preporučujem da dobro proučite pomenutu listu pre nego što krenete dalje. I što je najvažnije da sami eksperimentišete sa ovim selektorima i kucate kod, jer se tako najbolje uči.
Povezano sa ovom listom jQuery selekora je i lista Traversing, gde ćete takođe naći razne mogućnosti da efektno i jednostavno dođete do onog elementa ili elemenata koje želite.
Veoma je korisno da dok radite nešto u jQuery-ju imate pored sebe odštampanu ili otvorenu na kompjuteru listu najčećše korišćenih komandi, tzv. cheet sheet. Preporučujem ovaj jQuery cheet sheet.
Toliko za ovaj drugi deo, trudio sam se da što je više moguće pojednostavim stvari.
Nadam se da će ovaj tutorijal nekome biti od koristi :), voleo bih da čujem i vaša mišljenja.
Potencijalno povezani tekstovi:
jQuery tutorijal za apsolutne početnike
Flash sajtovi i optimizacija za pretraživače
Ko dizajnira web sajt: klijent ili dizajner?
Najkorisniji Firefox dodaci za web dizajnere
Devet stvari koje treba proveriti pre puštanja novog sajta uživo
jQuery Tools - kolekcija šest najkorisnijih JavaScript dodataka u jednom fajlu
Komentari
Milan Stošić - 2009-01-31 19:51
Pre svega pohvale za teksove i angažovanje oko ovih tutorijala na Vašem sajtu.
Kako već neko vreme planiram da se upoznam sa JQuery-jem, bilo mi je potrebno malo nekog osnovnog objašnjenja kako bih krenuo na pravi način.
Igrom slučajeva (i sasvim slučajno) pronašao sam Vaš sajt i ove tutorijale koji su mi zaista pomogli da krenem od 0.
JQuery je, generalno, veoma jednostavan za korišćenje, ali je ipak potrebno neko predznanje i neki početni uvod u sve to.
Nadam se da će biti još ovakvih tekstova koji će svima biti korisni.
Do tada … pozdrav! Milan
Andrija - 2009-02-01 08:20
Ništa nije slučajno u životu :)
Baš mi je to i bio cilj, da napravim jQuery tutorijal koji bi zaista kretao od nule, i postavljao dobre osnove za dalje samostalno učenje.
Biće sigurno još ovakvih tekstova, u bliskoj budućnosti, nadam se :)
Hvala i svako dobro.
Milan Bojic - 2010-01-30 20:11
Bravo majstore, lepo je videti da neko jasno i konkretno pise o jQuery biblioteci. Obicno je mistifikuju zbog svih mogucnosti koje nudi i koje su stvarno predivne, ali ti ovo veoma jednostavno objasnjavas. jQuery je, koliko ja shvatam, samo dobro prilagodjen javascript… koristi css identifikacije i koristi $ umesto getElementby… Ali ja ne znam bas mnogo, tako da…
Obavezno nastavi sa pisanjem tutorijala, jer cu ga definitvno pratiti! PozzAndrija - 2010-01-31 13:17
Zdravo Milane, drago mi je da ti se dopada tutorijal :), u pravu si, jQuery u mnogome olakšava pisanje javascripta, jer se koristi skrećena sintaksa za mnogo toga.
Što se tiče daljih tutorijala, mislim da u budućnosti možeš očekivati neke konkretne primere primene jQuery-ja, kroz pluginove, kojih kao što sigurno znaš, ima bezbroj, tako da većinu onoga što ti može zatrebati na nekom sajtu, već možeš da nađeš da je neko napravio, samo treba prilagoditi konkretnoj situaciji.
Pozdrav i srećno vežbanje :)
Milan Bojic - 2010-05-19 01:03
Cao opet, posle nekog vremena.. Imam jedno konkretno pitanje. Na stranici mi dolazi do konflikta jQuery prettyPhoto galerije za slike i javascripta za acordion meni. Mozes pogledati na sajtu koji sam ostavio kako to izgleda.
Pokusavao sam sa jQuery nonConflict tehnikom da sredim problem, koji nastaje zbog toga sto i jQuery i JS koriste simbol $, samo u razlicite namene. E sad.. ja negde gresim i moram priznati da nisam bas vican u pisanju jQuery ili Js koda, pa ako mislis da mozes pomoci, bio bih puno zahvalan.Kao sto vidis na sajtu, ja bih hteo da slike iz galerije otvara neki lightbox, u ovom slucaju prettyPhoto, ali moze i bilo koji drugi, a ne da mi se otvaraju na novoj stranici!
Hvala unapred!!!
Andrija - 2010-05-19 16:18
Zdravo Milane, ne znam tačno, ali se prisećam da postoji način da se to reši, upravo to nije redak problem kada se koristi JQuery i još neke druge galerija zajedno isto dolazi do konflikta.
Možda da probaš neki drugi kod ili plugin za jedno ili drugo? Verujem da bi se tako rešilo.
A za ovaj acordion meni ne koristiš jQuery? Možda bi upravo trebao da nađeš jQuery plugin za to bi onda sigurno radili kako treba.
Nadam se da sam ti nešto pomogao :)
Pozdrav
Milan Bojic - 2010-05-19 18:26
Hvala, pokusacu da resim problem, pa ako uspem u dogledno vreme, objavicu resenje u postu, tako da mozda pomogne nekom drugom sa slicnim problemom. Ukoliko i ti naletis na moguce resenje, postuj ga ovde. Veliki pozdrav i samo nastavite sa radom!
Andrija - 2010-05-19 18:36
Siguran sam da ces resiti nekako, javi obavezno sta si uradio, pozdrav
Milan Bojic - 2010-05-20 21:17
REseno… Ipak je moglo uz pomoc nonConflict funkcije…
Pre skripte koja se izvrsava treba staviti ovaj kod:
<script> jQuery.noConflict();
“zatim $ znak promeniti samo u jQuery”
.. i nastaviti izvrsenje normalno.I ono sto je meni u stvari pravilo problem je DA OBAVEZNO TREBA PROVERITI VARIJANTE STA IDE PRVO U HEAD – JS. ili jQuery! To naravno zavisi od toga sta koristimo. Ja sam u ovom slucaju koristio jQuery galeriju i JavaScript acordion meni, pa sam prvo morao staviti js. pa tek onda jQuery !
Pozzz, evo kako sad to izgleda..
www.greenidea.co.rsAndrija - 2010-05-22 16:47
Znao sam da je neka sitnica ;) Hvala što si javio rešenje, može nekom zatrebati.
PozzAdam - 2010-10-28 11:05
Pomogao mi je tutorijal da krenem od nule,
bio sam upoznat sa css-om al nije mi bilo uopste jasno sta znace $ i ostale oznake u jQuery, pa sam trazio neke tutorijale po google, naleteo na ovaj i sad je mnogo lakše da se skapira kako funkcionišu stvari! :)Pozdrav!
Ivica - 2013-02-22 10:17
Savršeno.
Radim u HTML-u, CSS-u, PHP-u, JS-u.
i ovo je stvarno dobar uvod u JQ.
Hvala.
Dusko84 - 2014-03-05 04:46
Evo da zapocnemo i 2014. Svaki detalj tvojih tutorijala je zlata vredan. Nadam se da lepo zaradjujes od tvog znanja i rada.
Dalibor Uzelac - 2014-12-14 04:32
Sve pohvale za ovaj tekst kao i prvi.Pošto sam početnik ovo mi je jako pomoglo i pomoći će mi.Oduševilo me je kako je objašnjeno.Da mi je ovako profesor objašnjavao JavuScript naučio bih je mnogo lakše a i savladao.Svaka čast.
Vlada - 2016-02-29 08:41
Oduševljen sam da ovako nešto postoji na Srpskom, koliko god razumeo Engleski, pet puta mi je brže da ukapiram objašnjenje na Srpskom.
Hvala na primerima i tutorijalu.
Nemanja - 2016-03-30 09:55
Tutorijali su odlicni! hvala
Komentarisanje zatvoreno.
