Jquery

jQuery je dodatek, knjižnica, lahko bi rekli nadgradnja JavaScript. Namen jQuery je olajšati uporabo JavaScript na spletnih straneh. Preden začnemo nadaljevati, bi bilo smiselno poznati HTML, CSS in JavaScript, ki jih seveda najdete na moji spletni strani. jQuery prevzame veliko običajnih opravil, za katere bi bilo potrebno več vrstic JavaScript kode, in jih zavije v metode, ki jih lahko pokličemo. jQuery poenostavlja tudi številne zapletene stvari iz JavaScript, kot so AJAX klici, in manipulacija z DOM.

jQuery
Knjižnica jQuery vsebuje naslednje funkcije:

Namestitev knjižnice Jquery

Obstajata dva načina, kako uporabljati jQuery na spletnih straneh. Prvi je, da prenesemo knjižnico iz jquery.com, druga možnost pa, da knjižnico vključimo iz CDN - Content Delivery Network. CDN način je enostavnejši, ki ga uvozimo direktno iz Google Api centra, in ga samo prilepimo v glavo našega HTML dokumenta.

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

Če pride v PHPStorm do težave, kot je Unresolved function or method $(), rešimo to s preprostim korakom v File/Settings/Languages and Frameworks/JavaScript/Libraries in v desnem oknu izberemo jQuery knjižnico, in na koncu še Ok. S tem ukazom smo naložili jQuery knjižnico v PHPStorm.

Namestitev knjižnice jQuery 1
Namestitev knjižnice jQuery 2

Sintaksa

Sintaksa jQuery je narejena po meri, za izbiranje HTML elementov, in za izvajanje nekaterih dejanj na elementih. Osnovna sintaksa je $(zbirnik).action().

  1. znak $ je za definiranje/dostop do knjižnice jQuery
  2. izbirnik je namenjen za poizvedbo ali "iskanje" HTML elementov
  3. jQuery action() se izvede na elementih
$(this).hide() skrije trenutni element
$("p").hide() skrije odstavek oziroma element <p>
$(".test").hide() skrije vse elemente z razredom (ang.Class)="test"
$("#test").hide() skrije vse elemente z id="test"

jQuery uporablja CSS sintakso za izbiro elementov. Več o tem pa v naslednjih primerih.

Funkcije v ločeni datoteki

Če spletno mesto vsebuje veliko strani, in če bi želeli, da je jQuery funkcije enostavno vzdrževati, lahko te funkcije postavimo v ločeno datoteko .js. Recimo, da naredimo datoteko test.js, in jo naložimo na strežnik, moramo potem v glavo dokumenta (<head>) vpisati naslednjo vrstico:

    <script src="povezava do dokumenta"></script>
  1. ANIMACIJE
  2. DRSENJE
  3. IZBIRNIKI