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 je najbolj priljubljena in razširjena, in ena dobra lastnost te priljubljenosti je, da na spletu najdete ogromno pomoči. Seveda stackoverflow in w3schools sta najbolj priljubljeni.

Namestitev knjižnice jQuery

Obstajata dba 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. Google je samo primer nekoga, ki gosti knjižnico jQuery. Jaz sicer uporabljam PHP Storm v katerem je že knjižnica vključena, tako da mi ni potrebno ničesar uvažati.

Sklic OPIS
<script src="jquery-3.5.1.min.js"></script>
vpišemo ta sklic, v primeru da si iz jquery.com naložimo knjižnico
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> CDN način je enostavnejši, ki ga uvozimo direktno iz Google Api centra
Namestitev knjižnice jQuery

jQuery Sintaksa (ang.Syntax)

Sintaksa jQuery je narejena po meri, za izbiranje HTML elementov, in za izvajanje nekaterih dejanj na elementih.

Osnovna sintaksa je $(izbirnik).action().

  1. Znak $ je za definiranje / dostop do knjižnice jQuery.
  2. Izbirnik (ang.Selector) je za poizvedbo ali "iskanje" HTML elementov.
  3. jQuery action() se izvede na elementu/ih.

Primeri so predstavljeni v tabeli:

PRIMER OPIS
$(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"
Skrij <span> element. Pritisni, in <span> element bo izginil. Tudi tretji <span> element izgine, če kliknemo nanj.

jQuery uporablja CSS sintakso za izbiro elementov. Več o tem pa v naslednjem primeru. Izbirniki jQuery omogočajo izbiro, in manipuliranje HTML elementov. Izbirniki se uporabljajo za "iskanje elementov glede na njihovo ime, id, razrede (ang.Class), vrste (ang.Type), atribute (ang.Attributes), vrednosti atributov (ang.Value of attributes) in še veliko več. Vsi izbirniki v jQuery pa se začnejo z znakom $ in oklepaji ().


Izbirnik elementov izbere elemente, na podlagi imena elementa. Lahko na primer izberemo oziroma poiščemo vse <p> elemente, vse <span>, vse <h> elemente itn. Naslednji primer bo z gumbom, in ob pritisku na gumb, bomo izbrisali vse <h6> elemente.

Prvi <h6> element!
Drugi <h6> element!
Tretji <h6> element!

Script ki sem ga uporabil za izbris elementov je sledeči,

        
            <script>
                $(document).ready(function () {
                    $("button").click(function () {
                        $("h6").hide();
                    });
                });
            </script>
        
    
in ga lahko uporabimo tudi za izbris id, razredov, in še mnogo več. Primere lahko najdemo na w3schools. Zvezdica * pomeni, da bo izbrisal vse elemente, ki so na spletni strani, če seveda izberemo remove kot opcijo.


Č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 <head> vpisati naslednjo vrstico.

<script src="https://ime strežnika kjer imamo dokument shranjen/test.js"></script>


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 element mouseenter dogodek, lahko klikne na element click dogodek, dvojni klik dblclick itn. Sintaksa naj bi bila (za primer) $("p").click(); in ob kliku na element se zgodi nek dogodek.

Naslov <h5>

Naslov <h4>

        
            <script>
                $(document).ready(function () {
                    $("h4#n").hide();
                    $("h5").click(function (e) {
                        console.log(e);
                        $("h4#n").show();
                    });
                });
            </script>
        
    

Ko se stran naloži se <h4> element skrije, in ko pritisnemo na element <h5> se znova prikaže. Odpremo konzolo, kjer lahko vidimo potek skripta (ang.Script). Če pa bi namesto show() dali toggle(), bi se element <h4> skril, in ob ponovnem kliku na <h5> bi se prikazal.


Lotili se bomo animacij, ki so del jQuery knjižnice. Možnosti je ogromno, kot recimo fade in, fade out, slide, jump, start slide in stop slide itn. Mi si bomo ogledali chaining, in mogoče še kaj več, če bo dovolj zanimivo.

Kaj se bo zgodilo sedaj?

        
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("#chain").css("color", "black")
                    .slideUp(2000)
                    .slideDown(2000);
            });
        });
    </script>

    <p id="chain">Kaj se bo zgodilo sedaj?</p>

    <button>Pritisni</button>
        
    

Slide

Obstajajo tri možnosti zdrsa, to so DOL slideDown, GOR slideUp in oboje naenkrat. Opisal bom samo toggle način, kar pomeni, da lahko element odpremo in zapremo.

Pritisni za izpis besedila
V tem <div> se nahaja besedilo ali slika, ki je skrita, dokler ne kliknemo na prvi div, ki predstavlja gumb v našem primeru. Z drugim pritiskom na <div> Pritisni za izpis besedila, se bo drugi <div> zaprl.

Slide