jQuery.pdf

Web programiranje i primjene

jQuery

29.3.2012. 1 Odjel za matematiku, Sveuilite J.J.

Strossmayera, Osijek

jQuery osnovna svojstva

jQuery - zbirka JavaScript funkcija

- funkcije iz jQuery-a olakavaju JavaScript programiranje

- funkcije iz jQuery-a pruaju nove mogudnosti u JavaScript

programiranju

osnovne mogunosti funkcija iz jQuery knjinice:

selekcija i upravljanje HTML elementima

upravljanje CSS-om

upravljenje dogaajima

JavaScript efekti i animacije



jQuery ukljuivanje u HTMl dokument

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

ukljuivanje u HTML dokument :

obavezno unutar zaglavlja HTML dokumenta



jQuery sintaksa

jQuery sintaksa u svojoj osnovi omoguduje odabir HTML elementa i vrenje odreene aktivnosti nad odabranim elementom

osnovna sintaksa: $(selektor).aktivnost()

$ - slui za otvaranje (definiranje) jQuery-a (selektor) slui za traenje HTML elementa aktivnost() jQuery naredba za aktivnost koja de se izvriti 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



jQuery (document).ready funkcija

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

jQuery selektori

jQuery selektori slue za upravljanje pojedinim HTML elementima ili grupom HTML

elemenata omoguduju odabir/dohvadanje HTML elemenata pomodu imena

elementa, atributa ili sadraja elementa

jQuery selektori prema imenu HTML elementa: $("p") slui za odabir svih elemenata $("p.intro") slui za odabir svih elemenata koji pripadaju klasi intro

(class=intro) $("p#demo") slui za odabir svih elemenata s atributom id="demo"



jQuery selektori

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

pridruena vrijednost # (tj. href=#) $("[href!='#']") slui za odabir svih HTML elemenata s atributom href ija je pridruena

vrijednost razliita od # $("[href$='.jpg']") slui za odabir svih HTML elemenata s href atributom ija vrijednost

sadri ekstenziju .jpg

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



jQuery dogaaji

event handling functions funkcije ije je izvravanje usko vezano uz realizaciju odreenog dogaaja

primjer:

$(document).ready(function(){

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

$("p").hide();

});

});



jQuery dogaaji

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

sve funkcije za upravljanje dogaajima definiraju se unutar (document).ready funkcije

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

funkcija click() je definirana tako da se izvri kada korisnik klikne miem 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, Sveuilite J.J. Strossmayera, Osijek

jQuery dogaaji

$(document).ready(function)

izvrava se tek kad je HTML dokument u potpunosti uitan u web preglednik

$(selector).click(function)

izvrava se klikom mia na odabrani HTML element

$(selector).dblclick(function)

izvrava se dvostrukim klikom mia na odabrani HTML element

$(selector).focus(function)

izvrava se kad je odabrani HTML element u fokusu (tj. aktivan)

$(selector).mouseover(function)

izvrava se prelaskom pokazivaa mia preko odabranog HTML elementa

primjer:

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 moe imati vrijednost "slow", "fast", "normal ili mu se

vrijednost moe preciznije definirati u milisekundama

callback parametar ime funkcije koja de biti izvrena nakon to se izvri funkcija hide() ili

show() o callback parametru de vie rijei 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, Sveuilite J.J. Strossmayera, Osijek

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



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



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 izbljeivanje do zadane prozirnosti



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



jQuery animacije callback funkcija

callback funkcija funkcija koja se poziva i izvrava kada je animacija u potpunosti zavrena

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

parametar callback ime funkcije koja se izvrava nakon zavretka 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



Literatura

W3Schools

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



jQuery.pdf

Documents