JQuery-osnovne stvari

7/23/2019 JQuery-osnovne stvari

http://slidepdf.com/reader/full/jquery-osnovne-stvari 1/30

jQuery

Hasan Bapić

748



jQuery je JavaScript biblioteka

jQuery uveliko pojednostavljuje JavaScript progra

jQuery je jednostavan za uenje



Svr!a jQuery"a jeste da pojednostavi kori#tenje JavaScript"a$ %rije uenja jQ

je poznavati osnove&

" H'()"a

- *SS"a

- JavaScript"a$



+ta je jQuery, jQuery je lagana-.pi#i manje- uradi vi#e.- JavaScript biblioteka$ jQuery uzim

koji u JavaScriptu za!tijevaju mnogo linija koda- i objedinjuje i! u metod

mogu pozvati jednom linijom koda$ %ored toga jQuery pojednostavljuje slo

stvari- kao #to su pozivanje 0J01"a i manipulacija nad 23("om$

jQuery podr/ava sljedeće&

• H'()23( manipulacije

• *SS manipulacija

• H'() metode za doga5aje

• 6ekte i animacije

• 0J01

•

orisne alate



jQuery je moguće ukljuiti na dva naina i to&

" da se preuzme sa stranice jQuery$com

" ukljuivanje jQuery"a preko *29 :*ontent 2elivery 9et;ork< kao #t

>!ead?

>script src@Ajuery"C$CC$D$min$jsA?>script?>!ead?

=oogle *29&>!ead?>script src@A!ttps&ajaE$googleapis$comajaElibsjueryC$CC$Djuery>!ead?

(icrosot *29&>!ead?>script src@A!ttp&ajaE$aspnetcdn$comajaEjQueryjuery"C$CC$D$min$j

>!ead?



jQuery sintaksa

jQuery sintaksa je zasnovana na tome da da se odaberu H'() eleme

se na nji! provedu neke akcije$

3snovna jQuery sintaksa je & $(selektor ).akcija ().

- znak $ služi za defnisanje/pristup jQuery-u

- (selektor) služi za odabir HTML elemenata

- akija() je ono !to treba da se pro"ede nad HTML elementom

Npr.

F:t!is<$!ide:< G sakriva se trenutne elemente$

F:ApA<$!ide:< G sakriva sve >p? elemente tj$ paragrae$

F:A$testA<$!ide:< G sakriva sve elemente ija je klasa class@AtestA$

F:AtestA<$!ide:< G sakriva sve elemnte iji je id

id@AtestA$



jQuery selektori

Selektori su jedni od najva/niji! dijelova jQuery biblioteke$ 3ni omogućav

manipulisanje

Sa H'() elementima$ oriste se za pronala/enje ili selektovanje elemenata

a-klase- tipa- atributa- vrijednosti atributa i td$ Bazirani su na postojećim *

postoje i posebni selektori$

Svi selektori poinju sa znakom dolara i otvorenom zagradom& F:<$

6lementarni selektori selektiraju elemente na snovu nji!oovg imena tj$ moguć

paragrae na stranici na sljedeći nain& F:.p.<$



>I23*'%6 !tml?>!tml?>!ead?>script src@A!ttps&ajaE$googleapis$comajaElibsjueryC$CC$Djuery$min$jsA?>s>script?F:document<$ready:unction:<K

F:AbuttonA<$click:unction:<K F:ApA<$!ide:<L M<LM<L>script?>!ead?>body?>!N?3vo je naslov>!N?>p?3vo je paragra$>p?>p?3vo je drugi paragra$>p?>button?likniI>button?>body?>!tml?



id selektori

F:document<$ready:unction:<K

F:AbuttonA<$click:unction:<K F:AtestA<$!ide:<L M<LM<L

$class selektori

F:document<$ready:unct

F:AbuttonA<$click:unct F:A$testA<$!ide:<L M<LM<L

F:APA< selektira sve elemente

F:t!is< selektira trenutne H'() elemente

F:Ap$introA< selektira sve paragrae sa klasom intro

F:Ap&rstA< selektira prvi paragra

F:Aul li&rstA< selektira prvi element prve liste

F:Aul li&rst"c!ildA< selektira prvi element svake liste

F:AR!reA< selektira sve elemente sa !re atributom

F:AaRtarget@TUblankTA< sel

se otvaraju u novom prozoru

F:AaRtargetI@TUblankT< sel

se ne otvaraju u novom proz

F:A&buttonA< selektira sve

elemente koji su tipa button

F:Atr&evenA< selektira sve j

elemente



jQuery doga5aji

Vazliiti za!tijevi korisnika na koje ;eb stranica mo/e da odgovori nazivaju se d

Svaki doga5aj je reprezentiran tanim trenutkom kada se ne#to treb

%rimjeri& pomjeranje mi#em preko elementa- odabir radio dugmeta ili klikom na

Miš Tastatura Forma Dokumrski do

click keypress submit load

dblclick keydo;n c!ange resize

mouseenter keyup ocus scroll

mouseleave blur unload

F:ApA<$click:<L F:ApA<$click:unction:<K ovdje se navodi akcija

M<L



>I23*'%6 !tml?>!tml?>!ead?>script src@A!ttps&ajaE$googleapis$comajaElibsjueryC$CC$Djuery$min$jsA>script?

F:document<$ready:unction:<K F:ApA<$click:unction:<K F:t!is<$!ide:<L M<LM<L>script?>!ead?>body?

>p?0ko kliknemo ovdje- ovaj paragra će nestati$ p?>p?0ko i ovdje kliknemo paragra će nestati>p?>p?liknimo i ovdjeI>p?>body?>!tml?

document).read() omogu!uje nam da iz"ršimo neku #unkciju nakon što



F:document<$ready:unction:<K F:ApCA<$mouseenter:unction:<K alert:.%resli ste preko pCIA<L M<L

M<L

F:document<$ready:unction:<K F:ApCA<$!over:unction:<K alert:W%re#li ste preko pCIA<L M-

unction:<K alert:W%ozdrav$3doste viIA<L M<LM<L

!over:< metoda kombinuje mouseenter:< i moF:document<$ready:unction:<K F:AinputA<$ocus:unction:<K F:t!is<$css:Abackground"colorA- AccccccA<L

M<L F:AinputA<$blur:unction:<K F:t!is<$css:Abackground"colorA- AXXXA<L M<LM<L

ocus:< metoda slu/i za okusiranje na odre5eni elementblur:< metoda slu/i da se smakne okus sa odre5enog elementa

kada kliknemo pored tog elementa

F:document<$ready:u F:ApA<$on:AclickA- u F:t!is<$!ide:<L M<LM<L

on:< metoda slu/ivi#e doga5aja sel



>I23*'%6 !tml?>!tml?>!ead?>scriptsrc@A!ttps&ajaE$googleapis$comajaElibsjueryC$CC$Djuery$min$jsA?>script?F:document<$ready:unction:<K F:ApA<$on:K mouseenter& unction:<K F:t!is<$css:Abackground"colorA- Alig!tgrayA<L M-

mouseleave& unction:<K F:t!is<$css:Abackground"colorA- Alig!tblueA<L M-

click& unction:<K F:t!is<$css:Abackground"colorA- Ayello;A<L M

M<LM<L>script?>!ead?>body?

>p?liknite ili pre5ite mi#em preko paragraa$>p?>body?



jQuery eekti

s!o;: < F:selektor <$s!o;:brzina#odzi" <L

!ide: < F:selektor <$!ide:brzina#odzi" <L

toggle: < F:selektor <$toggle:brzina#odzi" <L F:document<$ready F:AbuttonA<$click F:ApA<$toggle: M<L

M<L

F:document<$ready F:AbuttonA<$click

F:ApA<$!ide:CY M<LM<L

UUUUUUUUUUUUUUUUUUU

F:document<$ready F:A!ideA<$click F:ApA<$!ide:<L M<L

F:As!o;A<$click F:ApA<$s!o;:< M<LM<L

UUUUUUUUUUUUUUUUUUU



adeZn:< F:selektor <$adeZn:brzina# odzi" <L

ade3ut:< F:selektor <$ade3ut:brzina# odzi" <L

ade'oggle:< F:selektor <$ade'oggle:brzina# odzi" <L

ade'o:< F:selektor <$ade'o:brzina# nepro"idnost# odzi" <L

F:AbuttonA<$click:unction:<K F:AdivCA<$adeZn:<L F:AdivNA<$adeZn:Aslo;A<L

F:AdivDA<$adeZn:DYYY<LM<L

F:AbuttonA<$click:unction:<K F:AdivCA<$ade'o:Aslo;A- Y F:AdivNA<$ade'o:Aslo;A- Y

F:AdivDA<$ade'o:Aslo;A- YM<L



slide2o;n: < F:selektor <$slide2o;n:brzina# odzi" <L

slide\p: < F:selektor <$slide\p:brzina# odzi" <L

slide'oggle: < F:selektor <$slide'oggle:brzina# odzi" <L

F:document<$ready:unction:<K F:A]ipA<$click:unction:<K F:ApanelA<$slide2o;n:Aslo;A<L

M<LM<L

>style?panel- ]ip K padding& [pEL teEt"align& centerL background"color& e[

border& solid CpE cDcM

panel K padding& [YpEL display& noneLM>style?



animate : < F:selektor <$animate:K parametriM#brzina#odzi" <L

F:document<$ready:unction:<K F:AbuttonA<$click:unction:<K F:AdivA<$animate:Klet&TN[YpETM<L M<LM<L

F:document<$ready:unction:<K F:AbuttonA<$click:unction:<K F:AdivA<$animate:K let& TN[YpET- opacity& TY$[T- !eig!t& TC[YpET- ;idt!& TC[YpET M<L M<LM<L


F:AbuttonA<$click:unction:<K F:AdivA<$animate:K let& TN[YpET- !eig!t& T^@C[YpET- ;idt!& T^@C[YpET M<L M<LM<L

F:docum F:Abut F:Ad ! M<L M<LM<L

F:document<$ready:unction:<K oris F:AbuttonA<$click:unction:<K var div @ F:AdivA<L div$animate:K!eig!t& TDYYpET- opaci div$animate:K;idt!& TDYYpET- opacity div$animate:K!eig!t& TCYYpET- opaci div$animate:K;idt!& TCYYpET- opacity M<LM<L

unaprijed

relativne vrijednosti

vi#e osobina



stop: < F:selektor <$stop:stopll#%oTo&nd<L

F:document<$ready:unction:<K F:A]ipA<$click:unction:<K F:ApanelA<$slide2o;n:[YYY<L M<L F:AstopA<$click:unction:<K F:ApanelA<$stop:<L M<L

M<L

>style?panel- ]ip K padding& [pEL ont"size& C8pEL teEt"align& centerL background"color& [[ color& ;!iteL border& solid CpE ___ border"radius& DpELMpanel K padding& [YpEL display& noneLM>style?>!ead?



(etoda vezanja u Wlanac.

>I23*'%6 !tml?>!tml?>!ead?>scriptsrc@A!ttps&ajaE$googleapis$comajaElibsjueryC$CC$Djuery$min$jsA?>script?>script?F:document<$ready:unction:<K F:AbuttonA<$click:unction:<K F:ApCA<$css:AcolorA- AredA<$slide\p:NYYY<$slide2o;n:NYYY<L M<L

M<L>script?>!ead?>body?>p id@ApCA?jQuery je zabavanII>p?>button?likni me>button?>body?>!tml?



jQuery H'()

'ri jednostavne ali korisne- jQuery metode za 23( manipulaciju su&

teEt:< G postavlja ili vraća tekstualni sadr/aj selektirani! elemenata

!tml:< G postavlja ili vraća sadr/aj selektirani! elemenata :ukljuujući H'()

val:< G postavlja ili vraća vrijednosti od polja iz orme

F:document<$ready:unction:<K F:AbtnCA<$click:unction:<K alert:A'eEt& A ^ F:AtestA<$teEt:<<L M<L F:AbtnNA<$click:unction:<K alert:AH'()& A ^ F:AtestA<$!tml:<<L M<LM<L

F:document<$ready:unctio F:AbuttonA<$click:unction alert:A alue& A ^ F:At M<LM<L

=6'

tt :< ć ij d t t ib t



>I23*'%6 !tml?>!tml?>!ead?>script src@A!ttps&ajaE$googleapis$comajaElibsjueryC$CC$Djuery$min$jsA

>script?F:document<$ready:unction:<K F:AbuttonA<$click:unction:<K alert:F:A;DsA<$attr:A!reA<<L M<LM<L>script?>!ead?>body?>p?>a !re@A!ttp&;;;$;Dsc!ools$comA id@A;DsA?DSc!ools$com>a?>p>button?%rikazi vrijednost atributa !re>button?>body?>!tml?

attr:< G vraća vrijednost atributa



F:document<$ready:unction:<K F:AbtnCA<$click:unction:<K F:AtestCA<$teEt:AHello ;orldIA<L M<L F:AbtnNA<$click:unction:<K F:AtestNA<$!tml:A>b?Hello ;orldI>b?A<L M<L F:AbtnDA<$click:unction:<K F:AtestDA<$val:W9eki primjerA<L M<LM<L

S6'

F:document<$ready:unction:<K F:AbuttonA<$click:unction:<K F:A;DsA<$attr:A!reA- A!ttp&;;;$;Dsc!ools$comju M<LM<L

F:document<$ready:unction:< F:AbuttonA<$click:unction:<K F:A;DsA<$attr:A!reA- un

return orig`alue ^ AjM<L M<LM<L



022

%ostoji nekoliko metoda za dodavanje H'() elemenata a to su&

append:< G dodaje sadr/aj na kraj selektiranog elementa

prepend:< G dodaje sadr/aj na poetak selektiranog elementa

ater:< G dodaje sadr/aj poslije selektiranog elementa tj$ prelazi u novi red

beore:< G dodaje sadr/aj prije selektiranog elementa


F:AbtnCA<$click:unction:<K F:ApA<$append:A >b?'ekst koji se nastavlja na tekest paragraa> M<L

F:AbtnNA<$click:unction:<K F:AolA<$append:A>li?Stavka koja se nastavlja>li?A<L M<LM<L



>I23*'%6 !tml?>!tml?>!ead?>script src@A!ttps&ajaE$googleapis$comajaElibsjueryC$CC$Djuery$m>script?unction append'eEt:< K

var tEtC @ A>p?'eEt$>p?AL kreiranje teksta H'() var tEtN @ F:A>p?>p?A<$teEt:A'eEt$A<L kreiranje teksta jQuery"em var tEtD @ document$create6lement:ApA<L tEtD$innerH'() @ A'eEt$AL kreiranje teksta sa 23("om F:AbodyA<$append:tEtC- tEtN- tEtD<L dodavanje novi! elemenata nM>script?>!ead?>body?

>p?3vo je paragra$>p?>button onclick@Aappend'eEt:<A?2odaj'eEt>button?

>body?>!tml?



V6(3`6

a brisanje elemenata i sadr/aja koriste se dvije metode&

" remove: < bri#e selektirane elemente kao i nji!ove potomke

" empty: < bri#e potomke selektirani! elemenata

F

:document<$ready:unction:<K F:AbuttonA<$click:unction:<K F:AdivCA<$remove:<L M<LM<L


F:AbuttonA<$click:unction:<K F:AdivCA<$empty:<L M<LM<L



=6' i S6' *SS klase

\ jQuery"u postoji nekoliko metoda za upravljanje *SS"om a to su&

add*lass:< G dodaje jednu ili vi#e klasa u selektovani element

remove*lass:< G bri#e jednu ili vi#e klasa iz selektovani! elemenata

toggle*lass:< G mijenja izme5u dodavanjabrisanja klasa iz selektovani!

css:< G postavlja ili vraća style atribut

$important K ont";eig!t& boldL ont"size& EE"largeLM

$blue K color& blueLM

F:document<$ready:unction:<K F:AbuttonA<$click:unction:<K F:A!C- !N- pA<$add*lass:Ablue F:AdivA<$add*lass:AimportantA M<LM<L

css:ApropertynameA<L



>I23*'%6 !tml?>!tml?>!ead?

>script src@A!ttps&ajaE$googleapis$comajaElibsjueryC$CC$Djuery$m>script?F:document<$ready:unction:<K F:AbuttonA<$click:unction:<K alert:.Boja pozadine@ A ^ F:ApA<$css:Abackground"colorA<<L M<LM<L>script?

>!ead?>body?>!N?3vo je naslov>!N?>p style@Abackground"color&XYYYYA?3vo je paragra$>p?>p style@Abackground"color&YYXYYA? 3vo je paragra$>p?>p style@Abackground"color&YYYYXA? 3vo je paragra$>p?>button?`rati boju pozadine paragraa p>button?>body?

>!tml?

css: propertyname <Lcss:A propertynameA-A"alueA<Lcss:KA propertynameA&A"alueA-A propertynameA&A"alueA-$$$M



jQuery"2imenzije

%ostoji nekoliko metoda za dimenzioniranje kori#tenjem jQuery"a- a to su&

;idt!:<

!eig!t:<

inneridt!:<

innerHeig!t:<

outeridt!:<

outerHeig!t:<



>I23*'%6 !tml?>!tml?>!ead?>script src@A!ttps&ajaE$googleapis$comajaElibsjueryC$CC$Djuery$min>script?

F:document<$ready:unction:<K F:AbuttonA<$click:unction:<K var tEt @ AAL tEt ^@ A+irina div"a& A ^ F:AdivCA<$;idt!:< ^ A>br?AL tEt ^@ A`isina div"a& A ^ F:AdivCA<$!eig!t:< ^ A>br?AL tEt ^@ A\nutarnja #irina div"a& A ^ F:AdivCA<$inneridt!:< ^ A>br?AL tEt ^@ A\nutra#nja visina div"a& A ^ F:AdivCA<$innerHeig!t:<L F:AdivCA<$!tml:tEt<L

M<LM<L>script?>!ead?



>style?divC K !eig!t& CYYpEL ;idt!& DYYpELM padding& CYpEL margin& DpEL

border& CpE solid blueL background"color& lig!tblueL

>style?>body?>div id@AdivCA?>div?>br?>button?%rikaz dimenzija div"a>button?

>p?inneridt!:< " vraća #irinu elementa ukljuujući i padding$>p?>p?innerHeig!t:< " vraća visinu elementa ukljuujući i padding$>p?>body?>!tml?

JQuery-osnovne stvari

Documents

Transcript of JQuery-osnovne stvari