Uvod

Šta je jQuery?

jQuery je JavaScript biblioteka koja olakšava rad sa HTML elementima na web stranici i pomaže da na lakši način iskodiramo neke skripte.

jQuery nam omogućava:

  • manipulaciju elementima stranice (menjanje teksta, stilova ili atributa)
  • reagovanje na događaje (klik, prelazak miša, unos teksta)
  • lakše kreiranje animacija i efekata
  • učitavanje podataka bez osvežavanja cele stranice (pomoću AJAX-a)

JQuery je JavaScript biblioteka koja je u prošlosti bila jako popularna, mada joj u poslednje vreme popularnost opada i prelazi se na neke novije biblioteke.

"Dodavanje" u stranicu:

Pre nego što krenemo da kucamo kod, neophodno je da „uključimo" jQuery biblioteku na našu web stranicu.

Prvi način je preuzumanje jQuery kompletnog fajla (skripta) sa njihovog sajta, a zatim jQuery fajl linkujete pomoću script taga.

JQuery možete da preuzmete ovde.

Možda bi bilo zgodno da se ta preuzeta skripta preimenuje u jquery.js i da se postavi u isti folder sa html dokumentom u kojem se koristi. Tada biste koristili:
<script src="jquery.js"> </script>

Drugi način:  direktno preko zvaničnog sajta i to na sledeći način: 

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


Treći način (i najčešći) je CDN link i mi ćemo na taj način često uključivati jQuery na našu stranicu. CDN (Content Delivery Network) nam pruža mogućnost da uključimo određene biblioteke sa nekog od web servera. Pošto se jQuery hostuje na više servera, na različitim lokacijama i kada se pošalje zahtev serveru (mi šaljemo zahtev za jQuery biblioteku), on će nam je dostaviti sa nama najbližeg servera. U pretraživaču kucate "jQuery Google" ili "jQuery CDN" i dobićete rezultate odakle možete preuzeti link ka skripti. Kako bismo ga uključili na stranicu, taj link ubacite u script tagove u head elementu.

Za većinu aplikacija, zgodno je uključivanje jQuery putem CDN-a, jer korisnici mogu imati u keš memoriji browsera istu verziju jQuery-a sa istog CDN-a, što onda ubrzava učitavanje stranice. Međutim, u offline okruženjima ili aplikacijama gde se izbegava mrežni pristup, lokalni fajl može biti bolja opcija.

A zašto ga ubacujemo u head element? 

Ukoliko vam negde u body elementu, npr. u sredini, zatreba jQuery kod, biblioteka će da bude spremna i učitana. 

Sintaksa

Sintaksa jQuery biblioteke je mahom napravljena da bi se "izabrali" HTML elementi i nad njima izveli određeni događaji.

Osnovna jQuery sintaksa je:

$(selector).action()

  • Znak $ definiše, odnosno pristupa jQuery biblioteci.
  • (selector) se odnosi na odabir elementa ili skupa elemenata DOM-a.
  • .action() se odnosi na događaj koji želimo da se izvrši nad elementom ili skupom elemenata.

Primer:

   <script>
            $(document).ready(function(){
                alert('Sada radimo jQuery.');
            });
   </script>

Objašnjenja: 

JavaScript kod se piše između script tagova. Pošto je jQuery biblioteka za JavaScript, onda se i to piše između script tagova.

Najviše naredbi u jQuery-u počinje znakom $ (dolar), a završava se sa ; (tačka - zarez).

Znak za dolar ($) predstavlja alias za funkciju jQuery() - umesto da se piše funkcija jQuery(), piše se skraćeno $() - znači ovo je samo skraćenica.

Alert metoda vam je poznata.

Događaj Document Ready - sve ćemo pisati unutar ovoga:

    $(document).ready(function(){
      // jQuery methods go here...
    });

Ovo se koristi da bi se sprečilo da se pokrene jQuery kod pre nego što se učita kompletna stranica: nešto što će se raditi tek kada je ceo dokument učitan i spreman -tada će da se izvrši funkcija čiji programski kod se nalazi između vitičastih zagrada.

Još jedan primer jedne jQuery funkcije koja klikom na sve objekte tipa paragraf ih sakriva možete videti (i isprobati) na:

 https://edusoft.matf.bg.ac.rs/eskola_veba/#/course/jq/jq_uvod

Iza dugmića su u kojima se ovo prolazi - pogledajte, da vam bude jasnije, pa pokušajte da uradite isti ili sličan primer.

U ovim snimcima iz 2016 su neke druge verzije. Za nas zasad verzija nije bitna. Vi treba da koristite verziju koja je trenutno najnovija. (i ne brinite što oni pišu index.php, vi pravite index.html, a sve ostalo je isto).  

A ako koristite VS Code, moglo bi biti od pomoći da dodate "jQuery Code Snippets"

   
Kratak pregled osnovnih funkcionalnosti:
  • Selektovanje elemenata - za pronalaženje elemenata na stranici mogu da se koriste CSS selektori (id, klasa, tag, ...) 

       $('p').css('color', 'blue'); // Svi paragrafi postaju plavi
       $('#naslov').css('font-size', '24px'); // Element sa ID-jem "naslov" dobija veći font
  • Manipulacija sadržajem - menjanje, dodavanje ili uklanjanje sadržaja pojedinih elemenata

       $('#naslov').text('Promenjen tekst!'); // Menja tekst u elementu
       $('#naslov').html('<em>Promenjen tekst sa stilom</em>'); // Dodaje HTML stilizaciju
  • Rukovanje događajima - klik, prelazak miša, ...

       $('#naslov').click(function() {
          $(this).css('color', 'green'); // Klikom menja boju na zelenu
       });
  • Efekti i animacije - sakrivanje, prikazivanje, pomeranje elemenata, ....

       $('#naslov').click(function() {
          $(this).slideUp(); // Klikom nestaje sa animacijom
       });


Praktična vežba

Kreirati HTML datoteku sa sledećim sadržajem:

<!DOCTYPE html>
<html lang="sr">
<head>
    <meta charset="UTF-8">
    <title>Vežba sa jQuery</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            // 1. Sakrivanje i prikazivanje paragrafa
            $('#sakrij').click(function() {
                $('p').hide();
            });

            $('#prikazi').click(function() {
                $('p').show();
            });

            // 2. Menjanje boje klikom
            $('p').click(function() {
                $(this).css('color', 'red');
            });
        });
    </script>
</head>
<body>
    <h1>jQuery vežbe</h1>
    <button id="sakrij">Sakrij paragraf</button>
    <button id="prikazi">Prikaži paragraf</button>
    <p>Klikni na mene da promeniš boju.</p>
    <p>Još jedan paragraf za testiranje.</p>
</body>
</html>

Zadatak:

  1. Dodati još jedno dugme koje će obrisati sve paragrafe.

  2. Napraviti efekat da se paragrafi klize nadole kada se prikažu.

Dodatni izazovi

  1. Napraviti skriptu gde se slika prikazuje ili sakriva klikom na dugme.

  2. Kreirati animaciju gde element polako menja veličinu i boju.

  3. Učitati tekst iz spoljne datoteke koristeći jQuery:

$('#dugme').click(function() {
    $('#sadrzaj').load('tekst.txt');
});

Planirani redosled daljeg rada (za drugo polugodište):

JQuery-DOM - https://edusoft.matf.bg.ac.rs/eskola_veba/#/course/jq/jq_dom

JQuery-Efekti ... https://edusoft.matf.bg.ac.rs/eskola_veba/#/course/jq/jq_effects

JQuery-Događaji ... https://edusoft.matf.bg.ac.rs/eskola_veba/#/course/jq/jq_events

Last modified: Tuesday, 17 December 2024, 10:15 AM