Šta je i zašto koristiti jQuery?

jQuery

 

jQUery predstavlja najpopularniju Java Script biblioteku. Ako me pitate sta je jQuery konkretno, to je jedan veliki JavaScript dokument koji ucitavate na vasu web stranu na kojoj zelite da koristite jQuery sintaksu. Drugacije postavljeno, jQuery je slup vec napisanih Java Script rutina (malih programa) koji vam omogucavaju da brze pisete JavaScript kod. Njegova najveca prednost sa funkcionalne strane je da je potpuno cross-browser kompatibilan, tj. jednako ga ispravno tumace i Internet Explorer i Mozzilla kao i Chrome pa je bojazan od gresaka znacajno umanjen.

 

Kako jQuery postavljate na web stranu?

 

  1. Odete na jquery.com izaberete Download sekciju ili dugme na strani (ako postoji)
  2. Nakon toga izaberete trenutno aktuelnu produkcionu verziju (u momentu pisanja to je 1.11.1) Ukoliko ste sigurni da vas kod nece biti ucitan u IE 6,7 ili 8, slobodno skinite aktuelnu verziju 2.x
  3. Nakon sto kliknete na neku od verzija, otvorice vam se minifikov jQuery kod u vidu ispisane web strane. Njen sadrzaj iskopirajte i snimite pod nekim imenom (najbolje pod imenom ponudjenim u address baru pretrazivaca, jquery-1.11.1.min.js

6-java-script-jquery-u-prozoru-pretrazivaca

 

  1. Sledece sto treba da uradite je da u okviru vaseg html fajla u kome cete ga koristiti, postavite sledeci kod (najbolje pri dnu, pred zatvaranje body taga:

<script src=” jquery-1.11.1.min.js”></script>

  1. Nakon ovoga mozete da koristite komande i sintaksu jQuery JavaScript-a

 

 

Drugi nacin koji se sve vise koristi je da jQuery kod skinete se CDN-a, tj. distribuirane mreze servera po svetu. Najlaksi i najsigurniji nacin je koriscenjem Google usluge. Prednosti ovoga su : veca brzina, veci bandwidth i mogucnost da pretrazujuci vise strana, jQury kod ucitate samo jednom a kasnije koristite kesiranu verziju pri pregledu drugih strana sajta ili drugih web sajtova.

 

Ovo radite tako sto umesto da download-ujete file kod sebe i pozovete ga sintaksom

<script src=” jquery-1.11.1.min.js”></script>

 

odete na google adresu: https://developers.google.com/speed/libraries/devguide i odatle iskopirate kod

za biblioteku koja vas zanima. U nasem slucaju:

 

<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>

 

 

 

Zasto treba koristiti jQuery?

 

Postoji nekoliko razloga zbog cega je “lakse” koristiti jQuery od genericki napisanog Java Scripta. U vecini slucajeva kod je kraci. Pogledajmo primer:

Da bi Java Script sintaksom pristupili nekom elementu sa ID-jem moj_div i pridruzili mu odredjenu CSS klasu, kreiracemo sledeci izraz:

document.getElementById(‘moj_div’).className=’neka_klasa’;

Isto ovo u jQuery sintaksi postizemo izrazom:

jQuery(‘#moj_div’).addClass(‘neka_klasa’);

 

Ono sto je jednostavnije u jQuery sintaksi je sto se elementima pristupa slicno kao pri definisanju CSS selektora, na primer:

jQuery(‘p.opis’) – pristupicem osvim p elementima klase opis na stranici

ili

jQuery(‘.opis’) – pristupicemo svim elementima klase opis na stranici

ili

jQuery(‘li’) – pristupicemo svim li elementima na stranici

 

Ako primecujete, u jQuery sintaksi sve sto treba da navedete je:

. za klasu

# za ID ili

p.opis za ime taga

 

umesto da u Java Script sintaksi kucate:

 

document.getElementByClass(‘neka_klasa’);

document.getElementById(‘neki_id’);

 

 

Ono sto je zaista dobro u jQuery sintaksi je da mozete kombinovati mnoge selektore iz CSS-a, ukljucujuci i pseudo selektore. Na primer:

jQuery(‘li:last’) izabrace poslednji element na strani

jQuery(“p:contains(‘paketi)”) izabrace p elemente koji u svom sadrzaju imaju rec paketi (contains je sluzbena rec jQuery-ja)

Ove stvari, narocito poslednju je mnogo teze, ili sa mnogo vise koda postici koriscenjem uobicajene Java Script sintakse.

 

NAPOMENA: Cesto cete, na pocetku jQuery izraza umesto reci jQuery videti dolarski znak $. jQuery(‘p’).addClass(‘neka_klasa’); moze da se zapise i kao $(‘p’).addClass(‘neka_klasa’);

 

Jos jedan od predosti koriscenja jQuery-ja su njegove ugradjene akcije kao na primer hide. Ukoliko zelite da uklonite neki element, na primer sadrzaj p taga, napisacete:

$(‘p’).hide(3000);

Ovo govori da se sakrije sadrzaj p elemenata u roku od 3 sekunde. Takve stvari je moguce postici u JavaScriptu sa mnogo vise koda.

Jos jedan primer akcije bio bi fadeOut. Time element izbledi u nekom vremenskom periodu. To sa Java Script-om moze da se postigne ali na mnogo tezi nacin.

 

Kako bi videli kako izmena nekih stvari funkcionise u kombinaciji sa dogadjajima koriscenjem jQuery, uzecemo primer promene sadrzaja elementa na stranici ukoliko korisnik klikne na njega.

<p>Pocetni tekst</p>

 

$(‘p’).click(function(){

$(‘p’).text(‘Ovo je izmenjeni tekst’);

});

 

Klikom na paragraf, tekst se automatski zamenjuje tekstom “Ovo je izmenjeni tekst”.

 

Postoji jedna zanimljiva stvar kod ovog izraza. Ukoliko kod napisemo koriscenjem sluzbene reci this umesto p

 

$(‘p’).click(function(){

$(this).text(‘Ovo je izmenjeni tekst’);

});

 

jQuery ce tacno znati da treba da izmeni tekst na paragrafu na koji je korisnik kliknuo. Sledeci primer bi bio koriscenje efekta u istom primeru:

 

$(‘p’).click(function(){

$(this).fadeOut(2000);

});

 

Ako kliknemo na bilo koji paragraf, samo taj paragraf ce nestati u roku od 2 sekunde.

 

Pandam komandi window.onload u jQury sintaksi je:

 

$(document).ready(function(){

//neki jQuery kod

});

 

Za razliku od window.onload komande, $(document).ready(function(){ //neki kod }); se moze kreirati vise puta na strani i sav kod ce biti izvrsen.

MODERNIZR

 

Modernizr je Java Script biblioteka koja ispituje postojanje podrske za odredjene elemente HTML verzije 5 i CSS verzije 3 i u skladu sa podrskom u tom pretrazivacu izvrsava neki JavaScript kod. Da bi je koristili, kao i u slucaju jQuery-ja, potrebno je povezati je sa postojecim dokumentom web strane.

  1. Odete na http://modernizr.com/download
  2. Kliknete na development verziju
  3. Na sledecoj strani ostavite sve od ponudjenog i kliknete Generate
  4. Na istoj strani ispod dugmeta na koje ste kliknuli, bice generisan fajl koji treba da postavite na vasem sajtu, tj. u okviru head sekcije HTML dokumenta na kome cete je koristiti

 

Ova biblioteka ustvari kreira objekat Modernizr cija svojstva mozemo da koristimo.

Dacemo jedan primer koriscenja na web strani unutar JS koda.

Zelimo da ispitamo da li pretrazivac u kome prezentujemo web stranu podrzava VIDEO tag (novi tag u verziji HTML5) i u skladu sa tim da li podrzava ili ne, izvrsimo odgovarajuci kod. To cemo napisati kao:

 

if (Modernizr.video){

//izvrsi kod koji se oslanja na postojanje video taga

}else{

//izvrsi kod koji se NE oslanja na postojanje video taga

}

Preporučite ovaj članak:
Email this to someoneShare on Google+Share on FacebookShare on LinkedIn