jQuery osnove. Uvod u jQuery

Sigurno ste čuli za divnu Javascript biblioteku zvanu jQuery. Šta je zapravo jQuery?

Kako olakšati život web programeru? Gdje početi? jQuery piše Javascript zanimljiv i jednostavnije. Sa ovom bibliotekom, mnogi prilično složeni aspekti Javascript-a mogu se lako implementirati u bilo koju aplikaciju.

Današnji vodič će vam pokazati kako da počnete sa jQueryjem i kako napisati svoju prvu skriptu.

Šta je jQuery?

jQuery je vrlo lagana Javascript biblioteka (neki je nazivaju okvirom) koja otklanja glavobolju pisanja Javascript koda. Ona ima puno moćne karakteristike, kao što su: DOM praćenje, dodavanje prelepi efekti i animacije elemenata, super jednostavne Ajax tehnike i metode. Na glavnoj stranici jQuery stranice, najtačniji opis, po mom mišljenju, glasi:

jQuery je brza i koncizna biblioteka koja pojednostavljuje rukovanje događajima, animaciju i Ajax interakciju za više brzi web razvoj. jQuery je dizajniran za promjenu metoda pisanje JavaScripta kod.

Koje su prednosti jQueryja?

Hajde da ukratko pređemo na neke od prednosti i karakteristika ovog okvira:

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

Mnogo je lakše razumjeti kod (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 pomoći ako je potrebno.

Korištenje Ajaxa postaje mnogo lakše. Potrebno vam je samo 5 linija koda (ponekad manje) da kreirate jednostavan Ajax zahtjev.

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

jQuery je zabavan :)

Kako početi?

Prije svega, morate posjetiti početna stranica jQuery službena web stranica i preuzmite najnoviju verziju ovog okvira. Nakon preuzimanja, potrebno je da otpremite ovu datoteku na svoj hosting i u zaglavlju dokumenta upišete vezu do ove datoteke.

Alternativno, možete iskoristiti pomoć odličnog Google-a i staviti link na njihov server, gdje su oni uvijek svježe verzije bilo koji okvir. Možete pronaći link koji vam je potreban.

Da li je dokument spreman?

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

$(document).ready(function()( //Kod ovdje));

Iznad kažemo jQueryju da izvrši bilo koji kod unutar funkcije, kada je DOM potpuno spreman.To ima svoje prednosti, iako mnogima možda nije jasno. Prije svega, korištenje ovu tehniku, potpuno odvajamo Javascript od HTML-a. Drugo, ne moramo čekati puno opterećenje stranicu, dovoljno je učitavanje DOM-a.

Za lijene kodere, ili za one koji imaju svaki broj znakova, možete dodatno skratiti gornji kod:

$(function()( //Kod ovdje));

Vaša prva jQuery skripta

Već znamo kako da referenciramo biblioteku. Također imamo malo razumijevanja o funkciji document.ready. Sada je vrijeme da napišete najjednostavniji skript.

Učinimo to što jednostavnijim. Za ovaj primjer, napravimo stranicu s tekstom i citatom na kraju. Želimo prikazati ponudu samo ako korisnik klikne na dugme. U nastavku pogledajte potreban kod:

$(document).ready(function()(
var myQuote = $("#my_quote");
myQuote.hide();
$(".button").click(function()(
myQuote.show(500);
});
});

Pogledajmo detaljnije cijeli kod.

Kao što je gore spomenuto, sav kod koji treba izvršiti stavljamo unutar funkcije $document.ready().

Mi dodjeljujemo id našeg citata (my_quote) varijabli myQuote. Sada imamo pristup citatu sa ID-om my_quote.

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

Nastavlja se....

Hvala vam na pažnji! Sve najbolje!

05.03.17. 1.2K

Uvod

jQuery HTML je biblioteka dizajnirana da " pišite manje a radite više". To nije programski jezik, već alat koji se koristi za pojednostavljenje implementacije. zajednički zadaci JavaScript.

jQuery ima dodatna prednost — kompatibilnost sa različitim pretraživačima. Možete biti sigurni da će vaš kod biti protumačen u bilo kojem modernom pretraživaču.

Upoređivanje pisanja jednostavnog programa " Zdravo svijete!" Sa JavaScript i jQuery, možete vidjeti razliku između njih.

JavaScript

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

jQuery

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

Ovo kratak primjer ilustruje kako jQuery možete dobiti isti rezultat kao sa standardnim JavaScriptom, ali sažetije.

Ciljevi

Ovaj vodič ne pretpostavlja osnovno poznavanje jQueryja, ali pokriva sljedeće teme:

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

jQuery podešavanje

jQuery je JavaScript datoteka na koju ćete se pozivati ​​u dokumentu. Kako uključiti jQuery u HTML:

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

Bilješka. Mreža za isporuku sadržaja ( CDN) je sistem od nekoliko servera koji korisniku pružaju web sadržaj u zavisnosti od njegove geografske lokacije. Kada dodate link na jQuery fajl preko CDN-a, on će biti dostavljen korisniku brže i efikasnije nego da je hostovan na vašem serveru.

Za naše primjere, povezivat ćemo se sa jQuery putem CDN-a. najnoviju verziju jQuery se može naći na Google-u. Ako umjesto toga želite preuzeti biblioteku, možete nabavite kopiju jQueryja na službenoj stranici.

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

Postavite glavnu HTML oznaku i sačuvajte je na index.html.

index.html

index.html

JavaScript skripta ( scripts.js) mora biti uključen u dokument ispod jQuery biblioteke ili neće raditi.

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

Biblioteka jQuery je dodana u HTML i mi jesmo pun pristup na jQuery API.

Koristeći jQuery

jQuery se koristi za povezivanje sa HTML elementima u pretraživaču preko DOM-a.

Model objekta dokumenta ( DOM) je metoda pomoću koje JavaScript (i jQuery) interakciju sa HTML-om u pretraživaču. Da vidite šta je DOM, kliknite u pretraživaču desni klik miša na trenutnoj web stranici i odaberite Prikaži kod. Ovo će otvoriti " Alati za programere". HTML koji vidite u njemu je DOM.

Svaki HTML element broji DOM čvor- objekt kojem JavaScript može pristupiti. Ovi objekti imaju strukturu stabla u kojoj je element je najbliži korijenu, a svaki je grana drveta. JavaScript može dodati, ukloniti i promijeniti bilo koji od ovih elemenata.

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

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

Kreirajte datoteku scripts.js u folderu js/ i dodajte mu sljedeći kod:

js/scripts.js

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

Za pokretanje skripte " Zdravo svijete!" i prikažite tekst u pretraživaču koristeći jQuery, prvo kreirajte prazan element pasusa na koji je primijenjen id demo.

index.html

... ...

jQuery se poziva i označava znakom dolara ($). DOM-u pristupamo pomoću jQueryja koristeći css sintaksa, i primijeniti akciju s metodom:

$("selektor").method();

Pošto je identifikator u CSS-u označen simbolom (#), pristupamo demo identifikatoru koristeći #demo selektor. html() je metoda koja mijenja HTML oznaku unutar elementa.

Sada ćemo staviti program " Zdravo svijete!» unutar omotača jQuery ready(). Dodajte ovu liniju postojećoj funkciji u datoteci scripts.js:

js/scripts.js

$(document).ready(function() ( $("#demo").html("Halo, World!"); ));

Nakon što sačuvate promjene, možete otvoriti datoteku index.html u pretraživaču. Ako sve radi kako treba, vidjet ćete natpis " Zdravo svijete!»

Desni klik na " Zdravo svijete!" i odaberite "Prikaži kod". Sada prikazano u DOM-u

Zdravo svijete!

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

Selektori

Selektori su ono što koristimo da specificiramo jQuery HTML sa kojim elementima želimo da radimo. Možete pogledati puna lista jQuery selektori u službenoj dokumentaciji.

Da biste pristupili selektoru, koristite znak $ nakon kojeg slijede zagrade ().

$("selektor")

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

Ispod je kratka recenzijačesto korišteni selektori.

• $(«*») — divlja karta : odabire svaki element na stranici;
• $(this) - trenutni : odabire trenutni element kojim se upravlja ovog trenutka unutar funkcije;
• $("p") - oznaka: odabire sve instance oznake

  ;

• $(".example") - klasa : odabire sve elemente na koje se primjenjuje primjer klase;
• $("#example") - id : odabire jednu instancu sa jedinstvenim primjerom ID-a;
• $("") - atribut: odabire sve elemente u atribut tipa koji je postavljen na tekst;
• $("p:first-of-type") - pseudo-element : odabire prvi element

  .

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

jQuery događaji

U primjeru " Zdravo svijete!» Kôd je pokrenut kada je stranica učitana i dokument je bio spreman, tako da nije zahtijevao interakciju korisnika. U ovom slučaju bismo mogli napisati tekst direktno u HTML-u, bez jQueryja. Ali moraćemo da koristimo jQuery ako želimo da se tekst prikaže na stranici nakon klika mišem.

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

index.html

...

klikni me

Koristimo metodu click() da pozovemo funkciju koja sadrži kod "Hello, World! ".

js/scripts.js

$(document).ready(function() ( $("#trigger").click(); ));

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

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

Evo kompletan kod jQuery HTML element.

js/scripts.js

$(document).ready(function() ( $("#trigger").click(function() ( $("#demo").html("Hello, World!"); )); ));

Sačuvajte datoteku scripts.js i ažurirajte index.html u pretraživaču. Sada kada kliknete na dugme, ispisuje se tekst " Zdravo svijete!«.

Događaj je svaka interakcija korisnika sa pretraživačem pomoću miša ili tastature. Primjer koji smo upravo kreirali koristi događaj klika. U službenoj jQuery dokumentaciji možete pronaći kompletna lista jQuery metoda događaja. Ispod je lista često korištenih događaja.

• click() - klik : javlja se kada se napravi jedan klik mišem;
• lebdjeti() - lebdjeti: javlja se kada je pokazivač miša iznad elementa;
• submit() - submit : javlja se kada se podaci obrasca predaju;
• scroll() - pomicanje : javlja se kada se stranica ili element pomiče;
• keydown() - tipka dolje : javlja se kada se pritisne tipka na tastaturi.

Metoda scroll() se koristi za prikaz elemenata sa animacijom ili za njihovo uklanjanje kada korisnik skroluje stranicu.

Za izlazak iz menija sa ESC tasteri, koristi se metoda keydown(). Da biste kreirali padajući meni ili dodali HTML u div koristeći jQuery, koristite metodu click().

jQuery efekti

jQuery efekti vam omogućavaju da na neki način dodate animacije i elemente kontrole na stranicu.

V sljedeći primjer kreiraćemo iskačući prozor i sakriti prozor. Mogli bismo koristiti dva identifikatora - jedan za otvaranje prozora i drugi za njegovo zatvaranje, ali ćemo koristiti klasu za otvaranje i zatvaranje prozora koristeći istu funkciju.

Izbriši postojeće oznake i

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

index.html

otvoren zatvori

U datoteci style.css, koristićemo minimalni CSS da sakrijemo preklapanje sa display: none i centriramo ga na ekranu.

css/style.css

Overlay (prikaz: nema; pozicija: fiksna; vrh: 50%; lijevo: 50%; transformacija: translate(-50%, -50%); visina: 200px; širina: 200px; pozadina: siva; )

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

js/scripts.js

$(document).ready(function() ( $(".trigger").click(function() ( $(".overlay").toggle(); )); ));

Nakon povezivanja JQueryja sa HTML-om, ažurirajte datoteku index.html. Sada možete promijeniti vidljivost iskačućeg prozora klikom na dugme miša. Metodu toggle() možete zamijeniti fadeToggle() ili slideToggle() da biste osigurali druge ugrađene jQuery efekte.

Ispod je lista najčešće korištenih efekata:

• toggle() : Prebacuje vidljivost elementa ili elemenata. show() i hide() - postavite efekte istog tipa;
• fadeToggle() - prekidač fade: Uključuje vidljivost i postavlja animaciju neprozirnosti elementa ili elemenata. fadeIn() i fadeOut() su povezani jednosmjerni efekti;
• slideToggle() - prebacuje vidljivost elementa ili elemenata sa efektom projekcije slajdova. slideDown() i slideUp() - postavite efekte istog tipa;
• animate() - Izvodi prilagođene efekte animacije na CSS svojstvu elementa.

Koristimo jQuery događaji za praćenje interakcija korisnika kao što su pritiskanje tipki na tastaturi, a koristimo jQuery efekte za daljnju obradu elemenata kada se ta interakcija dogodi.

Zaključak

U ovom vodiču naučili ste kako odabrati jQuery elementi HTML i upravljajte njima, kao i načinom na koji događaji i efekti funkcionišu, kako biste kreirali interaktivni web interfejs za korisnika.

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

Dobro loše

jQuery brzo postaje neophodna vještina za front-end programere. Svrha ove knjige je da pruži pregled jQuery JavaScript biblioteke. Dok završite sa čitanjem, trebali biste biti u mogućnosti da obavljate osnovne zadatke s jQueryjem i imati čvrstu osnovu za nastavak učenja. Ova knjiga je zamišljena kao materijal za učionicu, ali vam može biti korisna i za samostalno učenje.

Ovo praktični vodič. Provešćemo malo vremena u opisivanju koncepata, a zatim ćete imati priliku da proradite kroz vežbu vezanu za taj koncept. Neke od vježbi mogu izgledati primitivne, dok su druge, naprotiv, potpuno zastrašujuće. U svakom slučaju, ovdje nema ocjena, cilj je jednostavan - da vam bude udobno na putu kroz probleme koji se obično rješavaju jQuery-jem. Primjer rješavanja svih vježbi uključen je u uzorak koda.

Dobivanje koda

Kod koji ćemo koristiti u ovoj knjizi nalazi se u GitHub repozitorijumu. Možete preuzeti .zip ili .tar datoteku, a zatim je raspakovati da biste je koristili na svom serveru. Ako ste git manijak, uvijek možete klonirati ili forkirati spremište.

Programi

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

• Firefox pretraživač
• Firebug ekstenzija za Firefox
• Jednostavan uređivač teksta
• Za Ajax: lokalni server(kao što su MAMP ili WAMP) ili FTP klijent ili SSH za pristup udaljenom serveru.

Dodavanje JavaScripta na stranicu

JavaScript se može dodati direktno u dokument ili kao eksterni fajl preko oznake

Primjer 1.2. Eksterni JavaScript

Otklanjanje grešaka u JavaScriptu

Alat za otklanjanje grešaka je neophodan u razvoju JavaScripta. Za Firefox, popularan debuger je firebug ekstenzija; Safari i Chrome pružaju ugrađene konzole.

Svaka konzola nudi:

• jednoredni i višeredni uređivači za eksperimentisanje sa JavaScript-om;
• inspektor za pregled generiran izvorni kod stranice;
• Kartice Mreža i Resursi za istraživanje mrežnih zahtjeva.

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

• console.log() za opšte poruke;
• console.dir() za objekte pretraživača;
• console.warn() za upozorenja;
• console.error() za greške.

Dostupne su i druge metode konzole, iako se mogu razlikovati ovisno o tome različitim pretraživačima. Osim toga, konzole pružaju mogućnost ugradnje kontrolne tačke i kod za praćenje za potrebe otklanjanja grešaka.

Vježbe

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

U nekim slučajevima, moraćete da pogledate jQuery dokumentaciju da biste dovršili vežbu, jer nisu sve relevantne informacije date u knjizi. jQuery biblioteka je velika i pronalaženje odgovora u dokumentaciji je važan dio procesa učenja.

Evo nekoliko savjeta za rješavanje takvih problema:

• Prvo, uvjerite se da u potpunosti razumijete problem koji se od vas traži da riješite.
• Zatim shvatite koje stavke su vam potrebne da riješite problem i odredite kako ćete ih nabaviti. Koristite Firebug da provjerite da li su elementi primljeni.
• Konačno, shvatite šta trebate učiniti s ovim elementima da biste riješili problem. Ovo može biti korisno za dodavanje komentara koji objašnjavaju šta ćete uraditi prije pisanja koda.

Ne plašite se da pogrešite! Ne pokušavajte da kod bude savršen prvi put! Pravljenje grešaka i eksperimentisanje sa rješenjima dio je učenja biblioteke i to ćete i postati najbolji programer. Primeri rešenja za ove vežbe nalaze se u fascikli /solutions.

Referentni materijal

Postoji mnogo članaka i blogova koji pružaju poseban pogled na jQuery. Neki od njih su izvanredni, neki su pogrešni. Kada čitate članak o jQueryju, uvjerite se da se odnosi na istu verziju koju koristite. Oduprite se iskušenju da samo kopirate i zalijepite kod - odvojite vrijeme da ga proučite.

Evo nekoliko sjajnih resursa za početak dok učite jQuery. Najvažnija od njih je sama stranica jQuery: ona sadrži kompletnu dokumentaciju biblioteke u obliku koda. Ovo nije crna kutija - vaše razumijevanje biblioteke će rasti eksponencijalno ako budete provodili vrijeme posjećujući je iznova i iznova. I toplo preporučujem da web lokaciju dodate u markere pretraživača i da je stalno koristite.

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

Dakle, odlučili ste da naučite jQuery, odakle početi? Naravno, već ste upoznati sa JavaScriptom, inače se ne biste odlučili. Šta je još korisno znati za bolje razumijevanje ovog magičnog okvira:

• CSS selektori (pogledajte ovdje)
• XPath (vidi )

Na prvi pogled veza nije očigledna, ali činjenica je da se jQuery zasniva na mogućnosti lak pristup na bilo koji čvor u xml stablu, što je html dokument, a ovaj pristup se vrši pomoću mehanizama

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

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

$("div") // svi divovi na stranici $("div:first") // samo prvi div $("div:last") // samo posljednji $("div:even") // svi parni div"s $("div.myclass") // div koji ima class="myclass" $("#mydiv") // element sa id="mydiv", ne nužno div $("input:text") / / svi elementi unosa sa type="text" $("input:checkbox:checked") // svi potvrdni okviri sa checked=true $("div", "#myid") // svi divovi u kontejneru sa id= "myid" $("div.myclass img") // img koji je u div" sa class="myclass" $("div.myclass, div.my2") // divovi koji imaju class= "myclass" i klasu ="my2"

Lista se može nastaviti još dugo, ali za to postoji dokumentacija (srećom, jQuery ima odličnu dokumentaciju, sa primjerima i puno pisanja), a mi sada pokušavamo razumjeti suštinu problema. Radoznalo oko odmah je skrenulo pažnju na konstrukciju $ () u svakom primjeru. Šta je ovo? Ovo je funkcija: ime je $ (je li zabranjeno?), i in zagrade- parametri. Sada postaje jasno zašto su CSS i XPath potrebni - njihove konstrukcije djeluju kao parametri za uzorkovanje.

Funkcija $ je osnova jQueryja, a pozivaju je na ovaj ili onaj način sve njene metode. Ako je to funkcija, onda može nešto vratiti. I vraća samo niz elemenata odabranih iz dokumenta na osnovu postaviti parametre, onda.

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

Elementi dati niz može se manipulisati:

$("div").not(".red") // svi divovi osim onih sa klasom "red", // tj. ne samo class="red", već i class= "myclass red" $("span .green").add("span.gray") // in ovaj slučaj// identično sa $("span.green, span.gray"), // ali ponekad ne možete bez dodavanja $("div").filter(".red, :first") // odabire sve divove , ali zatim odabire // prvi od njih i sa crvenom klasom

V ovaj primjer Osim odabira elemenata, naučili ste i o jQuery metodama i kako ih koristiti. Metode se pozivaju kroz tačku i primjenjuju se na niz nakon kojeg su pozvane. Metode vraćaju novi ili izmijenjeni niz. Broj poziva metoda je neograničen.

$("div") //vratio sve div"s.not(".red") //povezao div"s klasom red i vratio rest.add("span.green") //dodao span"s u odabir sa klasom green .addClass("myclass") //dodao klasu myclass svakom elementu selekcije.removeAttr("title") //uklonjen atribut naslova za svaki element uzorka (ako postoji)

Metode se izvršavaju redoslijedom kojim se pozivaju (s izuzetkom ajax metode koji čekaju odgovor servera) s lijeva na desno. Ovo se može koristiti za slobodno kretanje on DOM stablo:

ovdje tekst

ovaj tekst će biti uklonjen

ali ovaj nije

del

$("#myid").click(function ()( $(this).parent().prev().prev().empty(); )); Mislim da nazivi metoda u prethodnom primjeru govore sami za sebe, o njima će se detaljnije govoriti u odgovarajućem članku.

Pa, možda, i sve osnove - izaberite željeni element(ili grupa) i proizvodi preko toga neophodne radnje(pročitajte primijeniti željenu metodu). Jednostavno, kao i sve genijalno! Na osnovu ova dva jednostavne stvari jQuery ima sopstveni fleksibilni mehanizam za rukovanje događajima i ajax interakciju sa serverom, značajan skup vizuelni efekti i mnogo više. Pokušat ću sve ovo obraditi u narednim publikacijama.

Posljednje ažuriranje: 1.11.2015

Šta je jQuery

Moderno web programiranje i razvoj web stranica više se ne mogu zamisliti bez upotrebe JavaScript jezika. Međutim, danas se sve više koristi ne "goli" javascript kod, ali javascript okviri i biblioteke. Jedna od ovih biblioteka, i vjerovatno najpopularnija danas, je jQuery. Prema nekim procjenama, najmanje polovina najvećih stranica na Internetu koristi ovu biblioteku.

Iako bismo jQuery mogli nazvati bibliotekom, to je zapravo koncept "jQueryja" koji okuplja čitav ekosistem biblioteka izgrađenih oko osnovne biblioteke: jquery.ui za izgradnju vizuelnih interfejsa, jqyery.mobile za razvoj mobilnih sajtova itd.

Koje su prednosti korištenja jQueryja?

Pojednostavljivanje koda. jQuery pruža jednostavnu, elegantnu sintaksu za manipulaciju elementima na web stranici.

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

Kompatibilnost među pretraživačima. jQuery ima većinsku podršku poznati pretraživači, uključujući ove. kao IE 7.8. (Iako zbog činjenice da pretraživači IE 6-8 postepeno postaju istorija, a takođe i zbog smanjenja veličine biblioteke, podrška za IE 6-8 je ukinuta u najnovijoj verziji).

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/. Možete pronaći nekoliko verzija jQueryja na samoj stranici za preuzimanje. U vrijeme pisanja ovog poglavlja, najnovija dostupna verzija je 2.0.3. Iako se verzije neznatno razlikuju jedna od druge, ove razlike obično nisu toliko značajne, a osnovni štap i opšti principi većina verzija je u suštini ista.

Biblioteka je predstavljena u dvije verzije - kompresovana ili modificirana (minimizirana) i nekompresovana (normalna). Minimizirane verzije pružaju istu funkcionalnost kao i obične verzije, ali se razlikuju po tome što ne sadrže nikakve neobavezne znakove poput razmaka, komentara, itd., te stoga imaju min sufiks u svom nazivu, na primjer, jquery-1.10.1.min.js. Budući da su produktivniji zbog manjeg obima, preporučuju se za upotrebu u stvarnoj proizvodnji. U isto vrijeme, ako želite razumjeti logiku jQuery koda, onda se u ovom slučaju možete pozvati na regularna verzija biblioteke.

jquery biblioteka je uključena na isti način kao i druge javascript fajlovi. 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.

Imamo dva dugmeta definisana na stranici. Jedno dugme ima onclick rukovalac definisan u samoj oznaci dugmeta: onclick="alert("JavaScript world"); " .

Drugo dugme radi skoro istu stvar, ali samo sa jquery. Ovo dugme ima id (id="btn1"), preko kojeg jquery funkcije mi ćemo to upravljati.

Na samom dnu stranice, definirat ćemo jquery funkciju:

$(function()( $("#btn1").click(function()( $(this).css("background-color", "red"); alert("jQuery world"); )); ) );

Izraz $(function()()); - To je ono kratka definicija jquery funkcije. Uobičajeno je da se ova funkcija stavi na kraj dokumenta, kao u ovom slučaju, prije zatvaranja oznaka tijela. Ova funkcija uključuje sav kod javascript jezik, koji će se izvršiti kada se stranica učita.

Značenje koda koji se koristi je da dobijemo element dugmeta u izrazu $("#btn1"), a zatim na njega okačimo rukovalac klikom. U stvari, izraz $("#btn1").click će biti isti kao i korištenje onclick rukovaoca u tijelu oznake gumba. U isto vrijeme, ne moramo ni na koji način mijenjati oznaku samog gumba, da bismo tamo nešto dodali. Sve se radi u jquery funkciji.

Šta to uključuje u našem slučaju? Prvo, postavljamo boju dugmeta: $(this).css("background-color", "red"); . A onda samo prikažite poruku na ekranu.

Korištenje CDN-ova

U prethodnom primjeru, uključio sam jquery biblioteku direktno s lokalnog diska, međutim, ne moramo preuzimati biblioteku i postavljati je na lokalni disk pored drugih fajlova. Umjesto toga, možemo koristiti CDN-ove (mreže za isporuku sadržaja). U ovom slučaju, sama biblioteka će se fizički nalaziti u nekoj CDN mreži i možemo ukazati na nju link.

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 biblioteke možete pronaći na https://code.jquery.com/

Možemo koristiti i druge CDN-ove. Na primjer:

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

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

Format veze će biti sljedeći:

Yandex CDN: obezbeđen Ruska kompanija Yandex. Sve dostupne verzije možete pronaći na