jQuery

jQuery je vtičnik, knjižnica, lahko bi rekli nadgradnja na JavaScript. Namen jQuery je narediti lažjo uporabo JavaScript na spletnih straneh. Preden nadaljujemo, bi bilo koristno poznati HTML, CSS in JavaScript. jQuery je knjižnica JavaScript, ustvarjena za lažje in enostavnejše pisanje JavaScript in HTML. Deluje v večini spletnih brskalnikov. Sintaksa je zasnovana tako, da olajša pisanje zapletenega JavaScript-a.

Knjižnica jQuery vsebuje naslednje funkcije:

• Manipulacija HTML/DOM
• CSS manipulacija
• Metode dogodkov HTML
• Učinki in animacije
• AJAX

jQuery je knjižnica JavaScript, zasnovana za poenostavitev prehoda drevesa HTML DOM in manipulacije ter dogodkov upravljanje, animacije CSS in Ajax. Je brezplačna, odprto kodna programska oprema. Spletna analiza kaže, da je najbolj razširjena knjižnica JavaScript z veliko razliko, saj ima vsaj tri do štirikrat večjo uporabo kot katera koli druga knjižnica JavaScript. Sintaksa jQuery je zasnovana tako, da olajša krmarjenje po dokumentu, izbiranje elementov DOM, ustvarjanje animacij, obravnavati dogodke in razvijati aplikacije Ajax. jQuery razvijalcem ponuja tudi možnost ustvarjanja vtičnikov na vrhu knjižnice JavaScript. To razvijalcem omogoča, da ustvarijo abstrakcije za nizko raven interakcije in animacije, napredni učinki in gradniki na visoki ravni, ki jih je mogoče prilagoditi temi. Modularni pristop h knjižnici jQuery omogoča ustvarjanje zmogljivih dinamičnih spletnih strani in spletnih aplikacij. Niz osnovnih funkcij jQuery je izbiranje DOM elementov, prečkanje in manipulacija, ki jim omogoča njegov izbirni motor, ki združuje algoritme in podatkovne strukture DOM.

Namestitev knjižnice

Obstajata dva načina za uporabo jQuery na spletnih straneh. Prvi je prenos knjižnice iz jquery.com in druga možnost je vključitev knjižnice iz CDN - Content delivery network (slo. Omrežje za dostavo vsebin). Enostavnejša je metoda CDN, ki jo uvozimo direktno iz Google API Centra in jo preprosto prilepimo v glavo našega HTML dokumenta.

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

Najpogostejša orodja za delo z jQuery sta PHP Storm in VS Code in za oba bomo napisali preprosto kodo. Kodo lahko kopiramo in prilepimo v IDE po naši izbiri (lahko tudi v beležnico, samo ne pozabite shraniti na koncu pod končnico .html). Kot že omenjeno, za jQuery potrebujemo samo CDN, ki ga uvozimo iz Google Centra in prilepimo v naš HTML dokument. Dodatne namestitve niso potrebne. Če je v PHP Storm težava, kot: Unresolved function or method () (slo. Nerazrešena funkcija ali metoda ()), rešimo s preprostim korakom v File/Settings/Languages in Frameworks/JavaScript/Libraries in v desnem oknu izberemo knjižnico jQuery in na koncu še kliknemo V redu. Ta ukaz je naložil knjižnico jQuery v PHP Storm. Za delo z jQuery v VS Code ne potrebujemo dodatno nobenega vtičnika, vse, kar moramo storiti je, da prilepimo CDN v HTML dokument.

Sintaksa

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 je namenjen za poizvedbo ali "iskanje" HTML elementov.
3. jQuery action() se izvede na elementih.

jQuery uporablja CSS sintakso za izbiro elementov. Če vstavimo dogodek ready znotraj samega dogodka je namenjeno preprečevanju izvajanja kode, preden se dokument naloži. Dobro je, da počakamo, da se dokument v celoti naloži in pripravi, preden začnemo z izvajanjem jQuery kode. To nam tudi omogoča, da imamo kodo pred elementom body, v razdelku glave.

$(document).ready(function () {
    // jQuery koda
})
    

V tabeli je dodanih nekaj primerov, ki se ne izvedejo, če se metode izvedejo, preden je dokument naložen v celoti. jQuery skupina je sicer ustvarila še krajšo metodo za dogodek ready:

$(function () {
    // jQuery koda
})
    

Tako lahko uporabimo sintakso, ki nam je ljubša, osebno sem mnenja, da je dogodek document.ready lažje razumeti pri branju kode.

jQuery uporablja CSS sintakso za izbiro elementov.