20.05.2013. Romchik

Dobar dan. Nastavljamo da proučavamo JavaScript biblioteku - jQuery. U prošlom članku smo se upoznali sa prednostima ove biblioteke i njenim nedostacima. Danas ćemo početi da učimo jQuery i prva stvar koju ćemo uraditi je da povežemo ovu biblioteku sa našim projektom. Pogledat ćemo dva načina za povezivanje jQueryja i zadržati se na njihovim prednostima i nedostacima. Pa počnimo.

Prvo što ćemo uraditi je pripremiti naš projekat. Odmah da pojasnim da se neću detaljno zadržavati na izgledu;

Kreirajmo virtuelni host, na primjer, jquery. Sadržaće glavni index.php fajl, js direktorijum sa JavaScript skriptama, img direktorijum sa slikama i css direktorijum sa datotekama u stilu CSS.

Dodajte sljedeći kod u index.php:

Učenje jQuery zaglavlja Sadržaj bočne trake Podnožje

U datoteku style.css, koja se nalazi u css direktoriju, smjestit ćemo sljedeći kod:

Html, body( padding:0; margin:0; visina:100%; pozicija:relativna; ) /* Header */ #header (boja pozadine: crvena; visina: 100px; širina: 900px; margina: 0 auto; ) /* Sadržaj */ #wrapper( background:#CCC; min-height:100%; margina: 0 auto; širina: 900px; ) #content( float: lijevo; širina: 700px; ) #clear( clear: oba; visina : 50px ) /* Podnožje */ #footer( background:#36F; visina:50px; margina: 0 auto; širina: 900px; margin-top:-50px; position:relative; )

Neću objašnjavati kod za ove datoteke. Hajde samo da proverimo šta imamo. Idemo dalje, u mom slučaju ukucam jquery u pretraživač i dođem do lokalnog apache server, na jquery virtuelni host i vidim:

Odlično, projekat je spreman za povezivanje jQueryja. Sada možemo započeti direktno povezivanje jQueryja. JQuery se može povezati na dva načina: prvi je da preuzmete jQuery biblioteku i postavite je u naš projekat, a drugi način je da povežete jQuery biblioteku preko CDN-a. A onda ćemo pogledati obje metode.

Prva metoda je povezivanje lokalne jQuery biblioteke

Da biste na ovaj način povezali biblioteku, morate je preuzeti sa službene web stranice. Da biste to učinili, idite na službenu web stranicu:

I kliknite na "Preuzmi jQuery"

Idite na sljedeću stranicu, gdje biramo verziju jQuery biblioteke. U vrijeme pisanja ovog teksta mogle su se preuzeti dvije verzije: jQuery 1.9.1 (zastarjela, ali podržava IE6/7/8 pretraživače) i jQuery 2.0.0 ( najnovija verzija, koji više ne podržava IE6/7/8 pretraživače)

Ako preuzmete biblioteku za proizvodnju, tj gotov projekat, zatim izaberite komprimiranu verziju. Preuzmite komprimirani, produkcijski jQuery... Ako preuzmete biblioteku za razvoj, tj. za projekat koji se razvija, onda preuzmite nekomprimiranu biblioteku. Preuzmite nekomprimirani, razvojni jQuery... Zašto? Za radni projekat, komprimirana verzija je bolja, jer je manje teška. A za razvoj - ponekad samo želite da pogledate kod, radoznalost :)

Preuzeo sam nekomprimovanu verziju jQueryja 1.9.1 i nazvao datoteku sa ovom bibliotekom jquery.js. Sada ovu datoteku stavljamo u js folder našeg projekta.

Otvorite datoteku index.php i između oznaka i postavite sljedeći kod:

To. povezali smo jQuery biblioteke sa našim projektom. Hajde da to proverimo.

Da biste to uradili, kreirajte drugu datoteku script.js u direktorijumu js i u njega postavite sledeći kod:

$(function())( alert("jQuery radi"); ));

Ovaj kod ne radi ništa posebno, samo prikazuje poruku "jQuery je pokrenut". Hajde da proverimo, otvorimo našu stranicu kroz pretraživač i vidimo:

Kao što vidite, povezali smo jQuery i radi.

Pros ovu metodu Ne zavisite od drugih usluga. Loša strana je što korisnik stalno učitava jQuery biblioteku (a to utiče na učitavanje same stranice).

Drugi način je korištenje CDN-a za povezivanje jQueryja

Šta je CDN? CDN (Content Delivery Network) - mreža za isporuku sadržaja. I tako, kada koristite CDN, sama jQuery jezgra je već pohranjena sa strane. To može biti Google, Microsoft, Yandex ili sam jQuery. Na vama je da odaberete. Koristim CDN od Gugla (najstabilniji, možda grešim naravno). Iako treba napomenuti da oni također objavljuju CDN iz Yandexa i dodatke za koje oni hvala puno.

Da biste povezali jQuery preko CDN-a od Google-a. Otvorite datoteku index.php i u tagovima red:

zamijeniti sa:

Hajde da proverimo.

Ako želite koristiti CDN iz Yandexa, zamijenite ga sa:

Provjeravamo i vidimo sličan rezultat.

Prednost ovu metodu leži u brzini učitavanja vaše stranice, a to je zbog činjenice da ako je korisnik posjetio bilo koju stranicu koja koristi isti CDN i istu biblioteku (što znači verziju) jQuery, tada je ona već keširana i ne zahtijeva ponovno preuzimanje .

To je u osnovi sve. Razmotrili smo dva načina za povezivanje jQuery biblioteke sa projektom. Na vama je da odaberete koji ćete metod koristiti. I to je sve za sada.

Prvo pitanje koje se nameće kada počnete da radite sa jQuery bibliotekom je kako je povezati sa sajtom? Postoje dvije opcije: povežite se s druge stranice ili je preuzmite na svoj server.

Povezivanje JQueryja na web lokaciju1.

Prvi i najlakši je korištenje datoteke s druge stranice. Da biste to učinili, dovoljan je samo jedan red prije završne oznake head vaše stranice: Ovaj kod označava povezivanje biblioteke sa Google API-jem. Ova metoda ima i prednosti i nedostatke. Prednost će biti to ovaj tip veza se koristi na mnogim stranicama i, na primjer, ako je korisnik već posjetio sličnu stranicu, tada ima biblioteku keširano i ne zahtijeva novo preuzimanje. Loša strana je što ovisite o tome server treće strane - njegov mogući problemi

preuzimanjem postaju vaši.

2. Učitavate datoteku svoje biblioteke na server Najnovija verzija jQueryja se može preuzeti sa početna stranica

Službena web stranica: jquery.com. Preuzmite datoteku. U korijenskom direktoriju (folderu) servera, kreirajte js folder (ako ne postoji) i tu prenesite datoteku. Recimo da je fajl pozvan jquery-1.10.1.js

. Primjer povezivanja ispod:

Red sa vezom na jQuery datoteku trebao bi biti prvi na listi uključenih js datoteka (ako imate druge js veze).

Takođe želim da vam skrenem pažnju na činjenicu da veza sa jQuery-jem mora biti na svim stranicama na kojima se koristi. Nema dovoljno veze na jednoj od stranica.

Kao što je već spomenuto, mnogi popularni CMS-ovi danas već dolaze sa jQuery-jem, a WordPress nije izuzetak. Međutim, ako biblioteka nije uključena u dodatke, jQuery se neće automatski učitati. Da biste ispravno povezali ovaj okvir, trebate koristiti funkciju wp_enqueue_script(). Postavite sljedeći kod u datoteku header.php vaše teme (otvorite kroz uređivač): Kako uključiti jQuery biblioteku u WordPress? Danas skoro svi CMS koriste ugrađeni jQuery. Ostaje da se poveže specijalni tim

. Dodaci ne uključuju uvijek biblioteku automatski, tako da neki blokovi i moduli možda neće raditi. Da biste se povezali, trebate koristiti funkciju wp_enqueue_script().

Ispod je kod koji je potrebno napisati u datoteci header.php (otvoriti kroz editor)
Wp_enqueue_script("jquery");

Kako uključiti jQuery biblioteku u Joomla? Kod koji se ubacuje u rukovalac

$document = JFactory::getDocument();
$document->addScript("http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"); // ovdje nije bitno odakle je veza, može biti iz mreže.
/* ili inače */
$document->addScript("http://mysite/js/.js");
U slučaju šablonske verzije stranice, potrebno je da umetnete PHP kod

jQuery(document).ready(function($)( // link na datoteku AJAX rukovalac var ajaxurl = ""; var nonce = ""; var files; // varijabla. sadržavat će podatke datoteke // ispuniti varijablu podacima kada promijenjena datoteka vrijednosti polja $("input").on("change", function())( files = this.files; ) // obrada i slanje AJAX zahtjeva kada se klikne na dugme upload_files $(). upload_files").on ("klik", function(event)( event.stopPropagation(); // zaustavljanje svih trenutnih JS događaja event.preventDefault(); // zaustavljanje zadanog događaja za trenutni element - kliknite za tag // ne radi ništa ako je datoteka prazna if(typeof files == "undefined") return;

// kreiranje podataka datoteke u formatu pogodnom za slanje var data = new FormData();

$.each(fajlovi, funkcija (ključ, vrijednost)( data.append(ključ, vrijednost); ));

Da biste izbjegli sukob, ali i dalje koristite verziju biblioteke koja vam je potrebna, morate koristiti ispravan način da uključite jQuery u datoteku functions.php:

Podijelite ovaj članak: