jQuery
NA VRH
DOMOV HTML CSS JavaScript jQuery PHP MySQL Python C# Sass WordPress
glave/headings

jQuery: - namestitev jQuery knjižnice - jQuery sintaksa - funkcije v ločeni datoteki - animacije - drsenje - zbirniki - dogodki jQuery HTML Dogodki Prehajanje AJAX

jQuery

jQuery je dodatek, knjižnica, lahko bi rekel 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:

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.5.1/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
Namestitev knjižnice jQuery

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. zbirnik (ang.Selector) 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.

Č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="https://povezava do strežnika kjer imamo dokument shranjen/test.js"></script>
        

Z orodjem jQuery lahko ustvarjamo tudi animacije po meri, za kar se uporablja jQuery metoda animate()

    $(zbirnik).animate({parameter}, speed, callback);
    

Zahtevani parameter določa CSS lastnosti, ki jih je potrebno animirati. Izbirni parameter speed določa trajanje učinka, in lahko sprejme vrednosti slow, fast in millisecond's. Izbirni parameter callback se izvede po zaključku animacije.

ANIMACIJE

Obstajajo tri možnosti zdrsa. To je dol slideDown(), gor slideUp() in oboje naenkrat (slide odpremo in nato še zapremo z istim gumbom) slideToggle().

DRSENJE

Zbirnik elementov izbere elemente, na podlagi imena elementa. Lahko na primer izberemo oziroma poiščemo vse <p> elemente, vse <span>, vse <h> elemente itn. V naslednjem primeru bomo ob pritisku na gumb izbrisali in prikazali vse <h6> elemente. Kako hitro se bo izbrisalo, in prikazalo pa je odvisno od časa, ki ga nastavimo v oklepajih, 1000 je 1sekunda. Vsi zbirniki v jQuery se začnejo z znakom $ in oklepaji ().

ZBIRNIKI

Vsa dejanja obiskovalcev naše spletne strani, na katere reagira, se imenujejo dejanja, in ta dejanja lahko zabeležimo. Recimo, če bo obiskovalec šel z miško čez določen dogodek, kot je recimo mouseenter, se bo prikazalo sporočilo. Lahko nastavimo določen element, in ko nanj kliknemo se zgodi dogodek click, dvojni klik dblclick itn.

Sintaksa naj bi bila (za primer) $("p").click(); in ob kliku na element se zgodi nek dogodek. V spodnji tabeli, kot tudi v glavnem meniju, lahko vidimo nekaj najbolj uporabnih dogodkov, ki se uporabljajo.

DOGODKI