jQuery Bukvar

 

jQuery API

Ono što jQuery izdvaja od drugih biblioteka su njegove veoma proste za korišćenje ali pri tom veoma moćne metode. jQuery metode su podeljene u više namenskih grupa i sveukupno čine njegov API.

• jQuery jezgro
• Selektori
• Atributi
• Kretanje kroz DOM
• Manipulacija
• CSS
• Događaji (Events)
• Efekti
• AJAX
• Alatke za posebne namene (Utilities)

 

jQuery jezgro

jQuery-jevo jezgro predstavlja njegov glavni jQuery objekat o kojem smo već pričali. On služi sa hvatanje elemenata iz DOM-a pomoću selektora. Može da se koristi na dva načina:

// preko jQuery imena
jQuery();

// ili preko spominjanog dolar znaka
$();

Svejedno je koji ćete pristup koristiti ali praksa pokazuje da je standardno da se koristi dolar znak zbog lakšeg raspoznavanja u kodu.

Medjutim ponekad je potrebno da na stranici imate još neku bibilioteku osim jQuery-ja. Pošto većina drugih biblioteka takodje koristi dolar znak kao svoj glavni objekat ovo bi moglo da predstavlja problem jer bi došlo do konflikta izmedju dve biblioteke.
Tu na scenu stupa jQuery-jeva .noConflict() metoda, koja omogućava nesmetano korišćenje jQuery-ja sa bilo kojim drugim bibliotekama koje koriste dolar objekat. Pošto iz gore priloženog vidimo da jQuery može da se poziva na dva načina, ova metoda isključuje njegovo korišćenje dolar znaka. Drugim rečima, nakon upotrebe ove funkcije jQuery ćete pozivati preko njegovog imena dok će dolar biti rezervisan za druge biblioteke.

Sve što je potrebno da uradite je da nadovežete .noConflict() meotodu na dolar pre bilo kakvog korišćenja od strane drugih biblioteka.

$.noConflict();
// posle ovoga možete da koristite dolar za druge biblioteke

 

 

Selektori

Browser-i svaku HTML stranicu učitavaju u memoriju kao skup medjusobno povezanih objekata sa odredjenim svojstvima. To se naziva DOM (Document Object Model). Svaka operacija u JavaScript-u počinje odabirom željenih elemenata sa kojima se želi raditi. Dakle, pristup objektu je osnova bilo kakve operacije nad njim.

Kao što smo spomenuli, jQuery koristi svoj dolar objekat za prosledjivanje HTML elemenata, na kojima onda izvršava svoje funkcije. To se vrši pomoću selektora. Podržavanjem svih CSS 1-3 selektora, kao i dodavanjem svojih, jQuery nudi veoma moćan skup alata za "hvatanje" elemenata u dokumentu.

Podjimo od osnovnih elemenata. Sve što je potrebno da uradite da bi ste ugrabili odredjeni element (ili više njih), je da upišete njegovo ime izmedju navodnika unutar dolar $() funkcije onako kako bi ste to uradili u CSS dokumentu:

// hvatanje elemenata sa id-om
$("#test");

// hvatanje elemenata sa imenom class-e
$(".naslov");

// hvatanje tipova elemenata
$("div");
$("img");

// hvatanje kompleksnijih elemenata
$("div.container ul li.over a");

// hvatanje više elemenata odjednom
$("selektor1, selektor2, selektor3, ...");

/* hvatanje elemenata sa odredjenim atributima
(morate paziti da ukoliko selektore stavljate izmedju dvostrukih
navodnika vrednost atributa obavijete jednostrukim, i obrnuto) */
$("form[name='ime']");

// hvatanje svih elemenata u dokumentu
$("*");

Dakle bilo koji CSS selektor da upotrebite, jQuery će pronaći i selektovati traženi element. Pored standardnih CSS selektora, jQuery je dodao i svoje selektore radi još lakšeg rada sa elementima:

 

:checked

Selektuje sve zadate elemente koji su čekirani (takvi elementi mogu biti: checkbox i radio button)

$("input[type="checkbox"]:checked");

Navedeni primer će selektovati svaki prvi <input> element koji je checkbox, koji je pri tom čekiran

 

:contains()

Selektuje sve zadate elemente koji sadrže traženi tekst

$("div:contains('John')");

Navedeni primer će selektovati svaki <div> element koji u sebi ili bilo gde u elementima koje sadrži tekst John

:empty

Selektuje sve zadate elemente koji nemaju nikakve elemente u sebi, uključujući i tekst

$("div:empty");

Navedeni primer će selektovati sve <div> elemente koji u sebi ne sadrže elemente ili tekst

 

:has()

Selektuje element koji u sebi sadrži makar jedan zadati element

$("div:has(p)");

Navedeni primer će selektovati sve <div> elemente koji imaju <p> element u sebi ili u bilo kojim elementima koje sadrže, ne samo kao child element

 

:not()

Selektuje elemente koji ne odgovaraju zadatom selektoru

$("div:not(.mojaklasa)");

Navedeni primer će selektovati sve <div> elemente koji nemaju klasu .mojaklasa

 

:first-child

Selektuje elemente koji su prvi child njihovog parent-a

$("div span:first-child");

Navedeni primer će selektovati svaki prvi <span> element unutar svakog <div> elementa

 

:eq()

Selektuje zadati element po redosledu po kojem se pojavljuje (indeksi počinju od 0)

$("td:eq(2)");

Navedeni primer će selektovati treći <td> element unutar neke tabele

 

:nth-child()

Selektuje element ili elemente koji se pretražuju po zadatom redosledu unutar parent-a. Indeks za pretragu može biti broj ili opcije even i odd, tj. svi parni ili neparni elementi po svom redosledu

Napomena: ovo je jedini slučaj u kojem indeksiranje ne počinje od 0 već od 1

$("div:nth-child(3)");
$("div:nth-child(even)");

Prvi primer će selektovati sve child elemente koji se pojavljuju na trećem mestu po redosledu unutar svih <div> elemenata, dok će drugi selektovati sve parne child elemente unutar svih <div> elemenata

 

Moguće je i kombinovanje svih navedenih selektora. Primer:

$("div.opis:has(p:not(.uvod))");

U datom primeru biće selektovani svi <div> elementi sa klasom .opis, koji u sebi sadrže <p> elemente koji nemaju klasu .uvod

 

 

Atributi

jQuery ima svoje metode za rad sa DOM atributima elemenata. Veoma su proste i ima ih svega par.

 

.addClass()

Dodaje klasu ili set klasa elementima

$('p').addClass('myClass yourClass');

 

.hasClass()

Proverava da li elementi imaju odgovarajuću klasu

$('#mydiv').hasClass('foo');

 

.toggleClass()

Briše ili dodaje klase iz elemenata u zavisnosti da li elementi imaju ili nemaju zadatu klasu. Ukoliko element ima zadatu klasu ona mu se briše i obrnuto.

$('p').toggleClass('myClass');

 

.removeClass()

Briše odredjenu klasu, više klasa ili sve klase iz elemenata

// brisanje jedne klase
$('p').removeClass('myClass');

// brisanje više klasa
$('p').removeClass('myClass yourClass');

// brisanje svih klasa iz elementa
$('p').removeClass();

 

.attr()

Vraća ili upisuje bilo koji atribut za elemente

// vraća vrednost
$('a').attr('title');

// dodeljuje vrednost
$('a').attr('title', 'Moj link');

 

.removeAttr()

Briše odredjeni atribut iz elemenata

$('div.container').removeAttr('title');

 

.html()

Vraća HTML sadržaj elemenata. Ukoliko je prosledjena neka vrednost (HTML), upisuje istu u element

// vraća HTML sadržaj
$('div.container').html();

// upisuje HTML sadržaj
$('div.container').html('<p>Novi paragraf</p>');

.val()

Vraća ili upisuje zadatu vrednost elementima. Korsiti se za elemente forme koji imaju atribut value

// vraća vrednost
$('input.ime').val();

// upisuje vrednost
$('input.ime').val('Pera');

 

 

Metode za kretanje kroz DOM

Ova grupa predstavlja skup jQuery-jevih metoda za dobijanje informacija o elementima u DOM-u (raspored, redosled, parent-child odnos i slično). Pošto ih ima mnogo, predstavićemo samo one najvažnije.

 

.add()

Dodaje elemente selektovanim elementima. Može da sadrži selektor, već postojeći element ili HTML kod

// dodavanje elementa preko selektora
$('div').add('p.myclass');

// dodavanje vec postojećeg elementa
var mojElement = $('p#sadrzaj');
$('div').add(mojElement);

// dodavanje elementa preko HTML koda
$('div').add('<p id="new">Novi paragraf</p>');

 

.parent()

Vraća prvi parent element. Moguće je proslediti odredjeni selektor za proveru parent-a

// vraća sve parent element
$('div.myclass').parent();

// vraća parent element samo ako je tipa <li>
$('div.myclass').parent('li');

 

.children()

Vraća sve children elemente. Moguće je proslediti odredjeni selektor za filtriranje elemenata.

// vraćanje svih children elemenata
$('div').children();

// vraćanje samo children elemenata sa klasom .myclass 
$('div').children('.myclass');

 

.find()

Vraća sve children elemente sa određenim tipom elementa (slično .children() metodi).

<div id="mojdiv">
  <ul>
    <li>1</li>
    <li>
      <ul>
        <li>2.1</li>
        <li>
          <div>2.2</div>
        </li>
        <li>2.3</li>
      </ul>
    </li>
    <li>3</li>
    <li>
      <div>4</div>
    </li>
  </ul>
</div>

$('#mojdiv').find('div');

U primeru gore, imamo HTML strukturu koju čine dve liste jedna u drugoj. Svaka od te dve liste negde u sebi sadrži po jedan <div> element. Naša .find() metoda će selektovati samo ta dva elementa.

 

.next()

Vraća prvi sledeći element u nizu pored selektovanog elementa. Moguće je proslediti selektor za pretragu samo određenog elementa

// vraća sledeći element
$('div.myclass').next();

// vraća sledeći element samo ako je tipa <ul>
$('div.myclass').next('ul');

 

.prev()

Vraća prvi prethodni element u nizu pored selektovanog elementa. Moguće je proslediti selektor za pretragu samo određenog elementa

// vraća prethodni element
$('div.myclass').prev();

// vraća prethodni element samo ako je tipa <ul>
$('div.myclass').prev('ul');

 

.filter()

Vraća samo odredjene elemente iz selektovanih elemenata

$('li').filter('.selected');

Navedeni primer će vratiti samo one <li> elemente koji u sebi imaju klasu selected

 

.has()

Vraća samo elemente koji u sebi sadrže određeni element

$('div').has('ul');

Navedeni primer će vratiti samo one <li> elemente koji u sebi imaju neki <ul> element

 

.not()

Vraća sve selektovane elemente osim određenog elementa. Prihvata selektore ili već postojeće elemente

// vraća sve <div> elemente koji nemaju već postojeći selektovan element
var mojelement = $('p.mojaklasa');
$('div').not(mojelement);

// vraća sve <div> elemente koji nemaju klasu myclass
$('div').not('.myclass');

 

.slice()

Ograničava pretražene elemente na određenu količinu po rednom broju počevši od zadatog indeksa. Moguće je proslediti i drugi parametar koji predstavlja gde pretraga treba da se završi. Prvi indeks ulazi u pretragu dok drugi indeks ne ulazi.

Napomena: indeksiranje počinje od 0

// vraća sve elemente posle trećeg
$('div').slice(2);

// vraća 4, 5 i 6 element (poslednji indeks nije ušao u skup vraćenih elemenata)
$('div').slice(3,6);

 

 

Manipulacija

Metode u ovoj grupi služe da na neki način manipulišu sa DOM elementima. Sa njima se elementi mogu modifikovati, praviti novi, kopirati, brisati itd.

 

.append()

Pravi novi objekat prema zaditim parametrima i smešta ga na kraj seta elemenata unutar selektovanog elementa. Kao parametre prima selektore, HTML kod ili već postojeće elemente.

$('div#mydiv').append('<p>Neki paragraf</p>');

 

.appendTo()

Obrnuto od .append() metoda. Selektovani element dodaje na kraj seta elemenata unutar prosledjenog elementa.

$('<p>Moj naslov</p>').appendTo('div#naslov');

 

.prepend()

Suprotno od .append() metode. Pravi novi objekat prema zaditim parametrima i smešta ga na početak seta elemenata unutar selektovanog elementa. Kao parametre prima selektore, HTML kod ili već postojeće elemente.

$('#mydiv').prepand('<p>Moj tekst</p>');

 

.after()

Pravi novi objekat prema zaditim parametrima i smešta ga neposredno posle selektovanog elementa. Kao parametre prima selektore, HTML kod ili već postojeće elemente.

// pravi <div> element sa id-om second i smešta posle elementa sa id-om first
$('#first').after('div#second');

// pravi novi <p> element i smešta posle elementa sa id-om naslov
$('#naslov').after('<p>Moj tekst</p>');

 

.before()

Pravi novi objekat prema zaditim parametrima i smešta ga neposredno pre selektovanog elementa. Kao parametre prima selektore, HTML kod ili već postojeće elemente.

$('#naslov').before('<p>Moj tekst</p>');

 

.clone()

Pravi duplikat selektovanog elementa koji kasnije možete da dodajete drugim elementima pomoću ostalih metoda

// primer kloniranja i dodeljivanja kloniranog elementa drugom elementu
$('#naslov').clone().appendTo('div#sadrzaj');

 

.detach()

Uklanja elemente iz DOM-a ali zadržava njihovu kopiju u slučaju da želite naknadno da ih vratite

// uklanja element i smešta kopiju u abc objekat
var abc = $('#mydiv').detach();

 

.empty()

Briče sve child elemente u selektovanom elementu iz DOM-a

$('#mydiv').empty();

 

.remove()

Slično .empty() metodi. Briše selektovani element i sve njegove child-ove iz DOM-a. Moguće je proslediti parametar za odabir elemenata za brisanje.

// briše element sa id-om mydiv i sa svim njegovim child-ovima
$('#mydiv').remove();

// briše sve <div> elemente sa klasom myclass
$('div').remove('.myclass');

 

.replaceWith()

Menja svaki selektovani element sa novim zadatim elementima. Kao parametre prima selektore, HTML kod ili već postojeće elemente.

$('.myclass').replaceWith('<h2>Naslov</h2>');

 

.text()

Vraća tekst iz selektovanog elementa i svih njegovih child-ova ili upisuje novi tekstualni sadržaj unutar elementa. Ukoliko se upisuje novi tekstualni sadržaj, svi elementi koji su bili u selektovanom elementu se brišu.

// vraća tekstualni sadržaj
$('div.container').text();

// upisuje tekstualni sadržaj
$('div.container').text('Neki novi tekst.');

 

.wrap()

Pravi novi element i smešta ga kao parent selektovanom elementu. Kao parametre prima selektore, HTML kod ili već postojeće elemente.

$('p#mytext').wrap('div#container');

 

.unwrap()

Briše parent element ostavljajući selektovani element i sve njegove child-ove na mestu

$('div.container').unwrap();

 

.wrapInner()

Pravi novi element i smešta ga kao child element selektovanom elementu, obmotavajući sve elemente unutar njega. Kao parametre prima selektore, HTML kod ili već postojeće elemente.

$('div#container').wrapInner('div#wrapper');

 

 

CSS

Ovde ne moram posebno da objašnjavam svrhu. Ove metode služe za upravljanje CSS vrednostima elemenata.

 

.css()

Vraća ili postavlja vrednost bilo koje CSS osobine u elementu

// vraća vrednost
$('p').css('color');

// postavlja vrednost
$('p').css('color', '#FFE');

 

.height()

Vraća ili postavlja visinu elementa

// vraća visinu elementa
$('#mydiv').height();

// postavlja visinu
$('#mydiv').height(200);

Razlika izmedju dobijanja visine pomoću .height() i .css('height') je u tome što .css() metoda vraća vrednost zajedno sa jedinicom mere (450px), dok .height() vraća samo brojnu vrednost.

 

.innerHeight()

Vraća visinu elementa uključujući i padding (ako je postavljen)

 

.outerHeight()

Vraća visinu elementa uključujući (ako ih ima) margin-e, border-e i padding

 

.width(), .innerWidth(), .outerWidth()

Rade isto kao i metode za visinu, samo što vraćaju širinu elemenata

 

.offset()

Vraća ili postavlja koordinate elementa u odnosu na poziciju u dokumentu (top i left)

// prvo moramo nekom stringu dodeliti offset elementa
var offset = $('#mydiv').offset();
// zatim preko njega vraćamo top i left koordinate
offset.left;
offset.top;

// postavlja top i left koordiante
$('#mydiv').offset({top:200, left:30});

 

.position()

Vraća koordinate elementa u odnosu na poziciju u parent elementu (top i left)

/* kao i kod offset-a prvo dodeljujemo nekom stringu poziciju elementa
a zatim iz njega iščitavamo koordinate*/
var pos = $('#mydiv').position();
pos.left;
pos.top;

 

 

Događaji

Ove metode se koriste za registrovanje korisničkih akcija u browser-u i delovanje nakon istih, kao i na manipulaciju registrovanim akcijama.

jQuery podržava sledeće događaje:

blur - kada element izgubi fokus

focus - kada element dobije fokus

focusin - kada bilo koji od child elemenata dobije fokus

focusout - kada bilo koji od child elemenata izgubi fokus

load - kada je element u potpunosti učitan (podržani elementi: img, script, frame, iframe, window)

resize - kada window objekat promeni veličinu

scroll - kada korisnik pomeri skroler (radi na window objektu ali i na svim elementima koji imaju ukljucen CSS overflow)

unload - je vezan za window element, i okida se kada korisnik napusti stranicu

click - kada je element kliknut

dblclick - kada je element dvokliknut

mousedown - kada je kursor iznad elementa dok je pritisnut levi taster miša

mouseup - kada je kursor iznad elementa a levi taster miša je pušten nakon što je bio pritisnut

mousemove - kada se kursor pomera unutar elementa

mouseover - kada kursor pređe preko elementa

mouseout - kada kursor napusti polje elementa

mouseenter - kada kursor uđe u polje elementa

mouseleave - isto kao i mouseout

change - kada se vrednost elementa promeni (podržani elementi: input, textarea, select)

select - kada korisnik selektuje neki tekst u nutar elementa (podržani elementi: input i textarea)

submit - kada korisnik pokuša da pošalje formu (podržava samo form element)

keydown - kada korisnik pritisne bilo koji taster na tastaturi. Može biti vezan za bilo koji element, ali taj element mora biti u fokusu.

keypress - isto kao keydown, samo što ne registruje pomoćne tatere (shift, ctrl, alt...)

keyup - kada korisnik pritisne i pusti bilo koji taster na tastaturi. Može biti vezan za bilo koji element, ali taj element mora biti u fokusu.

error - kada se elementi, kao što su slike, ne učitaju dobro

 

.bind()

Na odredjenu korisnikovu akciju (događaj) vezuje funkciju za izvršenje nekom elementu

$('#mojElement').bind('click', function() {
    alert('Korisnik je kliknuo na dugme');
});

 

.live()

Radi isto kao i .bind() metoda, s tim da se događaji vezuju i svim buduće dodatim elementima. Primer, ako vežemo neki događaj za element koji ima klasu .mojaKlasa, i kasnije naknadno doda drugi element sa istom klasom, .bind() element mu neće dodeliti dati događaj, dok će mu .live() dodeliti.

$('#mojElement').bind('click', function() {
    alert('Korisnik je kliknuo na dugme');
});

 

.one()

Vezuje određeni događaj za element, koji će se izvršiti samo jednom.

/* funkcija će biti izvršena samo nakon prvog klika
nakon svakog sledećeg ništa se neće desiti */
$('#mojElement').one('click', function() {
    alert('Korisnik je kliknuo na dugme');
});

 

.die()

Uklanja sve ili neki određeni događaj sa elementa. Može da u kloni i određenu funkciju koja je preko nekog događaja dodeljena elementu.

// uklanja sve događaje
$('#mojElement').die();

// uklanja sve click događaje
$('#mojElement').die('click');

// uklanja odredjenu funkciju koja je prethodno bila dodjeljena na click događaj
$('#mojElement').die('click', nekaFunkcija);

 

Svi gore navedeni event-ovi (događaji) se mogu koristiti sa .bind(), .live(), .one() i .die() metodoma ili kao samostalne metode (primer: .click(), .focus()...)

 

.ready()

Pokreće se kada je DOM potpuno učitan. Uvek koristite ovu metodu kada pokrećete svoje funkcije. Vezuje se isključivo na document objekat.

$(document).ready(function() {
    // vaše funkcije pozivate ovde
});

 

 

Efekti

jQuery poseduje nekoliko tehnika za animiranje sadržaja na web stranici. One uključuju jednostavne, standardne animacije koje se često koriste, kao i sofisticirane, vašim potrebama prilagođene efekte.

 

.animate()

Izvršava animaciju nad zadatom jednom ili više vrednosti CSS-a. Kao prvu vrednost prima zadate CSS vrednosti, druga vrednost se odnosi na brzinu izvršenja u milisekundama, treća vrednost je opciona i može da predstavlja način izvršenja animacije (više o ovome u nekom naprednijem tutorijalu), i kao četvrta (ili treća ukoliko niste koristili prethodnu) predstavlja callback funkciju koja će biti pokrenuta nakon izvršenja animacije.

$('#nekiElement').animate(
    {width : 100, opacity : 0.5},
    500,
    'linear',
    function() { $(this).after('Animation complete.'); }
);

 

.fadeIn()

Animira providnost elementa sa bilo koje vrednosti na 1 (skraćeno od korišćenja .animate() medote samo za opacity vrednost)

$('#nekiElement').fadeIn(500, function(){
    // funkcija za izvršenje po završetku animacije
});

 

.fadeOut()

Suprotno od .fadeIn(), animira providnost elementa na 0

$('#nekiElement').fadeOut();

 

.fadeTo()

Suprotno od .fadeIn(), animira providnost elementa na 0. Kao prvu vrednost prima vreme trajanja animacije u milisekundama, a kao drugu vrednost željene vidljivosti elementa. Treća vrednost je kao i kod svih metoda opciona i predstavlja callback funkciju.

$('#nekiElement').fadeTo(1000, 0,5, function() {
     // funkcija za izvršenje po završetku animacije
});

 

.fadeToggle()

Kombinacija .fadeIn() i .fadeOut(), animira providnost elementa od 0 na 1 i obrnuto. Za vrednosti prima: brzinu izvršenja, efekat animacije i callback funkciju.

$('#nekiElement').fadeToggle(1000, function() {
     // funkcija za izvršenje po završetku animacije
});

 

.show()

Otkriva skriveni element sa istovremenim animiranjem providnosti, širine i visine elementa.

$('#nekiElement').show(1000, function() {
     // funkcija za izvršenje po završetku animacije
});

 

.hide()

Suprotno od .show() metode, skriva element sa istovremenim animiranjem providnosti, širine i visine elementa.

$('#nekiElement').hide(1000, function() {
     // funkcija za izvršenje po završetku animacije
});

 

.toggle()

Kombinacija .show() i .hide() metoda, otrkiva ili skriva element sa istovremenim animiranjem providnosti, širine i visine elementa.

$('#nekiElement').toggle(1000, function() {
     // funkcija za izvršenje po završetku animacije
});

 

.slideDown()

Otkriva skriveni element povećavajući mu visinu.

$('#nekiElement').slideDown(1000, function() {
     // funkcija za izvršenje po završetku animacije
});

 

.slideUp()

Suprotno od .slideDown(), skriva element smanjujući mu visinu.

$('#nekiElement').slideUp(1000, function() {
     // funkcija za izvršenje po završetku animacije
});

 

.slideToggle()

Kombinacija .slideDown() i .slideUp() metoda, skriva ili otkriva element animiranjem visine.

$('#nekiElement').slideToggle(500, function() {
     // funkcija za izvršenje po završetku animacije
});

 

.stop()

Prekida bilo koju animaciju elementa koja je trenutno u toku

$('#nekiElement').stop();

 

 

Ajax

Ništa bez AJAX-a! jQuery nudi moćan paket AJAX mogućnosti.

 

jQuery.ajax()

Glavna metoda za pozivanje AJAX-a. Parametri koji joj se prosleđuju mogu biti:

url Stranica kojoj se zahtev šalje. Ukoliko želite cross-domain zahtev (zahtev poslat drugom domenu), morate to omogućiti pomoću parametra crossDomain (ispod)

crossDomain Koristi se za slanje zahteva stranica na drugim domenima, koristeći JSONP zahtev. Opcije su true i false

type Predstavlja tip prenosa podataka (isto kao kod HTML forme). Može biti GET i POST

data Podaci koji se prosleđuju zadatoj stranici. U prevodu, kao da ste poslali neke podatke preko HTML forme iz nekog input elementa. Primer: ime=Pera&godiste=1980

dataType Određuje tip vraćenih podataka. Podržava: json, xml, script i html

async Da li će se zahtev izvršavati sinhrono ili asinhrono. Moguće opcije su true i false

success Ovim parametrom prosleđujete neku funkciju koja će biti izvršena nakon što se AJAX zahtev završi.

error Poziva neku funkciju ukoliko dođe do nekakve greške u zahtevu.

timeout Vremensko odlaganje početka izvršetka zahteva u milisekundama.

statusCode Izvršavanje zadatih funkcija na određena HTTP stanja. Primer ako je povratni status 404, odnosno stranica nepostojeća, izvršava se neka zadata funkcija.

username Korisničko ime koje će biti prosleđeno u slučaju HTTP autentifikacije.

password Lozinka koja će biti prosleđena u slučaju HTTP autentifikacije.

 

/* kao što je pomenuto gore, svejedno je 
da li ćete koristiti $ ili jQuery objekat */

$.ajax({
    url: "test.html",
    data: "ID=182&lokacija=Beograd",
    type: "GET",
    async: false,
    statusCode: {404: function() {
        alert('Stranica nije pronadjena');
    },
    error: function() {
        alert("error");
    },
    success: function(){
        $(this).addClass("done");
    }
});

 

jQuery.get()

Učitava podatke sa servera koristeći HTTP GET zahtev (skraćena i namenski određena verzija jQuery.ajax() metode). Prihvata 4 parametra: url do stranice (obavezan), podatke koji se šalju sa zahtevom (data), funkciju za izvršenje nakon završetka ajax zahteva, i dataType koji definiše kako će izgledati vraćeni podaci.

$.get("test.php");

$.get("test.php", { ime: "Pera", godine: "26" } );

$.get(
    "test.php",
    { ime: "Pera", godine: "26" },
    function(){ alert('Gotovo')},
    "json"
);

 

jQuery.post()

Isto kao i jQuery.get() metoda, stim da je tip zahteva HTTP POST

 

jQuery.getJSON()

Isto kao i jQuery.ajax() metoda koja bi vratila JSON tip podataka. Parametri su: url, data i funkcija za pozivanje nakon završetka zahteva.

$.getJSON("test.php",
    {ime:"Pera"},
    function() {
        //kod za izvršenje 
    }
);

 

jQuery.getScript()

Učitava skriptu sa servera i izvršava je. Prametri su: url i callback funkcija

$.getScript('ajax/test.js', function() {
    alert('Skripta je učitana.');
});

 

.load()

Učitava podatke sa servera i smešta ih u određeni element. Parametri su: url, data i povratna funkcija.

$('#moj-div').load("stranica.html",
    function() {
        //kod za izvršenje po završetku
    }
);

 

.serialize()

Veoma korisna funkcija. Iščitava podatke iz HTML forme.

function uzmiPodatke() {
    return $('#moja-forma').serialize();
}

$('#dugme').click(
    function(){
        var podaci = uzmiPodatke();
        alert(podaci);
    }
);

Primer će na klik dugmeta izvršiti funkciju uzmiPodatke(), koja pomoću metode .serialize() učitava vrednosti iz svih elemenata koji se nalaze u formi (input, select, textarea), i smešta ih u promenljivu podaci. Zatim će se ti podaci prikazati na ekranu. Vraćeni podaci će izgledati recimo ovako: ime=Pera&prezime=Stojković&ozenjen=ne...

Napomena: jQuery-jev metod .serialize() smo stavili u funkciju uzmiPodatke() kako bi se na svaki klik dugmeta ta funkcija izvršila ponovo, i novi podaci bili vraćeni.

 

 

Alatke za posebne namene (Utilities)

jQuery pored svih navedenih grupa metoda, poseduje i metode koje ne spadaju ni u jednu gore pomenutu, već imaju neke svoje posebne zadatke.

 

jQuery.browser

Ova metoda izvršava proveru vrste i verzije browsera, tako što se na nju nadoveže željena osobina za proveru (msie, mozilla, opera, safari, webkit). Takođe možete ispitati i version osobinu, koja vraća verziju browser-a.

if( $.browser.msie ) {
    // izvrši neki kod
};

alert($.browser.version);

Prvi primer će proveriti da li korisnik koristi Internet Explorer, i ako koristi izvršiće neki kod (recimo ponuditi mu da skine Firefox ili Chrome). Drugi primer će ispisati koja je verzija korisnikovog browser-a.

Ne preporučuje se korišćenje ove metode, jer je moguće dobijanje pogrešnih informacija. Recimo, Google Chrome vraća true i za proveru za webkit i za proveru za safari. Dok IE vraća true za verziju 7 ukoliko je IE8 u compatibility modu.

 

jQuery.now()

Vraća trenutno vreme u UNIX stringu. Zamena za JavaScript funkciju: new Date().getTime()

alert( $.now() );

 

jQuery.isArray()

Proverava da li prosleđeni argument predstavlja niz. Vraća true i false.

var automobil = ["BMW","Mazda","Yugo"];

alert( $.isArray(automobil) );

Primer će ispisati true.

 

jQuery.inArray()

Proverava da li se prosleđena vrednost nalazi u nizu i vraća indeksni broj ili -1 ukoliko se ne nalazi. Prvi parametar je vrednost za traženje, a drugi je niz u kojem se ta vrednost pretražuje.

var automobil = ["BMW","Mazda","Yugo"];

alert( $.isArray('Mazda', automobil) );

Primer će ispisati broj 1, jer se Mazda nalazi na drugom mestu u nizu, što znači da ima indeks 1.

 

jQuery.parseXML()

Koristi se za parsiranje XML podataka. Recimo ukoliko imate neki XML i potrebno vam je da dođete do određenog njegovog elementa.

// neki XML
var xml = '<rss version="2.0"><channel><title>RSS Title</title></channel></rss>';

// parsiramo XML i stavljamo ga u promenljivu
var parsiranXML = $.parseXML(xml);

// ispisujemo sadržaj title elementa iz parsiranog XML-a
alert( $(parsiranXML).find('title').text() );

U primeru smo koristili još neke metode iz prethodnih grupa. Sa .find() smo pronašli željeni element, a sa .text() metodom smo iščitali njegovu vrednost. Rezultat primera je: RSS Title

Napomena: promenljiva (var parsiranXML) u koju smo smestili parsiran XML se mora ponovo smestiti u jQuery dolar objekat (u našem primeru: $(parsiranXML)), kako bi jQuery mogao da primeni ostale metode na njoj

 

jQuery.parseJSON()

Parsira JSON podatke i od njih pravi JavaScript objekat

var obj = jQuery.parseJSON( '{"ime":"Pera"}' );

alert( obj.ime );

Primer će ispisati Pera.

JSON string mora biti pravilno formatiran da bi ova metoda radila

 

jQuery.contains()

Proverava da li se određeni DOM element nalazi unutar drugog DOM elementa. Prvi parametar je element u kojem se pretražuje, dok drugi parametar predstavlja element za kojim se traga.

<body>
    <div id="mojdiv"></div>
</body>

$.contains('#mojdiv', document.body);

U primeru proveravamo da li <body> element u sebi sadrži neki element koji ima id="mojdiv". Rezultat je true

 

jQuery.type()

Vraća tip JavaScript elementa

• jQuery.type( true ) === "boolean"
• jQuery.type( 3 ) === "number"
• jQuery.type( "test" ) === "string"
• jQuery.type( function(){} ) === "function"
• jQuery.type( [ ] ) === "array"
• jQuery.type( new Date() ) === "date"
• jQuery.type( /test/ ) === "regexp"

Prepoznaje i undefined i null tipove vrednosti. Sve ostalo se vraća kao object tip.

 

jQuery.trim()

Uklanja sve praznine (whitespaces) u tekstu na početku i na kraju stringa.

var str = '   Neki tekst.    ';

jQuery.trim(str);

Rezultat će biti: 'Neki tekst.'

 

jQuery.noop()

Funkcija koja ne radi apsolutno ništa, odnosno prazna funkcija. Ekvivalent je običnoj praznoj anonimnoj JavaScript funkciji: function(){}

Koristi se ako vam zatreba prazna funkcija za neki callback, ili samo da prosledite neku funkciju koja ne treba da radi ništa.

 

 

Ukoliko vam bilo šta iz ovog opširnog tutorijala nije bilo jasno, ili želite neko bolje objašnjenje pojedinih metoda, slobodno komentarišite ispod i ja ću vam odgovoriti. Takođe ću dopunjavati tutorijal po potrebi.