Osnove JQueryja. Uvod u jQuery

Vjerojatno ste čuli za prekrasnu Javascript biblioteku zvanu jQuery. Što je zapravo jQuery?

Kako olakšati život web developeru? Gdje početi? jQuery piše Javascript zanimljiv i jednostavnije. Uz ovu knjižnicu, mnogi prilično složeni aspekti Javascripta mogu se lako ugraditi u bilo koju aplikaciju.

Današnji vodič će vam pokazati kako započeti s jQueryjem i kako napisati svoju prvu skriptu.

Što je jQuery?

jQuery je vrlo lagana Javascript biblioteka (neki je nazivaju okvirom) koja uklanja glavobolju pisanja Javascript koda. Ima puno, jako moćne sposobnosti kao na primjer: DOM praćenje, dodavanje prekrasni efekti i animacije elemenata, super jednostavne Ajax tehnike i metode. Na glavnoj stranici web-mjesta jQuery opis je, po mom mišljenju, najtočniji:

jQuery je brza i sažeta biblioteka koja olakšava rukovanje događajima, animacijama i interakciju s Ajaxom za više brzi web razvoj. jQuery je dizajniran za promjenu metoda pisanje JavaScripta kodirati.

Koje su prednosti jQueryja?

Pogledajmo na brzinu neke od prednosti i svojstava ovog okvira:

Količina koda (potrebna da bi skripta radila) značajno je smanjena u usporedbi s JavaScriptom, što zauzvrat znači manje utrošenog vremena i čitljiviji kod. Neki primjeri bit će razmotreni kasnije u članku.

Mnogo lakši za razumijevanje koda (za razliku od JavaScripta). U našem svijetu, što prije završite proces programiranja, više vremena možete posvetiti drugim ciljevima.

Vrlo zgodna dokumentacija i aktivna zajednica, uvijek spremna pružiti pomoć ako je potrebno.

Korištenje Ajaxa postaje puno lakše. Potrebno vam je samo 5 redaka koda (ponekad i manje) za izradu jednostavnog Ajax zahtjeva.

Ogroman broj dodataka s kojima možete učiniti gotovo sve.

JQuery je zabavan :)

Kako započeti?

Prije svega, morate posjetiti početnu stranicu jQuery službenu web stranicu i preuzmite najnoviju verziju ovog okvira. Nakon preuzimanja, ovu datoteku morate prenijeti na svoj hosting, a u zaglavlje dokumenta napisati poveznicu na ovu datoteku.

Alternativno, možete iskoristiti pomoć sjajnog Googlea i staviti link na njihov poslužitelj, gdje su oni uvijek svježe verzije bilo kakvih okvira. Traženi link se može pronaći.

Je li dokument spreman?

Da ispunimo naše prvi jQuery skriptu, moramo staviti cijelu našu skriptu u funkciju. Ova funkcija će se izvršiti kada je DOM spreman (kada je "dokument spreman" - doslovan prijevod s engleskog). Imajte na umu da je ovo vrlo slično popularnom događaju 'onload', ali nije isto. Pogledajmo primjer:

$ (dokument) .spreman (funkcija () (// Kod ovdje));

Iznad kažemo jQueryju da izvršava bilo koji kod unutar funkcije s spremnim DOM-om, što ima svoje prednosti, iako bi moglo biti zbunjujuće. Prije svega korištenjem ovu tehniku, potpuno odvajamo Javascript od HTML-a. Drugo, ne trebamo čekati puno opterećenje stranicu, dovoljno je učitavanje DOM-a.

Za lijene kodere ili za one koji imaju svaki znak na svom računu, još uvijek možete skratiti gornji kod:

$ (funkcija () (// Kod ovdje));

Vaša prva jQuery skripta

Već znamo kako se referirati na knjižnicu. Također razumijemo funkciju document.ready malo. Sada je vrijeme da napišete najjednostavniji scenarij.

Neka bude što jednostavnije. Za ovaj primjer, napravimo stranicu s tekstom i citatom na kraju. Ponudu želimo prikazati samo ako korisnik klikne na gumb. Za ovo pogledajte kod u nastavku:

$ (dokument) .spreman (funkcija () (
var myQuote = $ ("# my_quote");
myQuote.hide ();
$ (". gumb"). kliknite (funkcija () (
myQuote.show (500);
});
});

Pogledajmo pobliže sav kod.

Kao što je gore navedeno, sav kod za izvršenje stavljamo unutar funkcije $ document.ready ().

Dodjeljujemo id našeg citata (my_quote) varijabli myQuote. Sada imamo pristup citatu s ID-om my_quote.

To je sve. Kada pritisnete tipku 0,5 sekundi, prikazat će se citat. Vrlo lako, zar ne?

Nastavit će se....

Hvala na pažnji! Sve najbolje!

05.03.17. 1.2K

Uvod

JQuery HTML je knjižnica dizajnirana za “ piši manje a radi više". To nije programski jezik, već alat koji se koristi za pojednostavljenje implementacije. zajednički zadaci JavaScript.

JQuery ima dodatna prednost — kompatibilnost s različitim preglednicima... Možete biti sigurni da će vaš kod biti protumačen u bilo kojem modernom pregledniku.

Usporedba pisanja jednostavnog programa " Pozdrav svijete!"sa korištenjem JavaScripta i jQuery, možete vidjeti razliku između njih.

JavaScript

document.getElementById ("demo"). innerHTML = "Zdravo, svijet!";

JQuery

$ ("# demo"). html ("Zdravo, svijet!");

Ovaj kratki primjer ilustrira kako s pomoću jQueryja možete dobiti isti rezultat kao sa standardnim JavaScriptom, ali sažetije.

Ciljevi

Ovaj vodič ne pretpostavlja osnovno znanje o jQueryju, već pokriva sljedeće teme:

• Kako instalirati jQuery u web projekt;
• Definiranje važnih koncepata web razvoja kao što su API, DOM i CDN;
• JQuery generički selektori, događaji i efekti;
• Primjeri za testiranje koncepata naučenih u ovom članku.

Postavljanje JQueryja

JQuery je JavaScript datoteka na koju ćete povezati u svom dokumentu. Kako uključiti jQuery u HTML:

• Preuzmite lokalnu kopiju;
• Dodajte vezu na datoteku putem mreže za isporuku sadržaja ( CDN).

Bilješka. Mreža za isporuku sadržaja ( CDN) je sustav od nekoliko poslužitelja koji korisniku pružaju web sadržaj ovisno o njegovu geografskom položaju. Kada se povežete na jQuery datoteku putem CDN-a, ona će biti predstavljena korisniku brže i učinkovitije nego ako je smještena na vašem vlastitom poslužitelju.

U našim primjerima koristit ćemo jQuery vezu preko CDN-a. Najnovija verzija jQuery se može pronaći na Googleu. Ako umjesto toga želite preuzeti biblioteku, možete nabavite kopiju jQueryja sa službene stranice.

Napravimo mali web projekt. Sastojat će se od datoteke style.css, scripts.js i glavne datoteke index.html.

Postavite neke osnovne HTML oznake i spremite ih u index.html.

Indeks.html

Indeks.html

JavaScript skripta ( skripte.js) mora se povezati u donjem dokumentu biblioteke jQuery ili neće raditi.

Bilješka. Ako ste preuzeli lokalnu kopiju jQueryja, spremite je u mapu js / i uključite je putem veze js / jquery.min.js.

JQuery knjižnica je dodana u HTML i mi jesmo puni pristup na jQuery API.

Korištenje jQueryja

jQuery se koristi za povezivanje s HTML elementima u pregledniku putem DOM-a.

Model objekta dokumenta ( DOM) Je li metoda kojom JavaScript (i jQuery) komuniciraju s HTML-om u pregledniku. Da biste vidjeli što je DOM, kliknite u pregledniku desni klik miša na trenutačnoj web stranici i odaberite Prikaži kod. Kao rezultat toga, ploča " Razvojni alati". HTML koji vidite u njemu je DOM.

Svaki HTML element broji DOM čvor- objekt na koji se JavaScript može odnositi. Ovi objekti imaju strukturu stabla u kojoj se element je onaj najbliži korijenu i svaki je grana stabla. JavaScript može dodati, ukloniti i izmijeniti bilo koji od ovih elemenata.

Ako ponovno kliknete desnom tipkom miša i odaberete " Pogledajte izvorni kod", vidjet ćete sirovi HTML. U početku ćete možda biti zbunjeni oko DOM-a i HTML izvora, ali to su različite stvari. Izvorni kod stranice točno odgovara onome što je napisano u HTML datoteci. On je statičan i nepromjenjiv i na njega ne utječe JavaScript. Zauzvrat, DOM je dinamičan i može se mijenjati.

Vanjski DOM sloj koji obavija cijeli čvor , je objekt dokumenta. Za korištenje na jQuery stranica, morate biti sigurni da je dokument "spreman".

Napravite datoteku scripts.js u mapi js / i dodajte joj sljedeći kod:

js / skripte.js

Sav jQuery kod umetnut u HTML bit će umotan u gornji kod. Radit će tek nakon što je DOM spreman za pokretanje JavaScript koda. Iako se u nekim slučajevima JavaScript neće učitati dok se elementi ne renderiraju, uključujući ovaj blok smatra se najboljom praksom.

Za pokretanje skripte “ Pozdrav svijete!" i prikažite tekst u pregledniku pomoću jQueryja, prvo stvorite prazan element odlomka na koji se primjenjuje demo id.

Indeks.html

... ...

JQuery se poziva i označava znakom dolara ($). Pristupamo DOM-u pomoću jQueryja CSS sintaksa, i primijeni radnju metodom:

$ ("selektor").metoda ();

Budući da je identifikator u CSS-u označen simbolom #, pristupamo demo identifikatoru pomoću #demo selektora. html () je metoda koja mijenja HTML oznaku unutar elementa.

Sada ćemo staviti program " Pozdrav svijete!»Unutar jQuery spremnog () omota. Dodajte ovaj redak svojoj postojećoj funkciji u datoteci scripts.js:

js / skripte.js

$ (dokument) .spreman (funkcija () ($ ("# demo"). html ("Zdravo, svijet!");));

Nakon što spremite promjene, možete otvoriti datoteku index.html u svom pregledniku. Ako sve radi kako treba, vidjet ćete natpis " Pozdrav svijete!»

Desnom tipkom miša kliknite na natpis " Pozdrav svijete!"I odaberite" Prikaz koda ". Sada se prikazuje DOM

Pozdrav svijete!

... Ako pogledate izvorni kod stranice, vidjet ćete samo originalni HTML kôd koji smo napisali.

Selektori

Selektori su ono što koristimo za specificiranje jQuery HTML s kojim elementima želimo raditi. Možete pogledati cijeli popis jQuery selektori u službenoj dokumentaciji.

Za pristup selektoru koristite znak $ iza kojeg slijede zagrade ().

$ ("selektor")

Linije sa dvostruki navodnici su poželjni (prema jQuery vodiču). Iako se često koriste i nizovi s jednostrukim navodnicima.

Ispod je kratki pregledčesto korišteni birači.

• $(«*») — zamjenski znak : odabire svaki element na stranici;
• $ (ovo) - trenutno: odabire trenutnu stavku kojom se upravlja ovaj trenutak unutar funkcije;
• $ ("P") - oznaka: odabire sve instance oznake

  ;

• $ (". Primjer") - klasa: odabire sve elemente na koje se primjenjuje klasa primjera;
• $ ("# Primjer") - identifikator: odabire jednu instancu s primjerom jedinstvenog identifikatora;
• $ ("") - atribut: odabire sve elemente u atribut tipa koji je postavljen na tekst;
• $ ("P: prvi u vrsti") - pseudoelement: odabire prvi element

  .

Kada povezujete jQuery s HTML-om, imat ćete posla s klasama i ID-ovima. Klase se koriste kada je potrebno odabrati više stavki, a identifikatori kada samo jedan.

JQuery događaji

U primjeru " Pozdrav svijete! Kôd se pokrenuo kada se stranica učitala i dokument bio spreman, tako da nije bila potrebna interakcija korisnika. U ovom slučaju možemo napisati tekst izravno u HTML-u, bez jQueryja. Ali morat ćemo koristiti jQuery ako želimo da se tekst prikaže na stranici nakon klika mišem.

Vratite se na svoju datoteku index.html i dodajte joj element ... Koristit ćemo ovaj gumb za praćenje događaja klika.

index.html

...

Klikni me

Koristimo metodu click () za pozivanje funkcije koja sadrži “Hello, World! ".

js / skripte.js

$ (dokument) .spreman (funkcija () ($ ("# okidač"). klik ();));

ID elementa je okidač, odabiremo ga s $ ("# okidač"). Dodavanjem klika (), pratimo događaj klika. Zatim pozivamo funkciju koja sadrži naš kod unutar metode click ().

funkcija () ($ ("# demo"). html ("Zdravo, svijet!");)

Ovdje puni kod JQuery HTML element.

js / skripte.js

$ (dokument) .spreman (funkcija () ($ ("# okidač"). klik (funkcija () ($ ("# demo"). html ("Zdravo, svijet!");));));

Spremite datoteku scripts.js i osvježite index.html u svom pregledniku. Sada kada kliknete na gumb, pojavljuje se tekst " Pozdrav svijete!«.

Događaj je svaka interakcija između korisnika i preglednika pomoću miša ili tipkovnice. Primjer koji smo upravo stvorili koristi događaj klika. Službena jQuery dokumentacija se može pronaći potpuni popis jQuery metoda događaja... Ispod je popis često korištenih događaja.

• klik () - klik: javlja se jednim klikom miša;
• lebdjeti () - lebdeći kursorom: javlja se kada je pokazivač miša iznad elementa;
• submit () - submit: javlja se kada se predaju podaci obrasca;
• pomicanje () - pomicanje: događa se kada se stranica ili element pomiče;
• keydown () - pritisak na tipku: javlja se kada se pritisne tipka na tipkovnici.

Metoda pomicanja () koristi se za animiranje elemenata ili njihovo sakrivanje kada korisnik pomiče stranicu.

Za izlazak iz izbornika pomoću ESC tipke, koristi se metoda keydown (). Za izradu padajućeg izbornika ili dodavanje HTML-a u div pomoću JQueryja, koristi se metoda klik ().

JQuery efekti

JQuery efekti vam omogućuju dodavanje animacije i upravljanje elementima na stranici.

V sljedeći primjer napravit ćemo skočni i skriveni prozor. Mogli smo koristiti dva identifikatora, jedan za otvaranje prozora, a drugi za njegovo zatvaranje, ali ćemo koristiti klasu za otvaranje i zatvaranje prozora koristeći istu funkciju.

Izbrisati postojeće oznake i

Iz datoteke index.html i dodajte sljedeći kod:

index.html

Otvorena Zatvoriti

U datoteci style.css upotrijebit ćemo minimalnu količinu CSS-a da sakrijemo preklapanje s prikazom: nijedan i centriramo ga na zaslonu.

css / style.css

Preklapanje (prikaz: nema; položaj: fiksno; vrh: 50%; lijevo: 50%; transformacija: prevedi (-50%, -50%); visina: 200px; širina: 200px; pozadina: siva;)

U datoteci scripts.js koristimo metodu toggle () koja će mijenjati vrijednosti CSS svojstva prikaz od ničega do bloka i obrnuto, skrivanje i prikaz prozora na klik mišem.

js / skripte.js

$ (dokument) .spreman (funkcija () ($ (". okidač"). klik (funkcija () ($ (". preklapanje"). prebaci ();));));

Nakon povezivanja JQueryja s HTML-om, ažurirajte svoju datoteku index.html. Sada možete promijeniti vidljivost skočnog prozora pritiskom na tipku miša. Metodu toggle () možete zamijeniti s fadeToggle () ili slideToggle () da biste postavili druge jQuery inline efekte.

U nastavku je popis često korištenih učinaka:

• preklop () - preklop: uključuje vidljivost stavke ili stavki. show () i hide () - postavite efekte iste vrste;
• fadeToggle () - preklopni fade: Prebacuje vidljivost i animira neprozirnost elementa ili elemenata. fadeIn () i fadeOut () su povezani jednosmjerni efekti;
• slideToggle () - Prebacuje vidljivost elementa ili elemenata s efektom slideshowa. slideDown () i slideUp () - postavite efekte iste vrste;
• animate () - Izvodi prilagođene efekte animacije na CSS svojstvu elementa.

Koristimo jQuery događaji za praćenje interakcija korisnika, kao što su tipke na tipkovnici, a koristimo efekte jQuery za daljnju obradu elemenata kada dođe do te interakcije.

Zaključak

U ovom vodiču naučili ste kako odabrati jQuery elementi HTML i manipulirati njima, kao i načinom na koji događaji i efekti funkcioniraju, za stvaranje interaktivnog web sučelja za korisnika.

Ova publikacija je prijevod članka "Uvod u jQuery" koji je pripremio prijateljski projektni tim

Dobar loš

jQuery brzo postaje vještina koju moraju imati front-end programeri. Cilj ove knjige je pružiti pregled jQuery JavaScript biblioteke. Nakon što dovršite ovo čitanje, trebali biste biti u mogućnosti riješiti osnovne probleme s jQueryjem i imati čvrstu osnovu za nastavak učenja. Ova knjiga je bila namijenjena za korištenje u učionici, ali bi vam mogla biti korisna i za samostalno učenje.

to praktični vodič... Provest ćemo malo vremena opisujući koncepte, a onda ćete imati priliku raditi kroz vježbu vezanu za taj koncept. Neke od vježbi mogu izgledati primitivne, dok su druge, naprotiv, potpuno zastrašujuće. Ovdje ionako nema evaluacija, cilj je jednostavan - da vam bude udobno hodati kroz probleme koje jQuery obično rješava. Primjer rješenja za sve vježbe uključen je u uzorak koda.

Dobivanje koda

Kod koji ćemo koristiti u ovoj knjizi nalazi se u GitHub repozitoriju. Možete preuzeti .zip ili .tar datoteku, a zatim je raspakirati za korištenje na svom poslužitelju. Ako ste git manijak, uvijek možete klonirati ili forkirati spremište.

Programi

Da biste dovršili većinu tutorijala, trebat će vam sljedeći alati:

• Firefox preglednik
• Proširenje Firebug za Firefox
• Jednostavan uređivač teksta
• Za Ajax: lokalni poslužitelj(kao što su MAMP ili WAMP) ili FTP klijent ili SSH za pristup udaljenom poslužitelju.

Dodavanje JavaScripta na stranicu

JavaScript se može dodati izravno u dokument ili kao vanjska datoteka putem oznake

Primjer 1.2. Vanjski JavaScript

Otklanjanje pogrešaka u JavaScriptu

Alat za otklanjanje pogrešaka bitan je u razvoju JavaScripta. Popularni program za ispravljanje pogrešaka za Firefox je Proširenje Firebug; Safari i Chrome pružaju ugrađene konzole.

Svaka konzola nudi:

• jednoredni i višeredni uređivači za eksperimentiranje s JavaScriptom;
• inspektor za pregled generiranog izvorni kod stranice;
• Kartice Mreža i Resursi za ispitivanje mrežnih zahtjeva.

Kada pišete JavaScript kod, možete ga koristiti slijedećim metodama za slanje poruka na konzolu:

• konzola.log () za općenite poruke;
• console.dir () za objekte preglednika;
• console.warn () za upozorenja;
• console.error () za pogreške.

Dostupne su i druge metode konzole, iako se mogu razlikovati različitim preglednicima... Osim toga, konzole pružaju mogućnost ugradnje kontrolne točke i kod za praćenje za potrebe otklanjanja pogrešaka.

Vježbe

Većina poglavlja u ovoj knjizi sadrži jednu ili više vježbi. Za neke ćete vježbe moći raditi izravno u Firebugu, za druge ćete morati uključiti skripte nakon jQueryja, kao što je navedeno u zasebnim vježbama.

U nekim slučajevima morat ćete konzultirati jQuery dokumentaciju kako biste dovršili vježbu, jer nisu sve relevantne informacije navedene u knjizi. Knjižnica jQuery je velika i pronalaženje odgovora u dokumentaciji važan je dio procesa učenja.

Evo nekoliko savjeta za rješavanje takvih problema:

• Prvo, provjerite jeste li u potpunosti razumjeli problem koji se od vas traži da riješite.
• Zatim saznajte koje stavke trebate za rješavanje problema i odredite kako ćete te predmete nabaviti. Upotrijebite Firebug da provjerite jesu li stavke primljene.
• Konačno, shvatite što trebate učiniti s tim elementima da biste riješili problem. Ovo može biti korisno za dodavanje komentara koji objašnjavaju što ćete učiniti prije pisanja koda.

Ne bojte se pogriješiti! Ne pokušavajte svoj kod učiniti savršenim prvi put! Pogriješiti i eksperimentirati s rješenjima dio je učenja knjižnice i to ćete postati najbolji programer... Primjeri rješenja za ove vježbe nalaze se u mapi / rješenja.

Referentni materijal

Postoji mnogo članaka i blogova koji posebno gledaju na jQuery. Neki od njih su izvanredni, neki su pogrešni. Kada čitate članak o jQueryju, provjerite stoji li u njemu ista verzija koju koristite. Oduprite se iskušenju da jednostavno kopirate i zalijepite kôd - odvojite vrijeme da ga proučite.

Evo nekoliko sjajnih resursa s kojima se možete upoznati dok učite jQuery. Najvažnija od njih je sama stranica jQuery: ona sadrži kompletnu dokumentaciju knjižnice u obliku koda. Ovo nije crna kutija – vaše će razumijevanje knjižnice eksponencijalno rasti kako budete odvajali vrijeme da je posjećujete iznova i iznova. I toplo preporučam da web-lokaciju označite u svom pregledniku i da se na nju stalno pozivate.

Ovom publikacijom odlučio sam otvoriti seriju članaka za one koji žele savladati jQuery framework. Kao i uvijek, nastojat ću biti kratak i dati što više primjera. Sljedeći članci se u načelu mogu smatrati besplatnim prijevodom dokumentacije s http://docs.jquery.com.

Dakle, odlučili ste savladati jQuery, odakle početi? Naravno, već ste upoznati s JavaScriptom, inače se ne biste odlučili. Što je još korisno znati za bolje razumijevanje ovog čarobnog okvira:

• CSS selektori (možete ga vidjeti)
• XPath (možete ga vidjeti)

Na prvi pogled veza nije očita, ali činjenica je da u srcu funkcioniranja jQueryja leži mogućnost lak pristup na bilo koji čvor xml stabla, što je html dokument, a taj se pristup provodi pomoću mehanizama

CSS i XPath. Stoga, ako su vam ovi koncepti poznati, onda smatrajte da ste već 50% upoznati s jQueryjem, a ako ne, sve je u vašim rukama.

Dakle, za početak bi bilo lijepo naučiti kako dobiti bilo koji element koji nam je potreban na stranici ili grupu elemenata odabranih prema određenom kriteriju:

$ ("div") // svi divovi na stranici $ ("div: first") // samo prvi div $ ("div: last") // samo zadnji $ ("div: even") // sve parni div "s $ (" div.myclass ") // div ima klasu =" myclass "$ (" # mydiv ") // element s id =" mydiv ", ne nužno div $ (" unos: tekst ") / / svi elementi unosa s tipom = "text" $ ("input: checkbox: checked") // svi potvrdni okviri s označenim = true $ ("div", "#myid") // svi divovi koji se nalaze u spremniku s id = "myid" $ ("div.myclass img") // img, koji je u div "e s class =" myclass "$ (" div.myclass, div.my2 ") // div" s s class = "myclass" i class = "my2"

Popis se može nastaviti još dugo, ali za to postoji dokumentacija (srećom, jQuery ima izvrsnu dokumentaciju, s primjerima i bez nepotrebnog škrabanja), a sada pokušavamo razumjeti bit pitanja. Znatiželjno oko odmah je skrenulo pozornost na konstrukciju $ () u svakom primjeru. Što je? Ovo je funkcija: ime je $ (je li zabranjeno?), I u zagrade- opcije. Sada postaje jasno čemu služe CSS i XPath - njihove konstrukcije djeluju kao parametri za odabir.

Funkcija $ temelj je jQueryja, nekako se poziva svim svojim metodama. Ako je to funkcija, onda može nešto vratiti. I vraća samo niz elemenata odabranih iz dokumenta na temelju zadane parametre, onda.

Var tmp = $ ("div"); // možete dodijeliti vrijednost upozorenja (tmp.length) // i vidjeti broj elemenata niza

Elementi zadani niz može se manipulirati:

$ ("div"). not (". red") // svi divovi, osim onih koji imaju klasu "red", // to jest, ne samo class = "red", već i class = "myclass red" $ ("span.green"). add ("span.gray") // in u ovom slučaju// identično $ ("span.green, span.gray"), // ali ponekad ne možete bez dodavanja $ ("div"). filter (". red,: first") // odabire sve dive , a zatim odabire // prvi od njih i s klasom red

V ovaj primjer osim operacija na odabiru elemenata, naučili ste i o jQuery metodama i kako ih koristiti. Metode se nazivaju točkastim i primjenjuju se na niz nakon kojeg su pozvane. Metode vraćaju novi ili izmijenjeni niz. Broj poziva metoda nije ograničen.

$ ("div") // vratio sve div "s. ne (". red ") // izrezao div" s klasom red i vratio ostatak. add ("span.green") // dodao span "s u odabir s klasom green .addClass ("myclass") // dodana klasa myclass svakoj stavci u selekciji.removeAttr ("title") // uklonjena atribut naslova za svaki element odabira (ako postoji)

Metode se izvode redoslijedom kojim se pozivaju (osim ajax metodečeka odgovor poslužitelja) s lijeva na desno. Ovo se može koristiti za slobodno kretanje na DOM stablo:

evo teksta

ovaj tekst će biti uklonjen

ali ovaj nije

del

$ ("# myid"). kliknite (funkcija () ($ (ovo) .parent (). prev (). prev (). prazno ();)); Mislim da nazivi metoda u prethodnom primjeru govore sami za sebe; o njima će se detaljnije raspravljati u odgovarajućem članku.

Pa to je vjerojatno sve osnovno – biraj potrebni element(ili grupa) i nastupaju nad njim potrebne radnje(pročitajte da biste primijenili željenu metodu). Jednostavno, kako je sve genijalno! Na temelju ove dvije jednostavne stvari jQuery ima vlastiti fleksibilni mehanizam za rukovanje događajima i ajax interakciju s poslužiteljem, težak skup vizualni efekti i mnogo više. Pokušat ću sve to istaknuti u narednim publikacijama.

Zadnje ažuriranje: 1.11.2015

Što je jQuery

Moderno web programiranje i izradu web stranica više nije moguće zamisliti bez upotrebe JavaScripta. Međutim, danas se sve više koristi ne "goli" javascript kod dok javascript okviri i knjižnice. Jedna od tih knjižnica, i vjerojatno najpopularnija danas, je jQuery. Prema nekim procjenama, barem polovica najvećih internetskih stranica koristi ovu knjižnicu.

Iako jQuery možemo nazvati knjižnicom, on zapravo ujedinjuje cijeli ekosustav knjižnica izgrađen oko osnovne biblioteke: jquery.ui, koji se koristi za kreiranje vizualnih sučelja, i jqyery.mobile, koji se koristi pri razvoju mobilnih web-mjesta. itd.

Koje su prednosti korištenja jQueryja?

Pojednostavljenje rada s kodom... jQuery nudi jednostavnu, elegantnu sintaksu za manipulaciju elementima na web stranici.

Proširivost. Sav jQuery kod je otvoren za pregled i promjenu, a ako vam nešto u biblioteci ne odgovara, možete to modificirati. Također možete kreirati jQuery dodatke.

Kompatibilnost s više preglednika... jQuery ima podršku za većinu poznati preglednici, uključujući i one. poput IE 7.8. (Iako zbog činjenice da preglednici IE 6-8 postupno postaju povijest, kao i zbog smanjenja veličine biblioteke u posljednjoj verziji, podrška za IE 6-8 je odbačena).

Uključujući jQuery biblioteku

Da bismo počeli raditi s ovom bibliotekom, prvo je moramo učitati. Možete ga pronaći na službenoj web stranici programera https://jquery.com/download/. Na samoj stranici za preuzimanje možete pronaći nekoliko verzija jQueryja. U trenutku pisanja ovog teksta, najnovija dostupna verzija je 2.0.3. Iako se verzije neznatno razlikuju jedna od druge, te razlike obično nisu toliko značajne, a osnovna šipka i generalni principi većina verzija je u biti ista.

Knjižnica je predstavljena u dvije verzije - komprimiranoj ili modificiranoj (minimiziranoj) i nekompresiranoj (normalno). Minimizirane verzije pružaju istu funkcionalnost kao i obične verzije, ali se razlikuju po tome što ne sadrže nikakve neobavezne znakove kao što su razmaci, komentari itd., te stoga imaju min sufiks u svom nazivu, na primjer, jquery-1.10.1.min.js... Budući da su zbog manjeg volumena produktivniji, preporučuju se za korištenje u stvarnoj proizvodnji. Istovremeno, ako želite razumjeti logiku jQuery koda, tada se u ovom slučaju možete pozvati na redovna verzija knjižnice.

Knjižnica Jquery uključena je na isti način kao i druge javascript datoteke... Na primjer:

U ovom slučaju koristio sam minimiziranu verziju jquery biblioteke, jquery-1.10.1.min.js. Sada napravimo jednostavnu web stranicu koristeći jquery:

Dobrodošli u svijet jQueryja

jQuery JavaScript

Ova web stranica, s jedne strane, koristi jquery kod, s druge strane također pokazuje razliku u odnosu na korištenje standardnog javascript koda.

Na stranici imamo definirana dva gumba. Jedan gumb ima onclick handler definiran u samoj oznaci gumba: onclick = "alert (" JavaScript world ");.

Drugi gumb radi gotovo istu stvar, ali samo s jqueryjem. Za ovaj gumb definiran je id (id = "btn1") preko kojeg se ulazi jquery funkcije mi ćemo to upravljati.

Na samom dnu stranice definirat ćemo jquery funkciju:

$ (funkcija () ($ ("# btn1"). kliknite (funkcija () ($ (ovo) .css ("boja pozadine", "crvena"); upozorenje ("jQuery World");));) );

Izraz $ (funkcija () ()); - To je ono što je kratka definicija jquery funkcije. Ova se funkcija obično nalazi na kraju dokumenta, kao u ovom slučaju, prije zatvaranja oznaka tijela. Ova funkcija uključuje sav kod na javascript jezik koji će se izvršiti prilikom učitavanja stranice.

Poanta korištenog koda je da dobijemo element gumba u izrazu $ ("# btn1"), a zatim na njega objesimo rukovao klikom. Zapravo, izraz $ ("# btn1"). Klik će biti isti kao i korištenje onclick rukovatelja u tijelu oznake gumba. Istodobno, ne trebamo ni na koji način mijenjati oznaku samog gumba, dodati nešto tamo. Sve se radi u jquery funkciji.

Što to uključuje u našem slučaju? Prvo postavljamo boju gumba: $ (ovo) .css ("boja pozadine", "crvena"); ... A onda samo prikazujemo poruku na ekranu.

Korištenje CDN-ova

U prethodnom primjeru povezao sam biblioteku jquery izravno s lokalnog diska, međutim, ne moramo učitavati biblioteku i stavljati je na lokalni disk pored drugih datoteka. Umjesto toga, možemo koristiti CDN-ove (mreže za isporuku sadržaja). U ovom slučaju, sama knjižnica će se fizički nalaziti na nekom CDN-u i možemo pokazati na poveznicu na nju.

Na primjer, uključimo jquery biblioteku koja se nalazi u jQuery CDN-u:

Nije potrebno uključiti ovu konkretnu verziju biblioteke, cijeli skup dostupnih verzija knjižnice može se pronaći na https://code.jquery.com/

Također možemo koristiti druge CDN-ove. Na primjer:

Google CDN: osigurano od Googlea... Sve dostupne verzije možete pronaći na https://developers.google.com/speed/libraries/devguide?hl=en#jquery.

Microsoft CDN: osiguran od strane Microsofta... Sve dostupne verzije mogu se pronaći na https://www.asp.net/ajaxlibrary/cdn.ashx#jQuery_Releases_on_the_CDN_0.

Format veze bit će sljedeći:

Yandex CDN: osigurano ruska tvrtka Yandex. Sve dostupne verzije možete pronaći na