jQuery - Početak rada sa jQuery


Preuzimanje jQuery-a

Za početak prvo preuzmite jQuery i uključite ga u svoj dokument. Postoje dvije verzije jQuery-a dostupne za preuzimanje : komprimirane i nekomprimirane. Nekomprimirana datoteka je najprikladnija za razvoj ili otklanjanje grešaka, dok se minificirana i komprimirana datoteka preporučuje za proizvodnju, jer štede dragocjeni propusni opseg i poboljšava performanse zbog male veličine fajla. jQuery možete preuzeti sa sljedećeg linka jQuery DOWNLOAD. Nakon što preuzmete jQuery datoteku, možete vidjeti da ima .js ekstenziju, jer je jQuery samo JavaScript biblioteka. Fajl jQuery možete uključiti u svoj HTML dokument pomoću elementa <script> baš kao što uključujete i normalne JavaScript fajlove.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Jednostavan HTML dokument</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery-3.5.1.min.js"></script>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

Uvijek uključite jQuery fajl prije vaših prilagođenih skripti, zato što u suprotnom, jQuery API-ji neće biti dostupni, kada jQuery kod pokuša pristupiti stranici.



Uključivanje jQuery-a pomoću CDN-a

Alternativno, možete uključiti jQuery u svoj dokument putem slobodno dostupnih linkova CDN (mreža za isporuku sadržaja), ako ne želite sami preuzeti i hostovati jQuery. CDN-ovi mogu ponuditi poboljšanje performansi smanjenjem vremena učitavanja, jer oni hostuju jQuery na više servera širom svijeta i kada korisnik zatraži datoteku, ona će se posluživati s najbližeg servera. Ovo takođe nudi prednost u tome što ako je posjetitelj vaše web stranice već preuzeo kopiju jQuery-ja s istog CDN-a tokom posjeta drugim web lokacijama, neće ga trebati ponovno preuzeti, jer se već nalazi u predmemoriji pretraživača.

jQuery CDN

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

Takođe možete uključiti jQuery putem Google-a i Microsoft-ovih CDN-ova.



Izrada vaše prve jQuery web stranice

Do sada ste razumjeli svrhe jQuery biblioteke kao i kako da je uključite u svoj dokument, sada je vrijeme da jQuery stavite u stvarnu upotrebu. U ovoj ćete lekciji izvesti jednostavnu jQuery operaciju promjenom boje teksta naslova iz zadane crne boje u crvenu.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Moja prva jQuery web stranica</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery-3.5.1.min.js"></script>
    <script>
        $(document).ready(function(){
            $("h1").css("color", "#0088ff");
        });
    </script>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

U primjeru izveli smo jednostavnu jQuery operaciju promjenom boje naslova, tj. elementa <h1> pomoću jQuery elementa selektora i css() metode kada je dokument spreman, što je poznato kao događaj spreman za dokument. O jQuery selektorima, događajima i metodama naučićete u narednim lekcijama.