01_jqk

8/3/2019 01_JQK

1/32

1

POGLAVLJE 1

Osnove biblioteke jQuery

Cody Lindley

1.0 UvodPoto ste se latili knjige o biblioteci jQuery, autori ove knjige e najveim delom pretpo-stavljati da imate barem neku predstavu o tome ta je jQuery i ta tano radi. Iskrenogovorei, kuvari se, u naelu, obino piu za itaoce koji ele da nadograde osnovno po-znavanje materije. Obrazac recepata: problem reenje objanjenje, koristi se da bistebrzo doli do reenja za uobiajene probleme. Meutim, ako je jQuery nepoznanica zavas, ne odbacujte i ne poklanjajte jo uvek knjigu. Ovo poglavlje smo posvetili vama.

Ukoliko vam je potreban prikaz knjige ili ako ste tek malo (ili uopte niste) radili sa bi-

bliotekom jQuery, ovo, prvo poglavlje (u svim ostalim pretpostavljamo da ste savladaliosnove) uputie vas u glavne karakteristike jQueryja. Ukoliko ne znate nita o JavaScrip-tu i DOM-u, moda ne bi bilo loe da zastanete i zapitate se ima li smisla da prouavatebiblioteku jQuery bez osnovnog razumevanja jezgra jezika JavaScript i njegovog odnosas modelom DOM. Preporuujem da prouite DOM i jezgro JavaScripta pre nego toponete da uite jQuery. Toplo preporuujem prirunik JavaScript: sveobuhvatni vodiautora Davida Flanagana (izdava Mikro knjiga) pre itanja ove knjige. Ali ne dajte davas moje skromno miljenje sprei ako pokuavate da savladate jQuery bez poznavanjaDOM-a i JavaScripta. Mnogi su stekli praktino znanje o ovom tehnologijama prekobiblioteke jQuery. Znai, iako takav put nije idealan, i dalje se moe prei.

Poto smo to raistili, pogledajmo formalnu definiciju biblioteke jQuery i kratak opisnjene funkcionalnosti:

jQuery je JavaScript biblioteka otvorenog koda koja pojednostavljuje interakcije izmeuHTML dokumenta ili, preciznije, objektnog modela dokumenta (DOM) i JavaScripta.

Prosto reeno (i za sve JavaScript hakere starog kova), jQuery opasno pojednostavljujedinamiki HTML (DHTML). Konkretno, jQuery pojednostavljuje manipulisanje HTMLdokumentom i kretanje po njemu, obradu dogaaja itaa veba (engl. web browser),DOM animacije, Ajax interakcije i razvoj skriptova na JavaScriptu za razliite itae.

Nakon formalnog opisa biblioteke jQuery, razmotrimo razloge da odaberete jQuery.

8/3/2019 01_JQK

2/32

2 | Poglavlje 1: Osnove biblioteke jQuery

Zato jQuery?Moda e vam se uiniti nepotrebnim da u ovom kuvaru govorimo o prednostima biblio-teke jQuery, posebno poto ve itate ovaj kuvar i verovatno ste ve svesni tih prednosti.

Dakle, iako moda priam ono to ve znate, hajde da ukratko vidimo zato bi pro-

gramer odabrao jQuery. Svrha ovoga je da obogatim vae osnovno znanje o bibliotecijQuery objanjavajui zato pre nego to razmotrimo kako.

Hvalei jQuery, neu joj dizati vrednost poredei je s konkurencijom zato to naprostone verujem da postoji direktna konkurencija. Takoe, verujem da je jQuery danas jedinadostupna biblioteka koja odgovara i dizajnerskim i programerskim zahtevima. U tomsmislu, jQuery je klasa za sebe.

Iskreno verujem da svaka od uvenih JavaScript biblioteka i okruenja na ovome svetuima svoje mesto i vrednost. Opsena poreenja su besmislena, ali esto im se pribega-

va priznajem, i ja sam to radio. Ipak, nakon dugog razmiljanja o tome, moram rei daduboko verujem da su sve JavaScript biblioteke dobre u neemu. Sve imaju vrednost. Tokoliko je neka vrednija od druge zavisi vie od korisnika i toga kako se upotrebljava, negood toga ta ona tano radi. Pored toga, zakljuio sam da su male razlike izmeu JavaScriptbiblioteka esto trivijalne u kontekstu irih ciljeva razvoja JavaScripta. Zato, bez daljeg filo-zofiranja, prilaem listu atributa koji vrsto govore u prilog korienju biblioteke jQuery:

Otvorenog je koda, i re je o projektu sa licencama MIT i GNU General Public Li-cense (GPL). Slobodna, i to na vie naina!

Mala je (18 KB u minimizovanom obliku) i gzip komprimovana (nekomprimovo-vana je 114 KB).

Neverovatno je popularna, to znai da je korisnika zajednica ogromna i da imamnogo onih koji pruaju pomo kao programeri i/ili instruktori.

Usklauje razlike izmeu veb itaa umesto vas.

Namerno je napravljena sa svedenom osnovom, s jednostavnom, ali ipak pametnoosmiljenom arhitekturom proirivanja dodatnim programskim modulima (engl.plugins).

Ima veliki fond programskih modula (http://plugins.jquery.com/) koji se postojanoiri otkad se biblioteka JQuery pojavila.

Njen API je potpuno dokumentovan, ukljuujui primere ugraenog koda, to je usvetu biblioteka JavaScripta luksuz. Ma, bilo kakva dokumentacija je ve godinamaluksuz.

Namenski je napravljena tako da se izbegnu konflikti s drugim JavaScript biblio-tekama.

Podrka korisnike zajednice je prilino upotrebljiva, i obuhvata liste slanja, IRC

kanale i ogromne koliine uputstava, lanaka i blogova.

8/3/2019 01_JQK

3/32

1.0 Uvod | 3

Razvija se otvoreno, to znai da svako moe doprineti ispravljanju greaka, una-preenju i razvoju.

Razvija se postojano i konsistentno, to znai da razvojni tim ne bei od objavljiva-nja auriranih verzija.

injenica da su je prihvatile velike organizacije (na primer, Microsoft, Dell, Bank

of America, Digg, CBS, Netflix) doprinee, kao i do sada, njenoj dugotrajnosti istabilnosti.

Usvaja specifikacije organizacije W3C pre veb itaa. Evo primera: jQuery podra-va veliki deo CSS3 selektora.

Trenutno se testira i optimizuje za razvoj na modernim itaima (Chrome 1, Chro-me Nightly, IE 6, IE 7, IE 8, Opera 9.6, Safari 3.2, WebKit Nightly, Firefox 2, Firefox3, Firefox Nightly).

Mona je alatka u rukama i dizajnera i programera jQuery ne pravi razlike.

Njena elegancija, metodologije i filozofije koje menjaju nain na koji se pie Java -Script kd, postaju standard sam za sebe. Setimo se samo koliko je mnogo drugihreenja pozajmilo eme selektora i ulanavanja od JQueryja.

Neobjanjiva ugodnost programiranja koju neplanirano izaziva, zarazna je i nezao-bilazna; izgleda da se ak i kritiari zaljubljuju u karakteristike biblioteke jQuery.

Njena dokumentacija sadri mnoge elemente (na primer, API ita, aplikacije kon-trolne table, podsetnike) ukljuujui i API ita van mree (AIR aplikacija).

Namerno je prilagoena kako bi mogla da slui za programiranje na nenametljivom

JavaScriptu.

Ostala je, u sri, JavaScript biblioteka (a ne skelet, engl. framework), ali uporedo snjom postoji i srodan projekat za elemente grafikog korisnikog interfejsa i razvojaplikacija (jQuery UI).

Kriva uenja je povoljna jer se JQuery nadograuje na koncepte koje veina projek-tanata i dizajnera ve razume (na primer, CSS i HTML).

Po mom miljenju, jQuery se izdvaja od drugih reenja zbog kombinacije pomenutih

svojstava, a ne zbog bilo kog od njih posebno. jQuery paket je, naprosto, neprikosnovenaalatka za programiranje na JavaScriptu.

Filozoja biblioteke jQueryFilozofija biblioteke jQuery je Pii manje, uradi vie (engl. write less, do more). Ta filo-zofija se moe dalje razloiti u tri koncepta:

Nalaenje odreenih elemenata (pomou CSS selektora) i njihova upotreba na nekinain (pomou jQuery metoda)

Ulanavanje vie jQuery metoda radi primene nad skupom elemenata

Primena jQuery omotaa (engl. wrapper) i posredne (implicitne) iteracije

8/3/2019 01_JQK

4/32

8/3/2019 01_JQK

5/32

1.0 Uvod | 5

treba zapamtiti jQuery koncept nalaenja nekih elemenata i obavljanja neeg s njima.U ovom segmentu koda samo nalazimo sve elemente na HTML strani pomoufunkcije jQuery()), a potom neto radimo s njma koristei jQuery metode (na primer,hide(), text(), addClass(), show()).

UlanavanjejQuery omoguava ulanavanje metoda. Na primer, mogli bismo da naemo neki ele-ment, a potom da ulanamo operacije nad njim. Prethodni segment koda, ija je svrhabila da se nau neki elementi i da se uradi neto s njima, mogla bi se pomou ulanava-nja (engl. chaining) svesti na samo jedan JavaScript iskaz.

Primer bi se pomou ulanavanja mogao izmeniti od ovoga:

//sakrij sve elemente div na stranicijQuery(div).hide();

//auriraj tekst unutar svakog elementa divjQuery(div).text(new content);

//dodaj atribut klase s vrednou promenljive updatedContent svim div elementimajQuery(div).addClass(updatedContent);

//prikazuje sve elemente div na stranijQuery(div).show();

u ovo:

jQuery(div).hide().text(new content).addClass(updatedContent).show();ili, uz uvlaenje i prelome reda, u ovo:

jQuery(div).hide().text(new content).addClass(updatedContent).show();

Jednostavno reeno, ulanavanje vam omoguava da primenite beskrajan lanac jQuerymetoda na trenutno izabrane elemente (one koji su trenutno omotani funkcijom jQu-

ery) pomou funkcije jQuery() . Funkcija jQuery() primenjena na izabrane elementeuvek vraa te elemente kako bi lanac mogao da se nastavi. Kao to ete videti u narednimreceptima, i dodatni moduli se prave na ovaj nain (tako da kao rezultat daju omotaneelemente), pa primena dodatnog modula ne prekida lanac.

Ukoliko niste uoili, skreemo vam panju na sledee: kao to razmotreni segment kodapokazuje, ulanavanje takoe optimizuje obradu tako to se DOM elementi biraju samojednom, a zatim se, pomou ulanavanja, nad njima mnogo puta izvravaju jQuery me-tode. Izbegavanje nepotrebnog kretanja po DOM strukturi, najvaniji je deo pobolja-vanja performansi strane. Kad god je mogue, izabrane DOM elemente koristite iznovaili ih uskladitite.

8/3/2019 01_JQK

6/32


jQuery omotaki skup

Dobar deo vremena u radu s bibliotekom jQuery, dobijaete ono to se zove omota(engl. wrapper). Drugim reima, biraete DOM elemente s HTML strane omotane funk-cijom jQuery(). Njih esto nazivam omotakim skupom ili omotanim skupom(engl. wrapper set) jer je re o skupu elemenata omotanom funkcijom jQuery(). Ponekade omotaki skup da sadri samo jedan DOM element, dok e u drugim situacijama bitivie elemenata. Bie sluajeva kada e omotaki skup biti bez elemenata. U takvim situ-acijama, metode/svojstva biblioteke jQuery nee se uspeno izvriti ukoliko se pozovuza prazan omotaki skup, to moe biti korisno za izbegavanje nepotrebnih iskaza if.

Na osnovu segmenta koda kojim smo predstavili koncept nalaenja elemenata i oba-vljanja neeg s njima, ta mislite da bi se desilo kad bismo dodali vie elemenata na veb stranu? U narednom auriranom primeru koda, dodao sam tri nova elementa na HTML stranu, tako da imamo ukupno etiri elementa :

old contentold contentold contentold content

//sakrij sve elemente div na stranicijQuery(div).hide().text(new content).addClass(updatedContent).show();

Moda niste direktno napisali nijednu programsku petlju, ali evo ta se deava: jQuerypretrauje stranu i zamenjuje sve elemente u omotakom skupu tako da se jQuerymetode koje koristim izvravaju (implicitna iteracija) nad svakim DOM elementom u

skupu. Na primer, metoda .hide() primenjuje se na svaki element skupa. Ukoliko po-novo pogledamo na segment koda, videete da e se svaka metoda koju primenimoizvriti nad svakim elementom na strani. To je kao kada biste na ovom mestu na-pisali petlju koja poziva svaku jQuery metodu za svaki DOM element. Aurirani primeru kodu sakrie svaki element na strani, upisati u njega novi tekst, dati novu muvrednost klase i ponovo ga uiniti vidljivim.

Omotaki skup i njegov podrazumevani sistem petlje (implicitna iteracija) od presudnesu vanosti za uspostavljanje naprednih koncepata izvoenja petlje. Podseamo da se

jednostavna petlja na ovom mestu javlja pre nego to ste uopte napravili konkretnu

8/3/2019 01_JQK

7/32

1.0 Uvod | 7

petlju (na primer, jQuery(div).each(function(){}). Drugim reima, svaka pozvanajQuery metoda obino e menjati svaki element omotakog skupa.

Meutim, ima situacija u kojima pozvana jQuery metoda utie samo na prvi element ane na sve elemente u omotakom skupu (na primer, attr()) s tim emo vas upoznati

u narednim poglavljima.

Kako je organizovan jQuery interejs za programiranje aplikacija (API)Kad sam poinjao s blibliotekom jQuery, glavni razlog zato sam je odabrao za Java-Script biblioteku bez sumnje je bio taj to je bila dokumentovana na odgovarajui nain(i sa bezbroj dodatnih modula!) Kasnije sam shvatio da je drugi faktor koji me je zauvekvezao za jQuery bila injenica da je API organizovan u logine kategorije. Bilo je dovolj-no samo da vidim kako je API organizovan i da prepoznam funkcionalnost koja mi jebila potrebna.

Pre nego to se bacite na jQuery, predlaem da pregledate dokumentaciju dostupnuna internetu (http://docs.jquery.com/Main_Page) i da prvo samo usvojite organizacijuinterfejsa za programiranje. Ako razumete kako je API organizovan, bre ete u doku-mentaciji nalaziti potrebne informacije, to je prilina prednost s obzirom na to da imazaista mnogo naina da se reenje izvede u jQuery kodu. Toliko je robustan da je lakouplesti se u implementaciju jer se jedan problem moe reiti na mnogo naina. Naveusada kako je API organizovan. Predlaem da zapamtite strukturu interfejsa ili baremnajoptije kategorije.

jQuery jezgro

funkcija jQuery()

jQuery pristupne metode

Podaci

Dodatni moduli

Interoperabilnost

Selektori

Osnove Hijerarhija

Osnovni filtri

Filtri sadraja

Filtri vidljivosti

Filtri atributa

Filtri direktnih potomaka (dece)

Obrasci Filtri obrazaca

8/3/2019 01_JQK

8/32


Atributi

Attr

Klasa

HTML

Tekst Vrednost

Kretanje

Filtriranje

Nalaenje

Ulanavanje

Manipulisanje

Izmena sadraja Unetanje unutra

Umetanje spolja

Umetanje okolo

Zamena

Uklanjanje

Kopiranje

CSS

CSS

Pozicioniranje

Visina i irina

Dogaaji

Uitavanje strane

Obrada dogaaja

ivi dogaaji Pomonici za interakcije

Pomonici za dogaaje

Efekti

Osnove

Klizanje

Postepeno nestajanje

Namenski

Podeavanja

8/3/2019 01_JQK

9/32

1.1 Ukljuivanje koda biblioteke jQuery u HTML stranicu | 9

Ajax

AJAX zahtevi

AJAX dogaaji

Razno

Uslune operacije

Prepoznavanje itaa i odlika

Operacije nad nizovima i objektima

Operacije testiranja

Operacije nad znakovnim nizovima

URL adrese

Pre nego to preemo na niz osnovnih jQuery recepata, hteo bih da pomenem da se

recepti u ovom poglavlju nadovezuju jedan na drugi. Drugim reima, znanje e vam seuveavati na logian nain kako budete prelazili s jednog recepta na naredni. Predlaemda u prvom navratu ove recepte itate redom od 1.1 do 1.17.

1.1 Ukljuivanje koda biblioteke jQuery u HTML stranicuProblemelite da na veb stranici koristite JavaScript biblioteku jQuery.

ReenjeTrenutno postoje dva idealna reenja za ukljuivanje biblioteke jQuery u veb stranicu:

Upotrebite mreu za isporuivanje sadraja (engl. content delivery network, CDN) sme-tenu na Googleu da biste ukljuili neku verziju jQueryja (reenje u ovom poglavlju).

Preuzmite sopstvenu verziju biblioteke jQuery s lokacije jQuery.com i smestite je nasvoj server ili u lokalni sistem datoteka.

Objanjenje JavaScript biblioteka jQuery ukljuuje se u stranicu kao bilo koja spoljna JavaScriptdatoteka. Moete jednostavno upotrebiti HTML element i dodeliti vrednost(URL adresu ili putanju direktorijuma) njegovom atributu src=, i spoljna datotekakoju povezujete bie ukljuena (engl. included) u veb stranicu. Kao primer navodimoablon (engl. template) koji ukljuuje biblioteku jQuery omoguavajui da zaponetebilo koji jQuery projekat:

8/3/2019 01_JQK

10/32


alert(jQuery + jQuery.fn.jquery);

Primeujete da koristim minimizovanu verziju biblioteke jQuery sa Googlea (koju pre-poruujem za javne stranice). Meutim, otklanjanje JavaScript greaka u minimizova-nom kodu nije idealno. Tokom projektovanja ili pisanja koda, moda je bolje koristitineminimizovanu verziju s Googlea zbog otkrivanja potencijalnih greaka u JavaScriptu.Vie informacija o verziji biblioteke jQuery s Googlea nai ete na veb lokaciji za API-je

Ajaxovih biblioteka: http://code.google.com/apis/ajaxlibs/.Naravno, mogue je (a verovatno i zastarelo) da na svom raunaru sauvate kopiju bibli-oteke jQuery. Meutim, to bi u veini sluajeva bilo blesavo jer je Google bio dovoljnoljubazan da je uva za vas. Ako koristite verziju biblioteke jQuery sa Googlea, radite sastabilnom, pouzdanom, brzom i globalno dostupnom kopijom ove biblioteke. Dodatnakorist je smanjeno kanjenje, vei paralelizam i bolje keiranje. To se, naravno, moeostvariti i bez Googleovog reenja, ali bi vas verovatno kotalu koju paru.

Mogue je i da iz nekog razloga ne elite da koristite Googleovu verziju biblioteke jQu-ery. Moda elite prilagoenu verziju ili nemate potrebe (ili mogunosti) da koristiteinternet kada radite s bibliotekom. Moda naprosto smatrate da je Google Veliki bratkoji prati sve to radite ili ne elite da koristite njegove resurse jer volite da sve samidrite pod kontrolom. Dakle, oni kojima Googleova verzija biblioteke jQuery nije po-trebna ili naprosto ne ele da je koriste, mogu preuzeti jQuery s veb lokacije jQuery.com(http://docs.jquery.com/Downloading_jQuery ) i smestiti je lokalno na sopstveni server iliu lokalni sistem datoteka. Prema ablonu koji smo naveli u ovom receptu, zamenili bisteatribut src URL adresom ili putanjom direktorijuma jQuery JavaScript datoteke kojuste preuzeli.

1.2 Izvravanje jQuery/JavaScript koda poto je DOM uitanali pre potpunog uitavanja strane

ProblemModerne JavaScript aplikacije s nenametljivim JavaScript metodologijama obino izvr-avaju JavaScript kd tek kada je DOM potpuno uitan. Realno, DOM se mora uitatipre nego to se nad njim izvri bilo koja operacija manipulisanja ili kretanja po njemu.

Potreban je nain da se odredi kada je klijent, najee veb ita, potpuno uitao DOM

8/3/2019 01_JQK

11/32

1.2 Izvravanje jQuery/JavaScript koda poto je DOM uitan ali pre potpunog uitavanja strane | 11

ali ne i sve elemente poput slika i SWF datoteka. Ako bismo u ovoj situaciji koristilidogaaj window.onload, itav dokument zajedno sa svim elementima morao bi da seuita potpuno pre pokretanja dogaaja onload. Za mnoge korisnike veb itaa, to trajepredugo. Treba nam dogaaj koji e nam rei kada je samo DOM spreman za operacijemanipulisanja i kretanja po njemu.

Reenje jQuery ima namensku metodu ready() za obradu dogaaja koja je obino vezana zaDOM objekat dokumenta. Metodi ready() prosleuje se jedan parametar funkcijakoja sadri JavaScript kd koji treba da se izvri poto je DOM spreman za operacije ma-nipulisanja i kretanja po njemu. Evo jednostavnog primera u kome ovaj dogaaj otvaraalert() prozor poto je DOM spreman, ali pre nego to se stranica potpuno uita:

jQuery(document).ready(function(){//DOM nije uitan, mora da se koristi dogaajready alert(jQuery(p).text());

});

The DOM is ready!

ObjanjenjeMetoda za obradu dogaaja ready() zamenjuje biblioteku jQuery za dogaaj window.onload jezgra JavaScripta. Moe se primenjivati proizvoljno mnogo puta. Kada se koristiovaj namenski dogaaj, preporuuje se da se ukljui u veb strane nakon deklaracija opi-sa stilova i iskaza include. Na taj nain, sva svojstva elementa bie ispravno definisanapre nego to dogaaj ready() izvri bilo kakav jQuery kd ili JavaScript kd.

Pored toga, funkcija jQuery() sama po sebi ima preicu za primenu dogaaja ready. Ko-ristei tu preicu, primer s metodom alert() moe se napisati na sledei nain:

8/3/2019 01_JQK

12/32


jQuery(function(){ //DOM nije uitan, mora da se koristi dogaaj ready

alert(jQuery(p).text());});

The DOM is ready!

Namenski jQuery dogaaj neophodno je koristiti samo ako treba ugraditi (engl. embed)JavaScript kd u tok dokumenta na vrhu strane i kapsulirati ga u element . Prime-nu dogaaja ready() izbegavam tako to sve JavaScript iskaze include i inline uvodim prezatvaranja elementa . To radim iz dva razloga.

Pre svega, po modernim tehnikama optimizacije, strane se uitavaju bre kada veb ita

uitava JavaScript na kraju ralanjivanja (engl.parsing) strane. Drugim reima, ako Ja-vaScript kd stavite na kraj veb strane, veb ita e uitati sve ispred njega pre nego touita taj kd. To je dobro jer e veina itaa obino prestati da obrauje druge inicija-tive za uitavanje dok JavaScript mehanizam ne prevede JavaScript kd na veb stranici.To je neka vrsta uskog grla, poto se JavaScript nalazi na vrhu dokumenta veb strane.Naravno, u nekim situacijama lake je staviti JavaScript u element . Ali, iskrenogovorei, nikada nisam video situaciju gde je to apsolutno neophodno. Svaka preprekasmetanju JavaScript koda na kraj strane na koju sam naiao u mom projektantskomiskustvu, lako je uklonjena uz velike dobitke u optimizaciji.

Drugo, ako su nam cilj brze veb strane, zato razvijati reenje za situaciju koja se moeizbei jednostavno premetanjem koda na dno strane? Kad moram da biram izmeuvie i manje koda, biram ovo drugo. Ako ne koristimo dogaaj ready(), skraujemo kd;krai kd e se izvravati bre od dueg.

Evo primera koda s dogaajem alert() bez primene dogaaja ready() (izostavili smoneka objanjenja):

The DOM is ready!

alert(jQuery(p).text());//samo napred, DOM je uitan

8/3/2019 01_JQK

13/32

1.3 Biranje DOM elemenata pomou selektora i unkcije jQuery() | 13

Skreem panju na to da sam sav JavaScript kd smestio ispred zavrne oznake .Sve dodatne oznake bi trebalo staviti iznad JavaScript koda u HTML dokumentu.

1.3 Biranje DOM elemenata pomou selektorai unkcije jQuery()

ProblemTreba da izaberete jedan DOM element i/ili skup DOM elemenata kako biste na ele-mente primenjivali jQuery metode.

Reenje jQuery prua dve mogunosti za biranje DOM elemenata. U obe varijante koristi sefunkcija jQuery() ili njen alijas $(). Prvo predstavljamo daleko ubedljivije reenje kojese mnogo ee primenjuje: u njemu se koriste CSS selektori i namenski selektori (engl.custom selectors). Kada se funkciji jQuery() prosledi znakovni niz (engl. string) sa selek-torskim izrazom, ona e da proeljava DOM i da locira DOM vorove. U narednomprimeru biraju se svi elementi u HTML dokumentu:

linklinklinklinklinklink

//ispisuje da ima 6 elemenataalert(Page contains + jQuery(a).length + elements!);

Ako biste ovu HTML stranu uitali u veb ita, videli biste da ovaj segment koda izvra-va funkciju alert() koja ispisuje poruku da stranica sadri est elemenata . Tu vred-nost sam prosledio metodi alert() tako to sam prvo izabrao sve elemente , a potompomou svojstva length prosledio broj elemenata u jQuery omotakom skupu.

8/3/2019 01_JQK

14/32


Skreem panju da e prvi parametar funkcije jQuery(), kako je korien u ovom pri-meru, prihvatiti i vie izraza. Za to je potrebno da razdvojite selektore zarezima unutarznakovnog niza koji je prosleen kao prvi parametar funkciji jQuery(). Evo primerakako bi to moglo da izgleda:

jQuery(selector1, selector2, selector3).length;

Druga, manje koriena mogunost za biranje DOM elemenata jeste da se funkcijijQuery() prosledi JavaScript referenca na DOM element(e). Kao primer, u narednomsegmentu koda izabraemo sve elemente u HTML dokumentu. Primetiete da funk-ciji jQuery() prosleujem niz elemenata skupljenih pomou DOM metode getEle-mentsByTagName. Rezultat ovog primera je isti kao rezultat prethodnog segmenta koda:

linklinklinklinklinklink

//ispisuje poruku da ima 6 elemenataalert(Page contains + jQuery(document.getElementsByTagName(a)).length +

Elements, And has a + jQuery(document.body).attr(bgcolor) + background);

Objanjenje

jQuery svoju uvenu snagu delom duguje svom selektorskom mehanizmu, Sizzlu (http://sizzlejs.com/), koji bira DOM elemente iz HTML dokumenta. Iako opcija prosleivanjaDOM referenci funkciji jQuery() postoji (a lepo ju je imati kad zatreba), nije to ono zbogega je biblioteka jQuery privukla optu panju. jQuery je jedinstven zbog svojih broj-nih i monih opcija za rad sa selektorima.

Sve do kraja knjige uiete o monim i robusnim selektorima. Kada se susretnete s ne-kim selektorom, bitno je da razumete njegovu funkciju. To znanje e vam mnogo kori-stiti u buduim programerskim poduhvatima s bibliotekom jQuery.

8/3/2019 01_JQK

15/32

1.4 Biranje DOM elemenata unutar zadatog konteksta | 15

1.4 Biranje DOM elemenata unutar zadatog kontekstaProblemTreba da referencirate jedan DOM element ili skup DOM elemenata u kontekstu dru-

gog DOM elementa ili dokumenta kako biste primenili jQuery metode na te elemente.

ReenjeFunkcija jQuery() kojoj se prosledi CSS izraz prihvatie i drugi parametar koji je upuu-je na kontekst u kome treba da trai DOM elemente na osnovu izraza. U ovom sluaju,drugi parametar moe biti DOM referenca, jQuery omota ili dokument. U narednomsegmentu koda ima dvanaest elemenata . Obratite panju na to kako pomoudatog konteksta na osnovu elementa biram samo odreene elemente :

//pretrauje po svim elementima obrasca, koristei omota za kontekst,//ispisuje selected 8 inputsalert(selected + jQuery(input,$(form)).length + inputs);

8/3/2019 01_JQK

16/32


//trai unutar prvog obrasca, koristei DOM referencu kao kontekst,//ispisuje selected 4 inputsalert(selected + jQuery(input,document.forms[0]).length + inputs);

//trai po body elementu sve input elemente pomou izraza,//ispisuje selected 12 inputs,

alert(selected + jQuery(input,body).length + inputs);

ObjanjenjeKao to je pomenuto u reenju iz ovog recepta, mogue je izabrati dokumente kao kontekstza pretraivanje. Na primer, mogue je pretraivati u okviru konteksta XML dokumentakoji je poslat usled XHR zahteva (Ajax). Vie detalja o toj opciji nai ete u poglavlju 16.

1.5 Filtriranje omotakog skupa DOM elemenataProblemPotrebno je da iz jQuery omotakog skupa izabranih DOM elemenata uklonite onekoji ne odgovaraju novom navedenom izrazu (ili izrazima) kako biste dobili nov skupelemenata s kojima ete raditi.

Reenje jQuery ima metodu za filtriranje koja se primenjuje na jQuery omotaki skup DOMelemenata da bi se iz njega izostavili elementi koji ne odgovaraju zadatom izrazu (iliizrazima). Ukratko, metoda filter() omoguava da filtrirate tekui skup elemenata.Ova metoda se razlikuje od jQuery metode find() koja redukuje omotaki skup DOMelemenata tako to nalazi nove elemente (preko novog selektorskog izraza), ukljuujuielemente decu tekueg omotakog skupa.

Naredni segment koda pomoi e vam da bolje razumete metodu filter():linklink

linklink

8/3/2019 01_JQK

17/32

1.5 Filtriranje omotakog skupa DOM elemenata | 17

linklinklinklink

//ispisuje da su u skupu ostala etiri elementaalert(jQuery(a).filter(.external).length + external links);

HTML stranica iz navedenog primera sadri veb stranu sa deset elemenata . Za spolj-ne veze, klasa se zove external. Pomou funkcije jQuery() biramo sve elemente na

strani. Potom, pomou metode filter(), iz izvornog skupa uklanjamo sve elemente ijiatribut class nema vrednost external. Kada se prvobitni skup DOM elemenata izmenipomou metode filter(), pozivamo svojstvo length koje sadri informaciju o brojupreostalih elemenata u skupu poto je filter primenjen.

ObjanjenjeMetodi filter() mogue je poslati i funkciju koja se moe upotrebiti za filtriranje omo-takog skupa. Prethodni primer u kome se metodi filter() prosleuje znakovni izraz,moe se izmeniti tako da se umesto toga koristi funkcija:

alert(jQuery(a)

.filter(function(index){ return $(this).hasClass(external);})

.length + external links);

Metodi filter() se, u ovom sluaju, prosleuje anonimna funkcija. Ona se poziva skontekstom jednakim tekuem elementu. To znai da kada upotrebim referencu $(this)u funkciji, zapravo referenciram svaki DOM element u omotakom skupu. Unutarfunkcije, proveravam svaki element u omotakom skupu kako bih proverio da li je

rezultat metode hasClass() jednak external. Ako je tako, logika promenljiva ima vred-nost true i element e ostati u skupu, a ako nije (false), element se uklanja iz skupa.Drugi nain je da se, ukoliko je rezultat funkcije false, element uklanja. Ako je rezultatfunkcije bilo ta drugo, element ostaje u omotakom skupu.

Moda ste primetili da sam funkciji prosledio parametar index koji ne koristim. Ovajparametar se po potrebi moe koristiti da se numeriki referencira indeks elementa ujQuery omotakom skupu.

8/3/2019 01_JQK

18/32


1.6 Nalaenje elemenata potomaka u trenutno odabranomomotakom skupu

ProblemTreba nai potomke (decu) DOM elemenata (ili jednog elementa) u kontekstu trenutnoodabranih elemenata.

ReenjePomou metode .find() napravite omotaki skup elemenata na osnovu konteksta teku-eg skupa i potomaka elemenata tog skupa. Na primer, radite s veb stranom koja sadrinekoliko pasusa. U ovim pasusima rei su naglaene (kurzivne). Ako elite da izaberetesamo elemente unutar elemenata

, to biste mogli uraditi na sledei nain:

Ut ad videntur facilisis elit cum. Nibh insitam erat facitsaepius magna. Nam ex liber iriure et imperdiet. Et mirum erosiis te habent.

Claram claritatem eu amet dignissim magna. Dignissim quam elit facer eros

illum. Et qui ex esse tincidunt anteposuerit. Nulla nam odio iivulputate feugait.

In quis laoreet te legunt euismod. Claritatem consuetudiumwisi sit velit facilisi.
//ispisuje ukupan broj kurzivnih rei unutar elemenata
alert(The three paragraphs in all contain +jQuery(p).find(em).length +

italic words);

Prethodno reenje smo mogli da izvedemo i tako to bismo funkciji jQuery() prosledilikontekstnu referencu kao drugi parametar:

alert(The three paragraphs in all contain + jQuery(em,$(p)).length + italic words);

Pored toga, valja pomenuti da su poslednja dva segmenta koda navedeni kao ilustracija.Loginije, ako ne pragmatinije, bilo bi da se pomou CSS selektora odaberu svi kurziv-

ni elementi potomci unutar elemenata

predaka.

8/3/2019 01_JQK

19/32

1.7 Vraanje prethodnoj selekciji pre destruktivne promene | 19

alert(The three paragraphs in all contain + jQuery(p em).length + italic words);

ObjanjenjePomou jQuery metode .find() moe se napraviti nov skup elemenata na osnovu kon-teksta tekueg skupa DOM elemenata i njihove dece. Metode.filter() i .find() estose meaju. Najlake ih je razlikovati po tome to metoda .find() radi s decom tekuegskupa (bira ih), dok metoda .filter() radi samo s tekuim skupom elemenata. Drugimreima, ako elite da izmenite tekui omotaki skup koristei ga kao kontekst za daljuselekciju dece izabranih elemenata, upotrebite metodu .find(). Ukoliko samo hoete dafiltrirate tekui omotaki skup i da dobijete nov podskup iskljuivo od DOM elemenatau tom skupu, upotrebite .filter(). Moemo razliku da opiemo i ovako metoda find()vraa decu, dok metoda filter() samo filtrira elemente u tekuem omotakom skupu.

1.7 Vraanje prethodnoj selekciji pre destruktivne promeneProblemPotrebno je eliminisati destruktivnu jQuery metodu (na primer, filter() ili find())primenjenu na skup elemenata da bi se skup vratio u stanje pre primene destruktivnemetode i da bi se potom s njim moglo raditi kao da destruktivna metoda nije pozvana.

ReenjejQuery ima metodu end() pomou koje se skup DOM elemenata vraa u stanje pre iz-vrenja destruktivne metode. Naredni segment HTML koda pomoi e vam da shvatitekako funkcionie metoda end().

text

Middle text

text

alert(jQuery(p).filter(.middle).length); //alerts 1alert(jQuery(p).filter(.middle).end().length); //alerts 3alert(jQuery(p).filter(.middle).find(span)

.end().end().length); //alerts 3

8/3/2019 01_JQK

20/32


Prvi alert() iskaz je jQuery iskaz koji trai po dokumentu sve elemente

, a potomprimenjuje metodu filter() na izabrane elemente

u skupu tako da se biraju samoelementi iji atribut class ima vrednost middle. Posle toga, svojstvo length prijavljujekoliko je elemenata ostalo u skupu:

alert(jQuery(p).filter(.middle).length); //ispisuje broj elemenata u skupu

U narednom alert() iskazu koristi se metoda end(). Ovde se radi sve to je raeno uprethodnom iskazu osim to se ponitava dejstvo metode filter(), a rezultat je omo-taki skup elemenata kakav je bio pre primene metode filter():

alert(jQuery(p).filter(.middle).end().length); //ispisuje broj elemenata u skupu

Poslednji alert() iskaz pokazuje kako se metoda end() primenjuje dvaput da bi se eli-minisale destruktivne promene i filter() i find(), tako da se omotakom skupu vraapoetni sastav:

alert(jQuery(p).filter(.middle).find(span).end().end().length); //ispisuje broj//elemenata u skupu

ObjanjenjeAko se metoda end() upotrebi u sluaju kada nije bilo prethodnih destruktivnih pro-mena, vraa se prazan skup. Destruktivna operacija je svaka operacija koja menja skupizabranih jQuery elemenata, dakle svaka metoda za kretanje ili manipulisanje iji jerezultat jQuery objekat, ukljuujui metode add(), andSelf(), children(), closes(), fil-ter(), find(), map(), next(), nextAll(), not(), parent(), parents(), prev(), prevAll(),siblings(), slice(), clone(), appendTo(), prependTo(), insertBefore(), insertAfter() ireplaceAll().

1.8 Dodavanje prethodne selekcije tekuoj selekcijiProblemPrimetili ste metode na skup elemenata da biste dobili nov skup elemenata. Meutim,elite da radite i s prethodnim i s novim skupom.

ReenjePrethodnu selekciju DOM elemenata moete kombinovati s tekuom selekcijom pomo-u metode andSelf(). Na primer, u narednom segmentu koda prvo biramo sve elemente na strani. Posle toga, u tom skupu elemenata nalazimo sve elemente

unutarelemenata . Da bismo radili i sa elementima i sa elementima

naenim uelementima , mogli bismo ukljuiti elemente u tekui skup pomou metodeandSelf(). Da sam izostavio metodu andSelf(), ivina boja bi se mogla primeniti samo

na elemente

:

8/3/2019 01_JQK

21/32

1.9 Kretanje po DOM strukturi na osnovu tekueg konteksta da bi se dobio nov skup DOM elemenata | 21

Paragraph

Paragraph

jQuery(div).find(p).andSelf().css(border,1px solid #993300);

ObjanjenjeNe zaboravite sledee: kada primenite metodu andSelf(), tekuem skupu se dodajesamo prethodni skup, ne i svi prethodni skupovi.

1.9 Kretanje po DOM strukturi na osnovu tekueg kontekstada bi se dobio nov skup DOM elemenata

ProblemIzabrali ste skup DOM elemenata, i na osnovu pozicije selekcija unutar DOM strukturestabla, elite da proeljate DOM kako biste dobili nov skup elemenata s kojim ete raditi.

ReenjejQuery ima nekoliko metoda za kretanje po DOM-u na osnovu konteksta trenutno iza-branih DOM elemenata.

Na primer, razmotrimo naredni segment HTML koda:

linklinklinklink

8/3/2019 01_JQK

22/32


Hajde da odaberemo drugi element pomou namenskog selektora indeksa :eq():

//bira drugi element iz skupa elemenata po indeksu, poetni indeks je 0jQuery(li:eq(1));

Sada imamo kontekst poetnu taku unutar HTML strukture. Naa poetna taka

je drugi element . Odatle moemo da se kreemo bilo kuda zapravo, gotovo bilokuda. Pogledajmo gde moemo da idemo pomou nekoliko jQuery metoda za kretanjepo DOM-u. Komentari objanjavaju postupke:

jQuery(li:eq(1)).next() // bira trei element

jQuery(li:eq(1)).prev() // bira prvi element

jQuery(li:eq(1)).parent() // bira sve elemente

jQuery(li:eq(1)).parent().children() // bira sve elemente

jQuery(li:eq(1)).nextAll() // bira sve elemente posle drugog elementa

jQuery(li:eq(1)).prevAll() // bira sve elemente pre drugog elementa

Podseamo da ove metode za kretanje stvaraju nov omotaki skup, a prethodnom omo-takom skupu moete se vratiti pomou metode end().

ObjanjenjeDo sada smo metode za kretanje koristili za jednostavne pomake. Kada je re o kretanju,postoje dva dodatna koncepta koja je vano savladati.

Prvi i verovatno najoigledniji koncept jeste da se metode za kretanje mogu ulanavati.Razmotrimo ponovo naredni jQuery iskaz:

jQuery(li:eq(1)).parent().children() //bira sve elemente

Primetiete da sam od drugog elementa preao na roditelja, element , a potomod roditelja izabrao svu decu elementa . jQuery omotaki skup sadrae sve ele-mente kojih ima u elementu . Naravno, ovo je namenski primer ija je svrhada se prikae kako funkcioniu metode za kretanje. Da nam je zaista trebao omotakiskup sa samo elementima , mnogo jednostavnije bi bilo da odmah odaberemo sveelemente (na primer, pomou izraza jQuery(li)).

Drugi koncept koji bi trebalo da imate na umu kada radite s metodama za kretanje jesteda se mnogim metodama moe proslediti opcioni parametar koji se moe upotrebitiza filtriranje selekcija. Pogledajmo ponovo primer sa ulanavanjem i razmislimo kakose moe izmeniti tako da se izabere samo poslednji element . I ovo je ilustrativniprimer ija je svrha da se pokae kako se metodi za kretanje moe proslediti izraz zabiranje konkretnog elementa:

jQuery(li:eq(1)).parent().children(:last) //bira poslednji element

jQuery ima i druge metode za kretanje koje nisu ovde prikazane. Kompletan spisak svihmetoda za kretanje i prateu dokumentaciju nai ete na adresi http://docs.jquery.com/Traversing. Te dodatne metode koristie se do kraja knjige.

8/3/2019 01_JQK

23/32

1.10 Pravljenje DOM elemenata, rad s njima i umetanje | 23

1.10 Pravljenje DOM elemenata, rad s njima i umetanjeProblemTreba da napravite nove DOM elemente (ili samo jedan element) koji se odmah biraju,

obrauju i potom umeu u DOM.

ReenjeAko jo uvek niste uvideli, funkcija jQuery() je viestrana jer se ponaa razliito zavi-sno od prosleenih parametara. Ako funkciji prosledite znakovni niz ili sirovi HTML,napravie usput te elemente za vas. Na primer, naredni iskaz pravi element omotanunutar elementa

s tekstualnim vorom kapsuliranim u elementima

i :

jQuery(

jQuery
);
Nakon to je element napravljen, moete dalje raditi s njim pomou jQuery metoda. Toje kao da ste u startu izabrali

iz postojeeg HTML dokumenta. Na primer, mogli bi-smo da pomou metode .find() izaberemo element i da mu onda izmenimo jedanod atributa. U sluaju narednog iskaza, atributu href dodeljujemo vrednost http://www.jquery.com:

jQuery(

jQuery
).find(a).attr(href,http://www.jquery.com);
Sjajno, zar ne? Bie jo bolje, jer smo do sada samo pravili elemente usput i radili s nji-ma u kodu. Tek treba da, takorei, zaista izmenimo trenutno uitan DOM. Da bismo to

uradili, moraemo da primenimo jQuery metode za manipulisanje. Naredni primer jena segment koda u kontekstu HTML dokumenta. U njemu pravimo elemente, radimos njima, a onda ih umeemo u DOM pomou metode appendTo():

jQuery(

jQuery
).find(a).attr(href,http://www.jquery.com)
.end().appendTo(body);

Obratite panju na to da pomou metode end() ponitavam dejstvo metode find() takoda kada pozovem metodu appendTo() ona dodaje sadraj izvornog omotakog skupa.

8/3/2019 01_JQK

24/32


ObjanjenjeU ovom receptu, funkciji jQuery() prosledili smo znakovni niz sirovog HTML kodapomou kojeg su direktno napravljeni DOM elementi. Funkciji jQuery() se moe pro-slediti i DOM objekat koji je napravila DOM metoda createElement():

jQuery(document.createElement(p)).appendTo(body); //dodaje prazan p element strani

Naravno, osigurati da znakovni niz HTML koda s vie elemenata pravilno funkcionie,mogao bi biti prilino zahtevan zadatak.

Valjalo bi pomenuti da je metoda appendTo() samo vrh ledenog brega brojnih metodaza manipulisanje. Pored metode appendTo(), na raspolaganju su i naredne metode zamanipulisanje:

append()

prepend()

prependTo()

after()

before()

insertAfter()

insertBefore()

wrap()

wrapAll()

wrapInner()

1.11 Uklanjanje DOM elemenataProblemTreba da uklonite elemente iz DOM-a.

ReenjeZa uklanjanje izabranog skupa elemenata i njihove dece iz DOM-a, moe se koristitimetoda remove(). Razmotrimo naredni segment koda:

8/3/2019 01_JQK

25/32

1.11 Uklanjanje DOM elemenata | 25

AnchorsAnchor ElementAnchor ElementAnchor Element

jQuery(a).remove();

Kada se prethodni segment koda uita u veb ita, sidreni elementi (engl. anchor ele-ments) ostae na stranici dok se ne izvri JavaScript kd. Kada se metoda remove() pri-meni da bi se uklonila sva sidra iz DOM-a, na strani e se videti samo element .

Ovoj metodi se moe proslediti i izraz da bi se pri uklanjanju filtrirali elementi. Na pri-

mer, navedeni segment koda mogao bi se izmeniti tako da uklanja samo sidra odreeneklase:

AnchorsAnchor Element

Anchor ElementAnchor Element

jQuery(a).remove(.remove);

ObjanjenjeKada koristite jQuery metodu remove(), morate imati na umu sledee:Iako ova metoda uklanja izabrane elemente iz DOM-a, oni nisu uklonjeni iz jQueryomotakog skupa. To znai da biste, teorijski posmatrano, mogli da nastavite rad snjima i ak da ih vratite u DOM ako elite.

Ova metoda ne samo da uklanja elemente iz DOM-a, ve uklanja i sve procedureza obradu dogaaja i interno keirane (uskladitene) podatke koje su uklonjenielementi moda sadravali.

8/3/2019 01_JQK

26/32


1.12 Zamena DOM elemenataProblemTekue vorove u DOM-u treba da zamenite novim DOM vorovima.

ReenjeElemente kojima treba zameniti postojee elemente moemo izabrati pomou metodereplaceWith(). U narednom segmentu koda, pomou metode replaceWith() zamenjuje-mo sve elemente iji atribut class ima vrednost remove novom DOM strukturom:

namenamenamenamenamenamenamename

jQuery(li.remove).replaceWith(removed);

Nova DOM struktura dodata DOM-u jeste parametar tipa znakovnog niza prosleenmetodi replaceWith(). U ovom primeru, svi elementi , ukljuujui decu, zamenjuju

se novom strukturom, removed.

ObjanjenjejQuery metoda koja se ponaa obrnuto ovoj metodi, tj. koja izvrava isti zadatak ali saobrnutim parametrima, jeste metoda replaceAll(). Na primer, jQuery segment koda iznaeg recepta mogao bi se napisati na sledei nain:

jQuery(removed).replaceAll(li.remove);

U ovom iskazu, funkciji jQuery() prosleujemo HTML znakovni niz, a potom pomoumetode replaceAll() biramo DOM vor i njegovu decu koje hoemo da uklonimo izamenimo.

8/3/2019 01_JQK

27/32

1.13 Kloniranje DOM elemenata | 27

1.13 Kloniranje DOM elemenataProblemTreba da klonirate/kopirate deo DOM-a.

ReenjejQuery metoda clone() slui za kopiranje DOM elemenata. Koristi se vrlo jednostavno odaberu se DOM elementi pomou funkcije jQuery(), a onda se nad izabranim skupomelemenata pozove metoda clone(). Umesto izvorno izabranih DOM elemenata, rezultat jekopija DOM strukture koja se vraa radi ulanavanja. U narednom segmentu koda kloni-ramo , a potom dodajemo kopiju DOM-u pomou metode za umetanje appendTo().U sutini, strani dodajemo jo jednu strukturu istovetnu onoj koja tu ve postoji:

listlistlistlist

jQuery(ul).clone().appendTo(body);

Objanjenje

Metoda za kloniranje je vrlo korisna za premetanje DOM odlomaka koda unutarDOM-a. Od naroite je pomoi kada elite da kopirate i premestite ne samo DOM ele-mente, ve i dogaaje vezane za klonirane DOM elemente. Paljivo pregledajte HTMLkd i jQuery kd u ovom primeru:

8/3/2019 01_JQK

28/32


listlistlistlist

jQuery(ul#a li)

.click(function(){alert(List Item Clicked)})

.parent().clone(true)

.find(li)

.appendTo(#b).end()

.end()

.remove();

Ako biste izvrili ovaj segment koda u veb itau, klonirali biste na strani elemente kojima je pridruen dogaaj click, umetnuli biste te nove klonirane elemente (ukljuu-jui dogaaje) u prazan element i potom uklonili element koji ste klonirali.

Moda je ovo previe za projektanta koji tek poinje da koristi jQuery, pa predlaem dapregledamo naredni jQuery iskaz redom da bismo razjasnili kako funkcioniu ulanane

metode:jQuery(ul#a li)1. = Bira element sa id atributom vrednosti a, potom bira sveelemente unutar elementa .

.click(function(){alert(List Item Clicked)})2. = Pridruuje dogaaj click sva-kom elementu .

.parent()3. = Kree se po DOM-u menjajui moj izabrani skup u element .

.clone(true)4. = Klonira element i svu njegovu decu, ukljuujui svaki dogaajpridruen elementima koji se kloniraju. To se radi tako to se metodi clone() pro-

sleuje logika vrednost true..find(li)5. = Sada se u okviru kloniranih elemenata menja skup elemenata takoda sadri samo elemente koji se nalaze unutar kloniranog elementa .

.6. appendTo(#b) = Izabrani klonirani elementi smetaju se unutar elementa iji atribut id ima vrednost b.

.end()7. = Vraa prethodni izabran skup elemenata koji je bio klonirani element .

.end()8. = Vraa prethodno izabran skup elemenata izvorni element koji jekloniran.

.remove()9. = Uklanja izvorni element .

8/3/2019 01_JQK

29/32

1.14 itanje vrednosti, zadavanje vrednosti i uklanjanje atributa DOM elementa | 29

Poznavanje naina manipulisanja izabranim skupom elemenata ili vraanja na prethod-no izabran skup, od presudnog je znaaja za razumevanje sloenih jQuery iskaza.

1.14 itanje vrednosti, zadavanje vrednosti i uklanjanjeatributa DOM elementa

ProblemTreba da saznate ili da zadate vrednost atributa DOM elementa izabranog pomoufunkcije jQuery().

ReenjejQuery metoda attr() slui za itanje i zadavanje vrednosti atributa. U narednom seg-mentu koda zadavaemo, a potom i itati vrednost atributa href elementa :

jquery.com// obavetava o URL adresi jQuery matine stranealert(

jQuery(a).attr(href,http://www.jquery.com).attr(href));

U prethodnom primeru, biramo element u HTML dokumentu, zadajemo vrednost

njegovog atributa href, a potom itamo vrednost tog atributa tako to istoj toj metodiprosleujemo njegovo ime. Da je u dokumentu bilo vie elemenata , metoda attr()bi pristupila prvom odgovarajuem elementu. Kada se uita u veb ita, ovaj segmentkoda e pomou metode alert() ispisati zadatu vrednost atributa href.

Poto veina elemenata ima vie atributa, mogue je zadati vrednost veem broju atri-buta jednim pozivom metode attr(). Recimo, u prethodnom primeru mogli bismo dazadamo vrednosti i atributu title tako to bismo metodi attr() prosledili objekat ume-sto dva parametra tipa znakovnog niza:

jQuery(a).attr({href:http://www.jquery.com,title:jquery.com} ).attr(href)

8/3/2019 01_JQK

30/32


Mogunost dodavanja atributa elementima praena je mogunou uklanjanja atributai njihovih vrednosti. Za uklanjanje atributa HTML elemenata koristi se metoda remo-veAttr(). Ovoj metodi se prosleuje znakovni niz atributa koji elite da uklonite (npr.jQuery(a).removeAttr(title)).

ObjanjenjePored metode attr(), jQuery ima i poseban skup metoda za rad sa atributom classHTMLelementa. Poto atribut class moe da ima vie vrednosti (na primer, class=class1cla-ss2class3), ove jedinstvene metode za atribute koriste se za rad s tim vrednostima.

Re je o narednim jQuery metodama:

addClass()

Aurira vrednost atributa class pomou nove klase/vrednosti, ukljuujui svaku

klasu s ve zadatom vrednouhasClass()

ita vrednost atributa class odreene klase

removeClass()

Uklanja jedinstvenu klasu iz atributa class zadravajui svaku prethodno zadatuvrednost

toggleClass()

Dodaje odreenu klasu ako ve ne postoji; uklanja odreenu klasu ukoliko postoji

1.15 itanje i zadavanje HTML sadrajaProblemPotrebno je proitati fragment HTML sadraja s tekue veb strane ili ga zadati.

ReenjeZa itanje i zadavanje fragmenata (ili DOM struktura) HTML elemenata moe se kori-stiti jQuery metoda html(). U narednom segmentu koda, pomou ove metode zadaje-mo, a potom itamo HTML vrednost elementa

iz HTML dokumenta:

8/3/2019 01_JQK

31/32

1.16 itanje i zadavanje tekstualnog sadraja | 31

src=http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js>jQuery(p).html(Hello World, I am a

element.);alert(jQuery(p).html());

Kada se ovaj segment koda izvri u veb itau, ita e ispisati ta je HTML sadraj ele-menta

koji smo zadali, a potom i uitali pomou metode html().

ObjanjenjeOva metoda koristi DOM svojstvo innerHTML da bi itala i zadavala fragmente HTMLsadraja. Imajte na umu da metoda html() nije dostupna za XML dokumente (premda

e funkcionisati za XHTML dokumente).

1.16 itanje i zadavanje tekstualnog sadrajaProblemPotrebno je proitati ili zadati tekst unutar HTML elementa.

ReenjeZa itanje i zadavanje tekstualnog sadraja elemenata slui jQuery metoda text(). Unarednom segmentu koda, koristimo ovu metodu da zadamo, a potom i proitamo tek-stualnu vrednost elementa

u HTML dokumentu:

jQuery(p).text(Hello World, I am a

element.);alert(jQuery(p).text());

Kada se ovaj segment koda izvri u veb itau, ita e ispisati ta je sadraj elementa

koji smo zadali, a potom i uitali pomou metode html().

8/3/2019 01_JQK

32/32

ObjanjenjeMetoda text() slina je metodi html() s tim to metoda text() ne uzima u obzir HTMLoznaavanje (menja simbole < i > njihovim HTML verzijama). To znai sledee: akostavite oznake u znakovni niz prosleen metodi text(), ona e ih konvertovati u njihove

HTML verzije (< i >).

1.17 Korienje alijasa $ bez uzrokovanja globalnih konfikataProblemelite da umesto navoenja imena globalnog imenskog prostora (jQuery) koristite skra-enu verziju, alijas $, ne rizikujui da nastane globalni konflikt imena.

ReenjeNapravite anonimnu samopozivajuu funkciju kojoj se prosleuje jQuery objekat, apotom upotrebite znak $ kao parametar pokaziva na jQuery objekat.

Na primer, sav jQuery kd mogao bi se kapsulirati unutar naredne samopozivajuefunkcije:

(function($){ //funkcija koja pravi privatnu oblast vaenja, s parametrom $//privatna oblast vaenja i korienje znaka $ bez rizika od konflikta

})(jQuery); //poziva bezimenu funkciju i prosleuje joj jQuery objekat

ObjanjenjeProsledili smo globalnu referencu na jQuery kd funkciji koja pravi privatnu oblastvaenja. Da nismo tako uradili i da smo alijas $ primenili u globalnoj oblasti vaenja,prenebregli bismo rizik od konflikta imena pretpostavljajui da nijedan drugi postojei(ili budui) skript u HTML dokumentu ne koristi znak $. Zato rizikovati kada moetenapraviti privatnu oblast vaenja?

Druga prednost ovakvog postupka jeste to to e se kd unutar anonimne samopoziva-

jue funkcije izvravati u sopstvenoj privatnoj oblasti vaenja. Budite sigurni da je maloverovatno kako e ono to se nalazi unutar funkcije ikada izazvati konflikt s drugimJavaScript kodom napisanim u globalnoj oblasti vaenja. Dakle, zato rizikovati pro-gramske sukobe? Naprosto, napravite sopstvenu privatnu oblast vaenja.

01_jqk

Documents