Kako povezati jquery s HTML dokumentom

JQuery je najopsežnija i najpopularnija knjižnica skripti kako bi se povećala funkcionalnost web stranica. Njegovo korištenje se u mnogim slučajevima smatra poželjnijim od pisanja pojedinačnih skripti za web-lokaciju, jer ova knjižnica razlikuje pouzdanost i sposobnost rada u svim preglednicima, uključujući one u starijim verzijama. Također, koristeći JQuery optimizira rad stranice i stvara mnogo manje opterećenja od "čistog" koda na javascriptu. U ovom članku opisat ćemo kako spojiti jQuery na vašu web-lokaciju.

Kako preuzeti JQuery

Kako biste povezali JQuery web-stranicu s knjižnicom, morate je preuzeti i dodati u mapu javascript datoteka u direktoriju u kojem se nalaze datoteke web-stranica. Knjižnica se može preuzeti na službenu web stranicu, a najnovija verzija jQuery-a i link za preuzimanje bit će navedeni izravno na glavnoj stranici. Izgleda ovako:
Prema tome, možemo vidjeti da je najnovija verzija Jquery knjižnice za danas (listopad 2018) v331. Preporučuje se da pratite nadogradnje i redovito povežete trenutnu verziju kako biste izbjegli pogreške u prikazivanju informacija na web-lokaciji.


Nakon preuzimanja datoteke, ona se mora smjestiti u imenik na hostingu, koji sadrži i druge datoteke web-mjesta. Ako web-stranica nije već navedena na mreži, ali se nalazi na računalu, preuzeta datoteka jednostavno se smješta u odgovarajuću mapu. Ako je već migriran na poslužitelj, tada trebate koristiti bilo koji upravitelj datoteka za migracijupodataka (npr. WinSCP ili FileZilla). Za pohranu JS-skripti bolje je odabrati zasebnu mapu. Ona također ima jQuery.

Povezivanje preuzete biblioteke

Kako spojiti jQuery knjižnicu na HTML dokument. Prvo otvorite u bilo kojem uređivaču teksta ili HTML kodnoj stranici svoje web-lokacije. U slučaju da radite na CMS-u, morate otići u odjeljak u kojem se glavna jedinica mijenja.


Sljedeće područje uvedeno je sa sljedećim kodom s vezom koja pokazuje kako povezati JQuery skripte i vodi do odgovarajućeg imenika. Ovo će izgledati ovako:

& lt; skripta src = "scripts /jquery-3.3.1.min.js" & gt;

Prema tome, skripte su mapa u kojoj se nalazi željena knjižnica, a zatim njeno puno ime s razlučivošću (slično povezivanju bilo koje druge datoteke s dokumentom). Kao što možete vidjeti, koristi se oznaka & lt; script & gt ;. s atributom src, navodi putanju do datoteke.

Ova metoda povezivanja jQuery je najčešća, ali u nekim slučajevima može malo smanjiti performanse stranice.

Povezivanje jQuery na Wordpress

Wordpress je jedan od najpopularnijih CMS-ova za razvoj web-mjesta i blogova. Razmotrimo kako spojiti jQuery na WordPress.

Neće biti pogrešno povezati knjižnicu koristeći gore opisanu metodu kroz blok zaglavlja, ali za optimizaciju stranice preporučujemo sljedeću metodu.

Preuzimanje knjižnice u ovom slučaju nije potrebno. Morate ići na način uređivanja datoteke functions.php i upisati u njega sljedeći kod:

funkcija my_enqueue_scripts () {
wp_enqueue_script ('jquery');
}
add_action ('wp_enqueue_scripts', 'my_enqueue_scripts');

Na taj način će se izvršiti veza.

Korištenje JQuery-a s Googleom

Postoji prikladan način korištenja Googleovih usluga za povezivanje JQuery-a s web-mjestom. Njegove prednosti uključuju povećanje brzine stranice, budući da datoteke nisu uključene u interni sustav dokumenata, a vanjski resurs, to jest, dodatno vrijeme za preuzimanje nije potrošeno, a stranica radi brže.


& lt; script type = "text /javascript" & gt;
može blockSettings2 = {blockId: "R-A-271049-5", renderTo: "yandex_rtb_R-A-70350-39", async: 0};
if (document.cookie.indexOf ("abmatch =") & gt; = 0) blockSettings2.statId = 70350;
Funkcija (a, b, c, d, e) {a [c] = a [c] || [], a [c] .push (funkcija () {Ya.Context.AdvManager.render (blockSettings2)}), e = b.getElementsByTagName ("script") , d = b.createElement ("script"), d.type = "text /javascript", d.src = "//an.yandex .ru /system /context.js ", d.async =! 0e.parentNode.insertBefore (d, e)} (ovaj, ovaj.dokument," yandexContextAsyncCallbacks ");

Kako spojiti JQuery na stranicu s Googleom.

Potrebno je, kao iu prvoj metodi, ući u blok svih HTML dokumenata, a zatim tamo dodati sljedeći kod:

& lt; ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">

Ovo je izravna veza s knjižnicom objavljenom izravno na Googleu. U budućnosti, kada će skripta pristupiti knjižnici, odmah će se preuzeti s nje. Važno je napomenuti da najnovija verzija jQuery mora biti navedena u vezi. Kôd najnovije verzije može se preuzeti s usluge Google Developers pretraživanjem imena knjižnice.

JQuery Opcije

Na pitanje kako spojiti JQuery na stranicu, vjerojatno ste obratili pozornost na činjenicu da prilikom preuzimanja postaju dostupne dvije datoteke, od kojih jedna ima dodatni "min" u imenu, a drugi nije. ObjeOva se opcija može koristiti za povezivanje s web-stranicom, ali postoji razlika između njih. Min verzija u naslovu je komprimirana, budući da su iz nje uklonjeni svi dodatni znakovi, kao što su kartice i prijelazi nizova. Gotovo je nemoguće koristiti ga za izmjene i ispravljanje pogrešaka, ali pokazuje dobre performanse kada se poveže s web-lokacijom. Nekomprimirana verzija, naprotiv, dobro se koristi za otklanjanje grešaka u kodu, ali je još važnije i nije preporučljivo koristiti je za povezivanje s web-lokacijom.
​​

Zaključak

Dakle, pregledali smo osnovne tehnike i naučili kako povezati jQuery skripte s HTML dokumentom. Ovisno o postavljenim ciljevima i ciljevima, kao io osobnoj udobnosti, možete koristiti bilo koju od ponuđenih opcija. Knjižnica JQuery odličan je način za proširenje funkcionalnosti web-mjesta bez gubitka produktivnosti.

Povezane publikacije