Korisnik:Luka Zivanovic/pesak

Korišćenje

Uključenje biblioteke

jQuery biblioteka je JavaScript dokument koji sadrži događaje, efekte i Ajax funkcije. Može se uključiti u veb stranicu linkovanjem na lokalnu kopiju, ili na jednu od mnogih kopija koje su dostupne na serverima.

Povezivanje sa lokalnom kopijom:

<script src="jquery.js"></script>

Povezivanje sa kopijom na serveru:

<script src="https://code.jquery.com/jquery-latest.min.js"></script>

Stilovi korišćenja

jQuery ima dva stila korišćenja:

• Pomoću $ funkcije, koja je fabrički metod jQuery objekata. Ove funkcije je moguće ulančavati, pošto sve vraćaju jQuery objekat.
• Pomoću$.-prefiksnih funkcija. One se ne odnose direktno na jQuery objekte.

Pristup i manipulacija više DOM čvorova u jQuery tipično počinje pozivom $ funkcije čiji je argument CSS selektor (kao niska). Ona vraća jQuery ovjekat koji referiše na sve odgovarajuće HTML elementa stranice. $("div.test"), na primer, vraća jQuery objekat sa svim div elementima klase test. Ovaj skup čvorova može biti manipulisan pozivajući metode na jQuery objekat ili na same čvorove.

Mod bez preklapanja

jQuery takođe sadrži .noConflict() mod, koji se oslobađa $. Ovo može biti korisno, ako se jQuery koristi sa drugim bibiliotekama koje takođe koriste $ kao identifikator. U ovom modu programeri mogu koristiti identifikator jQuery kao zamenu za $ bez gubljenja funkcionalnosti.

Tipičan skelet

Tipično korišćenje jQuery biblioteke je kreiranje događaja .ready(). Ova metoda će biti pokrenuta kada pretraživač konstruiše DOM stablo i pošalje load događaj.

<script type="text/javascript">
$(document).ready(function(){
        // jQuery kod, hvatanje dogadjaja...
});
</script>

Callback funkcije su takođe sadržane u .ready() kao anonimne funkcije, ali se pozivaju kada je pokrenut događaj za callback. Na primer, sledeći kod dodaje događaj za klik mišem na img element.

$(document).ready(function(){
        $('img').click ( function() {
              // obrađuje klik događaj na bilo koji img element na stranici
        });
});

Sledeće sintakse su ekvivalentne:

• $(document).ready(handler)
• $(handler)

Ulančavanje

Svaka jQuery komanda vraća jQuery objekat, tako da se one mogu ulančavati.

$("div.test").add("p.naslov").addClass("plavi").slideDown("slow");

Ovaj niz polja predstavlja uniju svih div tagova sa klasnim atributom test i sve tagove p sa klasnim atributom naslov, dodaje klasni atribut plavi na svaki odgovarajući element, i animira njihovo pojavljivanje na ekran.

Kreiranje novih DOM elemenata

Osim pristupa postojećim DOM čvorovima, pomoću jQuery je moguće i kreiranje novih DOM elemenata, ako niska prosleđena kao argument $() izgleda kao HTML. Na primer, sledeći kod pronalazi HTML element select sa ID-em marke i dodaje element option sa vrednošću "VAG" i tekstom "Volkswagen":

$('select#marke').append($('<option />').attr({value:"VAG"}).append("Volkswagen"));

Utilitarne funkcije

Funkcije koje imaju prefiks $. su utilitarne funkcije ili funkcije koje utiču na globalna svojstva i ponašanja. Na primer, sledeći kod predstavlja funkciju koja prolazi kroz niz test:

$.test([1,2,3], function() {
  console.log(this + 1);
});

Funkcija ispisuje "2", "3", "4" na konzolu.

Ajax

Moguće je obaviti upite nezavisno od pregledača i potom učitati i manipulisati sa udaljenim podacima.

$.ajax({
  type: "POST",
  url: "test.php",
  data: "name=Pera&location=Beograd"
}).done(function(msg) {
  alert("Podaci su sačuvani: " + msg);
}).fail(function(xmlHttpRequest, statusText, errorThrown) {
  alert(
    "Vaš zahtev nije uspešno izvršen.\n\n"
      + "XML Http Zahtev: " + JSON.stringify(xmlHttpRequest)
      + ",\nStatus: " + statusText
      + ",\nGreška: " + errorThrown);
});

Ovaj primer šalje podatke name=Pera i location=Beograd stranici test.php. Kada se zahtev uspešno završi, korisniku se pojavljuje prozor sa odgovarajućom porukom (alert). U suprotnom, korisniku će biti prosleđeni poruka da je došlo do greške, kao i status zahteva i tačna greška.