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