Web programiranje i primjene

jQuery

29.3.2012. 1 Odjel za matematiku, Sveučilište J.J.

Strossmayera, Osijek

jQuery – osnovna svojstva

• jQuery - zbirka JavaScript funkcija

- funkcije iz jQuery-a olakšavaju JavaScript programiranje

- funkcije iz jQuery-a pružaju nove mogudnosti u JavaScript

programiranju

• osnovne mogućnosti funkcija iz jQuery knjižnice:

– selekcija i upravljanje HTML elementima

– upravljanje CSS-om

– upravljenje događajima

– JavaScript efekti i animacije

29.3.2012. 2 Odjel za matematiku, Sveučilište J.J.

Strossmayera, Osijek

jQuery – uključivanje u HTMl dokument

• jquery.js - jQuery zbirka JavaScript funkcija je samostalan JavaScript dokument

• uključivanje u HTML dokument :

– obavezno unutar zaglavlja HTML dokumenta

29.3.2012. 3 Odjel za matematiku, Sveučilište J.J.

Strossmayera, Osijek

jQuery – sintaksa

• jQuery sintaksa – u svojoj osnovi omoguduje odabir HTML elementa i vršenje određene aktivnosti nad odabranim elementom

• osnovna sintaksa: $(selektor).aktivnost()

– $ - služi za otvaranje (definiranje) jQuery-a – (selektor) – služi za traženje HTML elementa – aktivnost() – jQuery naredba za aktivnost koja de se izvršiti nad

odabranim HTML elementom

• primjeri: $(this).hide() – skriva HTML element $("p").hide() – skriva sve paragrafe u HTML dokumentu $("p.test").hide() – skriva sve paragrafe koji pripadaju klasi “test” $("#test").hide() – skriva sve elemente s atributom id="test“

http://www.w3schools.com/jquery/jquery_syntax.asp

29.3.2012. 4 Odjel za matematiku, Sveučilište J.J.

Strossmayera, Osijek

http://www.w3schools.com/jquery/jquery_syntax.asp

jQuery – (document).ready funkcija

• sve jQuery funkcije iz predhodnih primjera nalaze se unutar (document).ready funkcije:

jQuery – selektori

• jQuery selektori – služe za upravljanje pojedinim HTML elementima ili grupom HTML

elemenata – omoguduju odabir/dohvadanje HTML elemenata pomodu imena

elementa, atributa ili sadržaja elementa

• jQuery selektori prema imenu HTML elementa: – $("p") služi za odabir svih

elemenata – $("p.intro") služi za odabir svih

elemenata koji pripadaju klasi “intro”

(class=“intro“) – $("p#demo") služi za odabir svih

elemenata s atributom id="demo"

29.3.2012. 6 Odjel za matematiku, Sveučilište J.J.

Strossmayera, Osijek

jQuery – selektori

• jQuery selektori prema atributu HTML elementa: – $("[href]") služi za odabir svih HTML elemenata s href atributom – $("[href='#']") služi za odabir svih HTML elemenata s href atributiom kojemu je

pridružena vrijednost “#” (tj. href=“#”) – $("[href!='#']") služi za odabir svih HTML elemenata s atributom href čija je pridružena

vrijednost različita od “#” – $("[href$='.jpg']") služi za odabir svih HTML elemenata s href atributom čija vrijednost

sadrži ekstenziju “.jpg”

• primjer: http://www.w3schools.com/jquery/jquery_selectors.asp

29.3.2012. 7 Odjel za matematiku, Sveučilište J.J.

Strossmayera, Osijek

http://www.w3schools.com/jquery/jquery_selectors.asp

jQuery – događaji

• “event handling functions” – funkcije čije je izvršavanje usko vezano uz realizaciju određenog događaja

• primjer:

$(document).ready(function(){

$("button").click(function(){

$("p").hide();

});

});

29.3.2012. 8 Odjel za matematiku, Sveučilište J.J.

Strossmayera, Osijek

jQuery – događaji

• $(document).ready(function() {...neki kod...} )

– sve funkcije za upravljanje događajima definiraju se unutar (document).ready funkcije

• $("button").click(function() {...neki kod... } )

– funkcija “click()” je definirana tako da se izvrši kada korisnik “klikne” mišem na gumb

• $("p").hide();

– kod unutar “click” funkcije skriva sve paragrafe u HTML dokumentu

• primjer: http://www.w3schools.com/jquery/jquery_events.asp

• samostalni jQuery dokument:

29.3.2012. 9

Odjel za matematiku, Sveučilište J.J. Strossmayera, Osijek

http://www.w3schools.com/jquery/jquery_events.asp

jQuery – događaji

• $(document).ready(function)

– izvršava se tek kad je HTML dokument u potpunosti učitan u web preglednik

• $(selector).click(function)

– izvršava se klikom miša na odabrani HTML element

• $(selector).dblclick(function)

– izvršava se dvostrukim klikom miša na odabrani HTML element

• $(selector).focus(function)

– izvršava se kad je odabrani HTML element u fokusu (tj. aktivan)

• $(selector).mouseover(function)

– izvršava se prelaskom pokazivača miša preko odabranog HTML elementa

• primjer:

http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide_p

29.3.2012. 10 Odjel za matematiku, Sveučilište J.J.

Strossmayera, Osijek

http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide_p

jQuery – efekti hide(), show()

• hide() i show() imaju dva neobavezna parametra – speed i callback $(selector).hide(speed,callback) $(selector).show(speed,callback) • speed parametar – može imati vrijednost "slow", "fast", "normal“ ili mu se

vrijednost može preciznije definirati u milisekundama

• callback parametar – ime funkcije koja de biti izvršena nakon što se izvrši funkcija hide() ili

show() – o callback parametru de više riječi biti kod jQuery animacija

• primjeri: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide_show http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide_slow 29.3.2012. 11

Odjel za matematiku, Sveučilište J.J. Strossmayera, Osijek

http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide_showhttp://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide_slow

jQuery – efekti toggle()

• toggle()

– objedinjuje djelovanje funkcija hide() i show()

– skriva vidljive elemente i prikazuje skrivene elemente

• sintaksa: $(selector).toggle(speed,callback)

• primjer:

http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_toggle

29.3.2012. 12 Odjel za matematiku, Sveučilište J.J.

Strossmayera, Osijek

http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_toggle

jQuery – efekti slide funkcije: slideDown(), slideUp(), slideToggle()

• sintaksa i primjeri

– $(selector).slideDown(speed,callback)

http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_slide_down

– $(selector).slideUp(speed,callback)

http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_slide_up

– $(selector).slideToggle(speed,callback)

http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_slide_toggle

29.3.2012. 13 Odjel za matematiku, Sveučilište J.J.

Strossmayera, Osijek

http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_slide_downhttp://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_slide_uphttp://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_slide_toggle

jQuery – efekti fade funkcije: fadeIn(), fadeOut(), fadeTo()

• sintaksa i primjeri

– $(selector).fadeIn(speed,callback)

– $(selector).fadeOut(speed,callback)

http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_fadeout_slow

– $(selector).fadeto(speed,opacity,callback)

http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_fadeto

parametar “opacity” – omoguduje izbljeđivanje do zadane prozirnosti

29.3.2012. 14 Odjel za matematiku, Sveučilište J.J.

Strossmayera, Osijek

http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_fadeout_slowhttp://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_fadeout_slowhttp://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_fadeout_slowhttp://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_fadeout_slowhttp://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_fadeout_slowhttp://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_fadeout_slowhttp://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_fadeout_slowhttp://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_fadeout_slowhttp://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_fadeout_slowhttp://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_fadeout_slowhttp://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_fadeout_slowhttp://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_fadetohttp://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_fadetohttp://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_fadetohttp://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_fadetohttp://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_fadetohttp://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_fadetohttp://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_fadetohttp://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_fadetohttp://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_fadetohttp://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_fadetohttp://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_fadeto

jQuery – animacije

• sintaksa za funkciju kojom definiramo jQuery animacije:

$(selector).animate(

{params},[duration]

)

• parametar {params} – lista svojstava HTML elementa koja de sudjelovati u animaciji (tj. biti animirana)

• parametar [duration]

– definira vrijeme trajanja animacije

– prima vrijednosti “fast", "slow", "normal“ ili mu je vrijednost precizno definirana u milisekindama

• primjeri:

http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_animation

http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_animation2

29.3.2012. 15 Odjel za matematiku, Sveučilište J.J.

Strossmayera, Osijek

http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_animationhttp://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_animationhttp://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_animationhttp://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_animationhttp://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_animationhttp://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_animationhttp://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_animationhttp://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_animationhttp://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_animationhttp://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_animationhttp://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_animationhttp://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_animation2http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_animation2http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_animation2http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_animation2http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_animation2http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_animation2http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_animation2http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_animation2http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_animation2http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_animation2http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_animation2http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_animation2

jQuery – animacije callback funkcija

• callback funkcija – funkcija koja se poziva i izvršava kada je animacija u potpunosti završena

• primjer sintakse: $(selector).hide(speed,callback)

• parametar callback – ime funkcije koja se izvršava nakon završetka animacije

• primjeri:

– animacija bez upotrebe callback funkcije: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide_slow_wrong

– animacija s upotrebom callback funkcije: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide_slow_right

29.3.2012. 16 Odjel za matematiku, Sveučilište J.J.

Strossmayera, Osijek

http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide_slow_wronghttp://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide_slow_right

Literatura

W3Schools

http://www.w3schools.com/jquery/default.asp

29.3.2012. 17 Odjel za matematiku, Sveučilište J.J.

Strossmayera, Osijek

http://www.w3schools.com/jquery/default.asp