naslovna
programiranje
HTML
CSS
PHP
MySQL
jQuery
Osnove
jQuery HTML

jQuery je open source JavaScript biblioteka.

 

Koriste ju dizajneri da bi si olakšali posao oko dizajniranja interaktivne web stranice.

jQuery omogućava manipulaciju HTML-om, animacijom, AJAX-om i slično. Radi u svim modernim browserima kao što su Chrome, Mozilla, Internet explorer...

 

jQuery je DOM Document Object Model) manipulacijska biblioteka.

 

DOM je stablični prikaz strukture koji sadrži sve elemente web stranice, te jQuery pojednostavljuje sintaksu za traženje, odabir i manipulaciju tim DOM elementima.

Na primjer, jQuery se može koristiti za pronalaženje elementa unutar dokumenta sa određenim svojstvom (npr. svi elementi s h1 oznakom), mijenjanje jednog ili više atributa (npr. boja, vidljivost), ili napraviti da reagira na događaj (npr. na klik mišem).

 

 

Prednosti jQuery-ja:

 

  • Jednostavnost korištenja - to je glavna prednost jQuery biblioteka, puno je jednostavnija za korištenje u odnosu na JavaScript i druge JavaScript biblioteke. U odnosu na ostale biblioteke osim jednostavne sintakse, ona također zahtjeva puno manje linija koda kako bi se postigla ista značajka.
  • Ogromna biblioteka - jQuery pruža veoma više funkcija u odnosu na ostale JavaScript biblioteke.
  • Jaka "opensource" zajednica - jQuery ima podršku koja posvećuje svoje vrijeme za razvoj i poboljšavanje jQuery biblioteka. Tako postoje stotine već napisanih dodataka (eng. plugins) dostupnih za preuzimanje, kako bi se ubrzao proces razvoja.
  • Još jedna prednost ovoga je učinkovitost i sigurnost skripte.
  •  Velika dokumentacija i tutorijali - jQuery web stranice imaju sveobuhvatne dokumentacije i tutorijale, kako bi se i početnicima olakšao rad sa bibliotekama.
  • Ajax podrška - jQuery omogućava razvoj Ajax obrasca, Ajax omogućuje sučelje gdje se mogu obaviti radnje na stranicama, bez potrebe da se cijelu stranicu ponovo učita

 

 

Nedostaci jQuery-ja:

 

  • Funkcionalnost je možda ograničena - dok jQuery ima impresivnu biblioteku u smislu količine, ovisno o tome koliko je potrebno prilagoditi web stranicu, funkcionalnost je možda ograničena stoga je ponekad neizbježno korištenje samog JavaScripta.
  • jQuery potreba za JavaScript datotekom - jQuery JavaScript datoteka potrebna je za pokretanje jQuery naredba. Iako je veličina takve datoteke relativno mala (25-100KB ovisno o poslužitelju), još uvijek opterećuje klijentsko računalo i čak možda web poslužitelja ako se pohranjuju jQuery skripte na web poslužitelju. 

 

 

jQuery se može dodati na web stranice na dva načina:

 

  • preuzimanjem jQuery biblioteke sa stranice jQuery.com
  • uključivanje jQuery od strane CDN23, npr. Google

 

 

Krajem 2014. godine izašla je stabilna verzija jQuery Mobile.

jQuery Mobile je JavaScript biblioteka koju je izradio tim iz jQuerya te se njegov razvoj temelji na razvoju okvira koji je kompatibilan sa raznim tablet računalima i pametnim telefonima. Pomoću jQuery Mobile-a možemo napraviti mobilne aplikacije, na način da se koristi HTML5 i CSS3.

U jQuery sintaksi odaberemo HTML elemente i onda izvršavamo neke akcije nad njima.

 

Osnovna sintaksa je $ (selector).action() gdje:

  • $ označava da je to jQuery
  • (selector) koristimo za pronalaženje i odabir željenih HTML elemenata
  • .action() je akcija koja će se izvršiti nad odabranim elementima jQuery selektori nam omogućavaju da odaberemo i manipuliramo HTML elementima.

 

Svaki jQuery selektor započinje sa znakom $ i zagradama, odnosno $().

 

Elemente možemo selektirati, tj. odabrati pomoću oznake elementa, id elementa, klase elementa, te razne druge načine.

 

 

Na primjer za odabrati element s id=“test“ napišemo $(“#test“).

 

Događaji koji aktiviraju funkciju ili akciju povezani su sa događajima miša, tipkovnice, forme ili dokumenta, odnosno prozora.

 

jQuery nudi dizajnerima i programerima da brže i bolje naprave interaktivne web stranice, zbog toga što ne moraju ispočetka pisati svoj vlastiti kod, već iskoriste mogućnosti koje im jQuery pruža.

 

Naprimjer, ako želimo napraviti događaj koji se aktivira kada se klikne na paragraf napišemo $ ("p").click();

 

 

Popis događaja:

 

Popis događaja koji se mogu koristiti
Miš Tipkovnica Forma Dokument/prozor
Click keypress Submit load
Dblclick keydown Change resize
Mouseenter keyup Focus scroll
Mouseleave   Blur unload

 

 

 

 

 

 

 

 

 

jQuery nudi višestruk izbor efekata koje možemo primijeniti nad elementima kao što su:

  • jQuery Hide/Show
  • jQuery Fade
  • jQuery Slide
  • jQuery Animate
  • jQuery stop()
  • jQuery Callback
  • jQuery Chaining

 

 

Također pomoću jQuery-ja možemo čitati, postaviti ili dodati atribute HTML elementima.

jQuery nam nudi mogućnost da mijenjamo css svojstva nekog elementa. 

 

Naprimjer, ako želimo svim paragrafima u dokumentu promijeniti boju u plavo napišemo $("p").css("color", "blue");