Šta ćemo raditi:

Uvod

SKRIPT za ubacivanje u head

Sintaksa
Selektori

Selektori elemenata
Selektori za ID
Selektori za klase
KRATKI PRIMERI

Događaji
LINKOVI ka w3schools materijalima (sve: selektori, događaji, efekti, stilovi, roditelji/deca)

PRIMERI online (vežbe na w3schools)

Uvod

Šta je jQuery?

jQuery je JavaScript biblioteka koja nam pomaže da na lakši način iskodiramo neke skripte.

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

Dodajte link za jQuery u head element. (Ako ne znate kako - podsetite se )

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.

Npr ako preuzeti fajl postavite u folder "skripte" i zatim otkucate u head elementu kod nalik ovom:

   <script src="skripte/jquery-3.6.3.min.js"></script>

U ovom slučaju 3.6.3 označava trenutnu verziju koja je uključena u taj fajl

Drugi način: Link direktno ka fajlu na zvaničnom sajtu i to na sledeći način:

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

Treći način 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. 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.

Primer u kojem se sa Google-ovog servera koristi verzija 3.6.3:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>

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.

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.

Pažnja: Sav jQuery kod koji unesete pre linka za uključivanje jQuery-ja neće raditi !

Sintaksa

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

Osnovna sintaksa je: $(selector).akcija()
   - znak $ je za definisanje/pristup za JQuery -
   - (selektor) koji treba pronaći unutar HTML elemenata
   - jQuery akcija() koja treba da se izvrši nad elementom (ili elementima)

Primer:

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

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.

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. Drugim rečima, 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.

Selektori

jQuery ima tri vrste selektora:

- Selektori elemenata
- ID selektori
- Selektori klase

Selektori elemenata

Selektor elemenata koristimo kada želimo da pronađemo sve elemente zadatog naziva elementa.

   <div>Neki tekst.</div>

   $("div").css("border", "2px solid blue");

ID selektori

Da označimo samo jedan element na stranici koriste se id selektori.

Vodite računa da ne mogu dva elementa imati isti ID !

U html se ID postavlja pomoću atributa id na sledeći način:

   <p id="jq"></p>

i pošto smo ovom paragrafu dodelili id "jq", a u jQuery ćemo ga selektovati na sledeći način:

   $("#jq").css("background", "#123456");

Na ovaj način smo selektovali element sa id jq i dodelili mu stil background sa vrednošću #123456.

Class selektori

Koristimo ih da grupišemo neke elemente koji imaju neka zajednička svojstva na osnovu kojih ih stilizujemo (npr. font, pozadina, boja...).
Njih postavljamo pomoću atributa class na sledeći način:

   <h2 class="jqu">Naslov</h2>

Njega možete selektovati pomoću tačke (kao u CSS).

   $(".jqu").css("background", "#123456");

Sada smo svim elementima sa klasom jqu postavili pozadinu koja ima vrednost #123456.

Primeri:

    $("span") - svi span elementi,
    $("input[type=text]") - input polja pomoću atributa - ovde su sva input polja tipa text,
    $(".jquery .title") - .title element unutar .jquery elementa (ugneždeni),
    $(".jquery1, .jquery2") - više selektora odjednom razdvojenih zarezom.

Pored ovih selektora imamo i neke koji se razlikuju od CSS-a:

    $("p:odd") - neparni p elementi
    $("p:even") - parni p elementi
    $("p:first") - prvi p element
    $("p:last") - poslednji p element
    $("form :text") - sva input polja tipa text unutar forme
    $("form :password") - sva input polja tipa password unutar forme
    $("form :submit") - sva input polja tipa submit unutar forme.

Svi ovi selektori postoje i u CSS-u, međutim pišu se na nešto drugačiji (i na malko duži) način.

Kratki primeri (klik da se pojavi primer):

  <script>
     $(document).ready(function () {$("div").css("border", "3px solid red");});
  </script>

 <body>
    <div>Lorem ipsum 1.</div>
    <div>Lorem ipsum 2.</div>
    <div>Lorem ipsum 3.</div>
 </body>

 <script>
   $(document).ready(function () {$(".klasa1").css("border", "3px solid blue");});
 </script>

 <body>
    <div>Lorem ipsum XXX.</div>
    <div class="klasa1">Lorem ipsum WWW.</div>
    <div>Lorem ipsum dolor EEE.</div>
 </body>

<script>
   $(document).ready(function () {$("#id1").css("border", "2px solid red");});
</script>


<body>
    <div id="id1">Lorem ipsum AAAAAAAAAAAAA.</div>
    <div>Lorem ipsum BBBBBBBBBBBB.</div>
    <div>Lorem ipsum CCCCCCCCCCCCCCt.</div>
</body>

 <script>
   $(document).ready(function () {
       $("div#id1").css("border", "2px solid red");
       $("div.klasa1").css("border", "2px solid blue");
    });
 </script>


<body>
    <div id="id1">Lorem ipsum dolor sit amet.</div>
    <div class="klasa1">Lorem ipsum dolor sit amet.</div>
    <div>Lorem ipsum dolor sit amet.</div>
</body>

<script>
   $(document).ready(function () {
       $("div:first").css("border", "2px solid red");
       $("div:last").css("border", "2px solid blue");
   });
</script>

<body>
    <div>Lorem ipsum Q.</div>
    <div>Lorem W.</div>
    <div>Lorem
    ipsum dolor R.</div>
</body>

<script>
   $(document).ready(function () {
       $("div:even").css("border", "2px solid red");
       $("div:odd").css("border", "2px solid blue");
   });
</script>

<body>
    <div>Lorem ipsum dolor sit amet.</div>
    <div>Lorem ipsum dolor sit amet.</div>
   
    <div>Lorem ipsum dolor sit amet.</div>
    <div>Lorem ipsum dolor sit amet.</div>
    <div>Lorem ipsum dolor sit amet.</div>
    <div>Lorem ipsum dolor sit amet.</div>
</body>

Događaji

Događaji su povezani sa interakcijom korisnika sa web stranicom, kao što su: klik na neki element, prelazak mišem preko nekog elementa, selektovnje čekboksa itd.

Pomoću jQuery-a vrlo jednostavno možemo iskodirati događaje pomoću metoda koje nam nudi kao što su: ready(), click(), dblclick(), keypress(), focus(), blur(), change() , ...

U nastavku su neki od događaja, ali ne svi