element desno dok ne dodje do pro perty od 250px.(Po defaultu svi HTML elementi se ne mogu pomerati, da bi manipul isao pozicijom moras prvo postaviti CSS position property elementa na relative,fixed ili absolute).Vise properties mogu biti animirane istovremeno $("div").animate({ left:'250px',opacity:'0.5',height:'150px',width:'150px'}); Skoro sve CSS propert ies mozes animirati sa animate() metodom samo sto svi property names moraju biti cam
el -cased(npr marginRight umesto margin-right) i color animation nije ukljucen u core JQuery i moras snimiti plugin.Mozes koristiti relative values(relativno od elementovog trenutnog value) npr height:'+=150px', i pre-defined values npr show , hide ili toggle height:'toggle'.Queue Functionality omogucava da animate() calls idu jedan po jedan jer stvori unutrasnji queue npr: div.animate({heigh:'300px', opacity:'0.4'},"slow"); div.animate({heigh:'100px',opacity:'0.8'},"slow"); itd. JQuery stop(): sluzi da bi se zaustavila animacija ili efekat pre nego sto se zavrsi i radi za sve jQuery effect functions, ukljucujuci sliding, fading i cust om animations $(selector).stop(stopAll,goToEnd); stopAll parametar je optional i precizira da li animation queue treba biti cleared ili ne, default je ne sto zna ci da ce samo aktivne animacije biti zaustavljene, dozvoljavajuci queued animacije da se nastave.goToEnd precizira da li da se zavrsi trenutna animacija odmah, def ault je false, po defaultu stop() metod zaustavlja trenutnu animaciju da se perform na odabrani element $("panel").stop();
JQUERY CALLBACK: callback funkcija je executed nakon sto je trenutni efekat 100% zavrsen. Sa efektima moze se desiti da sledeci line of code executira iako efeka t nije zavrsen sto stvara greske, da bi ovo sprecio kreiras callback funkciju koja se execute nakon sto je trenutni efekat zavrsen npr $("p").hide("slow",function( ) {alert("The paragraph is now hidden");}); JQUERY CHAINING: omogucava da se chain together actions i methods i omogucava na m da run vise JQuery methods na istom elementu sa jednim statement, sto moze da olaksa posao browserima da ne traze isti element vise od jedanput npr $("#p1").c ss ("color","red").slideUp(2000).slideDown(2000);prvo promeni boju u crvenu pa onda slide up i slide down. Kada chainiras mozes formatirati kod kako hoces sa line breaks i indentations (tj pisi jednu komandu ispod druge, nece pokvariti egzekuc iju) JQUERY GET: JQuery moze da manipulate DOM (Document Object Model). DOM je platfo rm i language-neutral interface koja omogucava programs i scripts da dinamicki acce ss content,structure, i style dokumenta.3 jednostavna ali korisna JQuery metoda za DOM manipulation su: text() koji sets or returns tekstualni sadrzaj odabranih elemenata, html()koji sets or returns the content odabranih elemenata ukljucujuc i HTML markup i val() koji sets or returns the value of form fields. NPR:$("#btn1")clic k(fun ction(){alert("Text: "+$("#test").text()); }); i isto tako i za .val() metodu. G ET Attributes-attr(). jQuerY attr() metod se koristi da bi se dobili attribute valu es ovaj primer demonstrira kako mozes dobiti vrednost href atributa u link $("butto n #).click(function(){alert($("w3s").attr("href")); )); JQUERY SET CONTENT AND ATTRIBUTES
koristicemo iste 3 metode da set content:text() sets or returns the content of selected elements, html()Sets or returns the content of selected elements (inclu ding HTML markup) val() - Sets or returns the value of form fields. Sva tri JQUery metoda navedena imaju i callback funkciju koja ima 2 parametra: indeks trenutnog elemen ta u spisku odabranih elemenata i orinalnu(staru) vrednost. Ti onda vratis string k oji zelis da koristis kao novu vrednost u funkcijil. The jQuery attr() metod se takodje koristi da set/change attfibute values, attr() metod ti takodje omogucav a da postavis vise attributes istovremeno. Jquery metoe attr() takodje ima callbak funkcju koja ima 2 parametra; indeks trenuntnog elementa u spisku odabranih elemenata i originalni stari attibute value, onda mozes vratiti string koji zelis da koristi s kao novi attribute\ value from the function.after() i before() metode mogu da prime neogranicen broj novih elemenaga kao pafametre, novi elementi mogu biti generisani sa text/HTML, sa jquery ili sa javasript code i DOM elementima. JQUERY REMOVE: veoma je lako remove postojece HTML elemente, postoje 2 osnovne metode za to: remove() sto skloni odabrane elemente ( i njihove child elemente) i empty() koja samo skloni child elements od selected element. remove() metod tako dje prihvata jedan parametar sto omogucava da se filtriraju elementi koji se trebaju skloniti . Parametar moze biti bilo koji od JQUERY selector syntaxes. JQUERY I CSS: Jquery moze da manipulise CSS na vise nacina: addClass() doda jeda n ili vise classes odabranim elementima. removeClass()removes one or more classes from the selected elements, toggleClass() toggles izmedju dodavajnja i otklanjan ja classes iz selected elements, css() sets or returns the file attribue. JQUERY CSS metod postavlja ili povagi jednu ili visd style properties za odabran e elemente. Da povratis vrednost specificne CSS property, korisi ovaj syntax css("propertyname"); ili ovaj primer ce vratiti background boju od prvog matched element $("p").css("background-color");. Da postavis specificnu CSS property kor isti ovaj synax css("propertyname","value");. Da postavis multiple css properties koristi ovaj syntax css ({"propertyname":"value","propertyname":"value",....}); JQuery Dimension Methods: ima ih vise ; width(), height(), innerWidth(),innerHei ght() outerWidth(), outerHeight(). The width() method sets or returns the width of an element (includes NO padding, border, or margin). The height() method sets or returns the height of an element (includes NO paddin g, border, or margin). The innerWidth() method returns the width of an element (includes padding). The innerHeight() method returns the height of an element (includes padding). The outerWidth() method returns the width of an element (includes padding and bo rder).
The outerHeight() method returns the height of an element (includes padding and border). JQUERY TRAVERSING Traversing znaci "move through' se koriste da se nadju (ili odaberu) HTML elemen ts na bazi njihovog odnosa sa drugim elementima. Pocnes sa jednom selekcijom i pomeras se kroz tu selekciju dok ne dodjes do elemenata koje trazis. Sa traversi ng mozes lako da se pomeras kroz jquery family tree pocevsi od odabranog, current element, npr ides od
sto je ancestor do
sto je descendant i o nda do - sto je unuk
-a. Ako su na istom nivou tj da niko nije descendant il i child onda su siblings. JQuery omogucava razne vrste traversinf od kojih su najcesci tree traversing, naredni chapteri ce nam pokazati jos nacina. JQUERY ANCESTORS Su; parent, grandparent, great-grandparent itd, mozes traverse up the dom tree d a otkrijes ancestors od element. 3 korisna jQuery metoda sa traversing uz dom tree su parent(),parents(),parentsUntil().parent() metoda vraca direktni parent element iz odabranog elementa, ova metoda samo traverse jedan nivo u DOM tree.parents() met od vraca SVE ancestor elements of the selected element, sve do document's root elem ent ().parentsUntil() metod vraca sve ancestor elements IZMEDJU 2 data argumen ta. JQUERY DESCENDANTS moze biti child, grandchild, great-grandchild itd. mozes traverse niz dom tree d a otkrijes descendants od elementa. 2 korisna JQuery metoda da traverse down the D OM tree su children(), find().children() metod vraca sve direktne children od odabr anog elementa i traverse samo 1 nivo niz DOM tree. find() metod vraca descendant elem ente od odabranog elementa sve do zadnjeg descendanta. JQUERY SIBLINGS siblings imaju istog parent i mozes traverse sideways da otkrijes siblings eleme nta. ima mnogo korisnih jQuery nacina za traversing sideways u DOM tree:siblings(),ne xt(), nextAll(),nextUntil(),prev(),prevAll(),prevUntil().siblings() metod vraca sve siblings odabranog elementa.next() metod vraca next sibling element od odabranog elementa. nextAll() metod vraca sve next sibling elements od odabranog elementa. nextUntil() metod vraca sve next siblings izmedju dva data argumenta. prev(),pre vAll() i prevUntil() metode rade isto kao metode iznad ali sa reverse functionality: on i vracaju previous sibling elements. JQUERY FILTERING 3 najbazicnija filtering metode su first(),last(), i eq() sto ti omogucavaju da odaberes specifican element baziran na njegovoj poziciji u grupi elemenata. Drug
e filtering metode kao filter() i not() omogucavaju ti da odaberes odredjene eleme nte koji match ili do not match odredjene kriterijume.first() metod returns first el ement od odabranih elements. last() metod vraca last element od odabranih elements.eq( ) metod vraca element sa specificnim index number od odabranih elemenata. filter() metod ti omogucava da specify a criteria. elementi koji ne match the criteria su sklonjeni sa selekcije, i ti koji match su vraceni. not() metod vraca sve elemen te koji do not match the criteria ,not() metod je the OPPOSITE of filter(). JQUERY I AJAX: AJAX je razmena podataka sa serverom i update delove stranice bez reloading cele stranice. AJAX=Asynchronous JavaScript and XML, i radi se o loadi ng data u pozadini bez reloading cele stranice, aplikacije koje koriste ajax su: gm ail google maps, youtube, facebook. JQuery omogucava vise metoda za AJAX funkcionalnost, olaksava AJAX JQUERY tim na m je omogucio da sa jednom linijom koda za sve browsere koristimo AJAX. JQuery load() metod je jednostavan ali mocan AJAX method, on loaduje podatke sa servera i stavlja vracene podatke u odabrani element. $(selector).load(URL,data, callback); neophodni URL parametar specifikuje URL koji zelis da load. Opcioni data parametar specifikuje set od querystring key/value parova koji se trebaju poslati sa zahtevom. Opcioni callback parametar je ime funkcije koja se treba execute nakon sto je load() metod zavrsen. Callback moze imati razlicite paramet re: responseTxt-drzi sadrzaj ako je call uspesan, statusTxt-sadrzi status call-a, xh rsadrzi XMLHttpRequest objekat. JQuery GET vs POST: GET trazi data od specifikovanog resursa, Post predaje data da bude procesuirana u specified resourse. GET se jednostavno koristi da bi se dosl o do podataka sa servera i moze da vrati cached data.Post takodje moze da vraca po datke sa servera ali nikad cached, i cesto je koriscen da salje podatke zajedno sa req uest. $.get() metod trazi podatke od servera sa HTTP GET requestom $.get(URL,callback) ; neophodni URL parametar specifikuje URL koji zelis da request, opcioni callback parametar je ime funkcije koja se egzekutira ako je request uspesan. $.post() me tod trazi podatke sa servera koristeci HTTP POST request. $.post(URL,data,callback); neophodni URL parametar specifikuje URL koji zelis da request. Opcioni data para metar specifikuje podatke da se salju zajedno sa requestom, opcioni callback parametar je ime funkcije ako request succeeds. Ako zelis da koristis druge frameworks na stranici izuzev jQuery (npr druge fram eworks takodje koriste $ shortcut i ne zelis conflict) koristis noConflict() metod. noC onflict() metod odpusta hold na $ shortcut identifier, tako da ga druge skripte mogu koris
titi Ti mozes i dalje koristiti JQuery, ako napises puno ime umesto shortcut-a. Takod je mozes kreirati svoj shortcut veoma lako, noConflict() metod vraca referencu u JQ uery koju mozes sacuvati u varijabl za kasnije koriscenje. Ako imas blok jQuery koca koji koristi $ shortcut i ne zelis da ga promenis uopste, mozes proslediti $ znak kao parametar u ready method. Ovo ti omogucava da access jQuery koristeci $ unutar o ve funkcije-van te funkcije, moraces da koristis "jQuery":
Related Documents
More Documents from "aergh"