jQuery - Sintaksa


Standardna sintaksa jQuery

Izjava jQuery obično započinje znakom dolara ($) i završava tačka-zarezom (;). U jQuery-ju, znak dolara ($) samo je zamjensko ime za jQuery. Razmotrimo sljedeći primjer koda koji pokazuje najosnovniju jQuery izjavu.

<script>
    $(document).ready(function(){
        // Neki kod koji će se izvršiti...
        alert("Hello World!");
    });
</script>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery Sintaksa</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script>
    $(document).ready(function(){
      // Neki kod koji će se izvršiti...
      alert("Hello World!");
    });
  </script>
</head>
<body>
  <!--Sadržaj će biti umetnut ovdje-->
</body>
</html>

Primjer jednostavno prikazuje poruku upozorenja "Hello World!" korisniku.



Objašnjenje koda

Ako ste potpuno novi u jQuery-ju, mogli biste pomisliti o čemu se radi u ovome kodu. OK, prođimo korak po korak kroz svaki dio ove skripte.

  • Element <script> - Budući da je jQuery samo JavaScript biblioteka, jQuery kod možemo smjestiti unutar elementa </script>. Međutim, ako ga želite smjestiti u vanjsku JavaScript datoteku, koja je poželjnija, samo uklonite ovaj dio.

  • $(document).ready(handler); - Ova izjava je obično poznata kao spremni događaj. Gdje je rukovatelj u osnovi funkcija koja se prenosi na metodu ready() da bi se izvršila sigurno čim je dokument spreman za manipulaciju, tj. kada je DOM hijerarhija u potpunosti izgrađena.

Metoda jQuery ready() obično se koristi s anonimnom funkcijom. Dakle, gornji primjer takođe možemo zapisati u kratkom zapisu poput ovog:

<script>
    $(function(){
        // Neki kod koji će se izvršiti..
        alert("Hello World!");
    });
</script>
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery Skraćena sintaksa</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script>
    $(function(){
      // Neki kod koji će se izvršiti..
      alert("Hello World!");
    });
  </script>
</head>
<body>
  <!--Sadržaj će biti umetnut ovdje-->
</body>
</html>

Dalje, unutar funkcije rukovatelja događajima možete napisati jQuery izraze kako bi izvršili bilo koju radnju sljedeći osnovnu sintaksu, poput: $(selector).action();, gdje $(selector) u osnovi bira HTML elemente iz DOM stabla tako da se njime može manipulisati, a action() primjenjuje neku akciju na odabrane elemente kao što je promjena vrijednosti svojstva CSS ili postavljanje sadržaja elementa itd. Razmotrimo još jedan primjer koji postavlja tekst paragrafa nakon što DOM bude spreman:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery Document Ready Demo</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery-3.5.1.min.js"></script>
    <script>
        $(document).ready(function(){
            $("p").text("Hello World!");
        });
    </script>
</head>
<body>
    <p>Nemoj još učitati.</p>
</body>
</html>

U jQuery izjavi iz gornjeg primjera p je jQuery selektor koji bira sve pasuse, tj. <p> elemente u dokumentu, kasnije metoda text() postavlja sadržaj teksta paragrafa na "Hello World!". Tekst paragrafa u gornjem primjeru automatski se zamjenjuje kada je dokument spreman, ali što ako želimo da korisnik izvrši neku radnju prije izvođenja jQuery koda kako bi zamijenio tekst paragrafa? Razmotrimo još jedan prethodni primjer:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery Click Handler Demo</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery-3.5.1.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("p").text("Hello World!");
            });            
        });
    </script>
</head>
<body>
    <p>Nemoj još učitati.</p>
    <button type="button">Zamjeni tekst!</button>
</body>
</html>

U gornjem primjeru tekst paragrafa se samo zamjenjuje kada se na dugme "Zamijeni tekst!" dogodi klik, što jednostavno znači da kada korisnik klikne dugme, tekst će se zamjeniti. Sad kad ste razumjeli kako jQuery funkcioniše, u sljedećim lekcijama naučićete o terminima o kojima smo ovdje detaljno razgovarali.