04 - Osnove jQuery-ja

Šta je jQuery?

  • jQuery je lagana, "write less, do more", JavaScript biblioteka
  • Svrha jQuery-ja je olakša korišćenje JavaScript-a na sajtu
  • jQuery biblioteka omogućava
    • Manipulaciju HTML DOM-om
    • Manipulaciju CSS-om
    • Metode za rad sa HTML događajima
    • Efekte i animacije
    • AJAX
    • Korisne dodatke

Dodavanje jQuery-ja web stranici

  • Preuzimanje jQuery-ja
    • Postoje dve verzije za preuzimanje sa jQuery.com
    • Radna verija (Production version) - Za upotrebu na živom sajtu, kompresovana
    • Razvojna verzija (Development version) - Za testiranje i razvoj sajta sa čitljivim kodom
    • <head>
          <script src="/jquery-1.11.1.min.js"></script>
      </head>
  • Korišćenje jQuery-ja sa CDN (Content Delivery Network) kao što su Google ili Microsoft
    • <head>
          <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
      </head>
    • <head>
          <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>
      </head>

jQuery sintaksa

  • Sa jQuery-jem se selektije HTML element i onda se primeni neka akcija na njemu
  • jQuery koristi CSS sintaksu za selektovanje elemenata
  • $(selector).action()
    • $ na početku je za pristup jQuery-ju
    • (selector) omogućava jQuery-ju da selektuje HTML elemente
    • action() je jQuery metod koji se primenjuje na odabranim elementima

Događaj document ready

  • jQuery kod se stavlja unutar događaja document ready da se ne bi pokrenuo pre nego što se završi učitavanje stranice
  • $(document).ready(function(){
       // jQuery methode
    });
  • $(function(){
       // jQuery methode
    });

jQuery selektori

  • Omogućavaju selektovanje HTML elemenata
  • Svi selektori u jQuery-ju počinju sa $()
  • Element selektor
    • Selektuje elemente na osnovu imena, tj. taga
      • $("tag")
    • $(document).ready(function(){
          $("button").click(function(){
              $("p").hide();
          });
      });
  • #id selektor
    • Selektuje element na osnovu id atributa
    • Služi za selekciju pojedinačnog elementa
      • $("#ime")
  • .class selektor
    • Selektuje elemente koji pripadaju određenoj klasi, tj. imaju određeni class atribut
      • $(".klasa")
  • Ostali često korišćeni selektori
    • $("*") - Selektuje sve elemente
    • $(this) - Selektuje tekući HTML elemet
    • $("p.intro") - Selektuje sve <p> elements sa class="intro"
    • $("p:first") - Selektuje prvi <p> element
    • $("ul li:first") - Selektuje prvi <li> element prvog <ul>
    • $("ul li:first-child") - Selektuje prvi <li> element svakog <ul>
    • $("[href]") - Selektuje sve elemente sa href atributom
    • $("a[target='_blank']") - Selektuje sve <a> elemente target atributom "_blank"
    • $("a[target!='_blank']") - Selektuje sve <a> elemente sa target atributom različitim od "_blank"
    • $(":button") - Selektuje sve <button> elemente i <input> elemente sa type="button"
    • $("tr:even") - Selektuje sve parne <tr> elemente
    • $("tr:odd") - Selektuje sve neparne <tr> elemente

Smeštanje jQuery funkcija u eksternu datoteku

  • <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="/moje_jquery_funkcije.js"></script>
    </head>

Reagovanje na događaje

  • jQuery je prilagođen da reaguje na događaje na HTML stranici
  • Događaj predstavlja precizan trenutak kada se nešto desi
  • Najčešće korišćeni metode za događaje:
    • $(selektor).metod(function(){
          // kod koji treba izvrsiti
      });
    • $(document).ready()
    • Miš
      • click() - Klik na element
      • dblclick() - Dupli klik na element
      • mouseenter() - Pokazivač miša ulazi na element
      • mouseleave() - Pokazivač miša izlasi sa elementa
      • mousedown() - Pritisnuto dugme miša na elementu
      • mouseup() - Otpušteno dugme miša na elementu
      • hover() - Radi kao mouseenter() i mouseleave() zajedno i zadaju mu se dve funkcije
    • Tastatura
      • keypress() - Pritisnut taster, ne detektuje ALT, CTRL, SHIFT, ESC
      • keydown() - Pritisnut taster, event.which se koristi da se vidi koji taster je pritisnut
      • keyup() - Otpušten taster, event.which se koristi da se vidi koji taster je pritisnut
    • Forma
      • submit() - Slanje sadržaja forme
      • change() - Promena sadržaja polja
      • focus() - Polje dobija fokus
      • blur() - Polje gubi fokus
    • Dokument/prozor
      • resize() - Promena veličine prozora
      • scroll() - Pomeranje sadržaja
    • Sakrivanje i prikazivanje
      • hide() - Sakriva element, ima dva opciona parametra - brzinu sakrivanja i callback funkciju, tj. funkciju koja će se izvršiti po završetku efekta
      • show() - Prikazuje, tj. otkriva element, ima dva opciona parametra - brzinu otkrivanja i callback funkciju
      • toggle() - Naizmenično sakrivanje i otkrivanje, ima dva opciona parametra - brzinu i callback funkciju
    • Iščezavanje (fading)
      • fadeIn() - Postepeno prikazivanje, ima dva opciona parametra - brzinu i callback funkciju
      • fadeOut() - Postepeno sakrivanje, ima dva opciona parametra - brzinu i callback funkciju
      • fadeToggle() - Postepeno naizmenično sakrivanje i otkrivanje, ima dva opciona parametra - brzinu i callback funkciju
      • fadeTo() - Postepeni prelazak do zadate providnosti, ima opcioni parametar brzinu, obavezni providnost i opsionu callback funkciju
    • Klizanje (sliding)
      • slideDown() - Klizanje elmenta nadole, ima dva opciona parametra - brzinu i callback funkciju
      • slideUp() - Klizanje elmenta nagore, ima dva opciona parametra - brzinu i callback funkciju
      • slideToggle() - Klizanje elmenta naizmenično nadole i nagore, ima dva opciona parametra - brzinu i callback funkciju

Animacija

  • $(selector).animate({params},speed,callback);
    • params - CSS svojstva koja se animiraju, obavezan parametar
    • speed - Brzina animacije - "slow", "fast" ili u milisekundama
    • callback - Funkcija koja će se izvršiti po završetku animacije
  • CSS position svojstvo elementa koji se animacijom pomera mora biti relative, fixed ili absolute
  • Ako se istovremeno animira više svojstava međusobno se razdvajaju zarezom
  • Nazivi CSS svojstava se pišu u camelCase formatu - npr. paddingLeft umesto padding-left
  • U CSS-u moguće je koristiti i relativne vrednosti stavljanjem += ili -= ispred same vrednosti
  • Umesto vrednosti može se pisati i "show", "hide" ili "toggle"
  • $(selector).stop(stopAll,goToEnd); - Zaustavljanje animacije
    • stopAll - Zaustavlja li se ceo red animacija ili samo tekuća, opcioni parametar, podrazumevano je false
    • goToEnd - Skače li se na kraj tekuće animacije ili ne, opcioni parametar, podrazumevano je false

Callback funkcija

  • Obezbeđuje da se funkcija pokrene tek po završetku efekta/animacije

Ulančavanje

  • Omogućava da se više više jQuery naredbi izvrši jedna za drugom na istom elementu
  • $("#p1").css("color","red").slideUp(2000).slideDown(2000);
  • $("#p1").css("color","red")
    .slideUp(2000)
    .slideDown(2000);

jQuery pristup i menjanje sadržaja i atributa

  • Pristup sadržaju
    • text() - Vraća čist tekstualni sadržaj selektovanih elemenata
    • html() - Vraća sadržaj selektovanih elemenata uključujuči i HTML markup, tj. formatiranje
    • val() - Vraća vrednost polja forme
  • Pristup atributima
    • attr() - Kao argument se navodi željeni atribut
  • Menjanje sadržaja
    • text("novi sadrzaj") - Postavlja čist tekstualni sadržaj selektovanih elemenata
    • html("novi sadrzaj") - Postavlja sadržaj selektovanih elemenata uključujuči i HTML markup, tj. formatiranje
    • val("novi sadrzaj") - Postavlja vrednost polja forme
  • Callback funkcija za text(), html(), i val()
    • Callback funkcija se navodi kao parametar ovih metoda
    • Ova funkcija ima dva parametra
      • indeks tekućeg elementa u listi vraćenih elemenata
      • Stari sadržaj selektovanog elementa
    • Ova funkcija vraća novi sadržaj za selektovani elemenat
  • Postavljanje/menjanje vrednosti atributa
    • $("element").attr("imeAtributa","vrednostAtributa");
    • $("element").attr({
          "imeAtributa1" : "vrednostAtributa1",
          "imeAtributa2" : "vrednostAtributa2"
        });
  • Callback funkcija za attr()
    • Sada attr() ima dva parametra
      • Naziv željenog atributa
      • Callback funkcija sa dva argumenta kao i kod text, html i val

jQuery dodavanje elemenata/sadržaja

  • append() - Dodaje sadržaj na kraj selektovanih elemenata
  • prepend() - Dodaje sadržaj na početak selektovanih elemenata
  • after() - Dodaje sadržaj iza selektovanih elemenata
  • before() - Dodaje sadržaj ispred selektovanih elemenata
  • Može i istovremeno nekoliko elemenata samo odvojenih zarezima
    • var txt1 = "<p>Text.</p>";                       // Kreitanje elementa pomoću HTML-a
      var txt2 = $("<p></p>").text("Text.");       // Kreitanje elementa pomoću jQuery-ja
      var txt3 = document.createElement("p");   // Kreitanje elementa pomoću DOM-a
      txt3.innerHTML = "Text.";
      $("p").append(txt1, txt2, txt3);

jQuery uklanjanje elemenata/sadržaja

  • remove() - Uklanja selektovanih elemenata (i njihove potomke), može da prihvati jedan parametar koji služi za filtriranje elemenat koji se brišu
  • empty() - Uklanja potomke selektovanih elemenata

jQuery pristup i postavljanje klasa

  • addClass() - Dodavanje jedne ili više klasa selektovanim elementima
  • removeClass() - Uklanjanje jedne ili više klasa iz selektovanih elemenata
  • toggleClass() - Naizmenično dodavanje i uklanjanje jedne ili više klasa iz selektovanih elemenata
  • css() - Postavljanje ili čitanje atributa style
    • css("imeSvojstva") - Svojstvo koje vraća vrednost izabranog CSS svojstva
    • css("imeSvojstva","vrednost"); - Svojstvo koje postavlja vrednost izabranog CSS svojstva
    • css({"imeSvojstva1":"vrednost1","imeSvojstva2":"vrednost2",...}); - istovremeno postavljanje vrednosti za više svojstava

jQuery dimenzije

  • width() - Širina samog elementa
  • height() - Visina samog elementa
  • innerWidth() - Širina samog elementa + padding
  • innerHeight() - Visina samog elementa + padding
  • outerWidth() - Širina samog elementa + padding + border
  • outerHeight() - Visina samog elementa + padding + border
  • outerWidth(true) - Širina samog elementa + padding + border + margin
  • outerHeight(true) - Visina samog elementa + padding + border + margin

jQuery kretanje kroz DOM (Traversing)

  • Služi za selektovanje elemenata na osnovu njihovog položaja u odnosu na druge elemente
  • Krene se od nekog elementa i kreće se kroz DOM dok se ne dođe do željenog elementa
  • Koriste se preci, siblinzi i potomci
  • Preci
    • parent() - Jedan nivo naviše, roditelj
    • parents() - Naviše sve do korenog elementa (<html>), može se koristiti opcioni pareametar za filtriranje
    • parentsUntil() - Naviše sve do elementa koji se navodi kao parametar, a bez njega
  • Potomci
    • children() - Jedan nivo naniže, deca, može se koristiti opcioni pareametar za filtriranje
    • find() - Naniže do poslednjeg potomka, obavezan je parametar za filtriranje ("*" za sve)
  • Siblinzi
    • siblings() - Svi siblinzi, može se koristiti opcioni pareametar za filtriranje
    • next() - Sledeći sibling, tj. sledeći element na istom nivou
    • nextAll() - Svi sledeći siblinzi
    • nextUntil() - Sledeći siblinzi sve do elementa koji se navodi kao parametar, a bez njega
    • prev() - Prethodni sibling, tj. prethodni element na istom nivou
    • prevAll() - Svi prethodni siblinzi
    • prevUntil() - Prethodni siblinzi sve do elementa koji se navodi kao parametar, a bez njega
  • Filtriranje
    • first() - Vraća prvi od selektovanih elemenata
    • last() - Vraća poslednji od selektovanih elemenata
    • eq() - Vraća element sa navedenim indeksom među selektovanim elemenatima, gde indeksi kreću od 0
    • filter() - Vraća sve elemente među selektovanim koji zadovoljavaju kriterijum naveden kao parametar
    • not() - Vraća sve elemente među selektovanim koji ne zadovoljavaju kriterijum naveden kao parametar

jQuery AJAX

  • AJAX = Asynchronous JavaScript and XML
  • AJAX omogućava učitavanje podataka u pozadini i prikazivanje na stranicu bez potrebe za ponovnim učitavanjem cele stranice
  • load() - Učitava podatke sa servera i smešta ih u izabrani element na stranici
    • $(selector).load(URL,data,callback);
    • URL - Šta se učitava, obavezan parametar
    • data - Skup parova ključ/vrednost koji se šalju uz upit
    • callback - Callback funkcija koja se izvršava po završetku učitavanja, može imati parametre:
      • responseTxt - Ako je poziv uspeo ovde je vraćeni rezultat
      • statusTxt - Status poziva, tj. je li uspeo
      • xhr - XMLHttpRequest objekat
      • $("#nesto").load("demo.txt",function(responseTxt,statusTxt,xhr){
            if(statusTxt=="success")
              alert("Uspesno ucitavanje!");
            if(statusTxt=="error")
              alert("Greska: "+xhr.status+": "+xhr.statusText);
          });
    • $("#nesto").load("demo.txt");
    • $("#nesto").load("demo.txt #nestodrugo");
  • GET i POST
    • GET se koristi za dobijanje podataka sa servera, uključujući i keširane podatke
    • POST može da se upotrebi za dobijanje podataka, ali ih ne kešira i često se koristi za slanje podataka uz zahtev za dobijanje
    • $.get(URL,callback);
      • URL - Šta se učitava, obavezan parametar
      • callback - Callback funkcija koja se izvršava ako je zahtev uspešan, ima dva parametra:
        • data - Sadržaj vraćen sa servera po zahtevu
        • status - Status zahteva, tj. je li bio uspešan
    • $.post(URL,data,callback);
      • URL - Šta se učitava, obavezan parametar
      • data - Podaci koji se šalju uz zahtev
      • callback - Callback funkcija koja se izvršava ako je zahtev uspešan, ima dva parametra:
        • data - Sadržaj vraćen sa servera po zahtevu
        • status - Status zahteva, tj. je li bio uspešan

jQuery noConflict()

  • Moguće je koristiti i druge JavaScript okvire (framework) uz jQuery
  • Može se desiti da neki drugi okvir takođe koristi znak $ kao prečicu
  • noConflict() raskida vezu sa znakom $ i oslobađa ga da bi drugi okviri mogli da ga koriste
  • Onda se mora koristiti celo jQuery umesto znaka $
    • $.noConflict();
      jQuery(document).ready(function(){
      ... kod koji koristi jQuery ...
  • Ili se može usvesti nova prečica umesto znaka $
    • var jq = $.noConflict();
      jq(document).ready(function(){...
      ... kod koji koristi jq ...
  • Da se ne bi kompletno menjao kod znak $ se može poslati kao parametar metodi ready
    • $.noConflict();
      jQuery(document).ready(function($){
      ... kod koji koristi $ ...

 

Vi ste ovde: Home Predavanja Četvrta godina Informatički smer - Web dizajn 04 - Osnove jQuery-ja