Primjer jQuerya. Jednostavan primjeri skripti na jQuery

jQuery je jаvascript knjižnica koja web programerima omogućuje dodavanje dodatnih značajki na njihove web stranice. Dostupan je s open sourceom i besplatan je uz licencu MIT-a. Posljednjih godina, jQuery je postao najpopularnija jаvascript biblioteka koja se koristi u razvoju web stranica.

Primjer JQuery

Da bi implementirali jQuery, razvojni programer web stranice trebao bi se pozvati na jаvascript datoteku u HTML kodu web stranice. Neke web lokacije imaju vlastitu lokalnu kopiju, a neke jednostavno povezuju s bibliotekom hostiranom od strane Googlea ili poslužitelja. Na primjer, web stranica može učitati biblioteku jQuery pomoću sljedećeg retka u odjeljku HTML (primjer jQuery i kolačić):

JQuery i Ajax primjeri

Nakon učitavanja knjižnice, web stranica može nazvati bilo koju funkciju koju podržava knjižnica. Uobičajeni primjeri uključuju promjenu teksta, obrada obrasca podataka, premještanje stavki na stranici i izvođenje animacija. jQuery također može raditi s Ajaxovim kodom i skriptnih jezika, kao što su PHP i ASP, za pristup podacima iz baze podataka. Budući da jQuery radi na strani klijenta (a ne na web poslužitelju), može ažurirati podatke na web stranici u stvarnom vremenu bez ponovnog učitavanja stranice. Uobičajeni primjer je automatsko dovršavanje, u kojem obrazac za pretraživanje automatski prikazuje općenite podatke prilikom upisivanja upita.

Prednosti knjižnica

Uz besplatnu licencu, još jedan od glavnih razloga zašto je jQuery stekao takvu popularnost je njegova kompatibilnost između različitih preglednika. Budući da svaki preglednik prikazuje na različite načine HTML, CSS i jаvascript, web-razvojnom programeru može biti teško napraviti web stranicu iste u svim preglednicima. Umjesto pisanja prilagođenih funkcija za svaki preglednik, web programer može koristiti jednu funkciju jQuery koja će funkcionirati u pregledniku Chrome, Safari, Firefox i Internet Explorer. Podrška za više preglednika prisilila je mnoge programere da se presele iz standardnog jаvascript na jQuery, jer to uvelike pojednostavljuje postupak kodiranja.

opis

JQuery sintaksa koristi se za pojednostavljenje navigacije dokumenta, odabir DOM elemenata, stvaranje animacija, procesnih događaja i razvoj aplikacija Ajax. jQuery također pruža programerima mogućnost stvaranja dodataka na vrhu jаvascript knjižnice. To omogućuje programerima stvaranje apstraktnih struktura za interakciju i animaciju na niskoj razini, napredne efekte i tematske widgete na visokoj razini. Modularni pristup knjižnici jQuery omogućuje stvaranje snažnih dinamičkih web stranica i web aplikacija.

Skup osnovnih funkcija:

• odabir DOM elemenata;
• izbjegavanje i manipuliranje uz pomoć mehanizma za odabir;
• novi stil programiranja;
• algoritmi za spajanje i strukture podataka DOM.

Stil je utjecao na arhitekturu ostalih jаvascript okvira, kao što su YUI v3 i Dojo, a potaknuli su i stvaranje standardnog API izbornika.

Microsoft i Nokia opskrbljuju jQuery na svojim platformama. Microsoft ga uključuje s Visual Studio za korištenje s ASP.NET AJAX i ASP.NET MVC, a Nokia je integriran u razvojnu platformu Web Time Widget.

pregled

jQuery je knjižnica elemenata s modelom objektnih dokumenata (DOM). DOM je prikaz strukture stabla svih elemenata web stranice. jQuery pojednostavljuje sintakse za pretraživanje, odabir i upravljanje tim DOM elementima. Knjižnica se može koristiti za traženje stavke u dokumentu s određenim svojstvom (na primjer, svi elementi s h1 oznakom), promjenu jednog ili više njegovih atributa (boja, vidljivosti) ili prihvaćanje odgovora na događaj (na primjer, klikom miša).

dizajn

Knjižnica koristi takve popularne jаvascript funkcije kao što je fade ins i fade out kada skrivaju elemente, animiranje i rad s jQuery CSS elementima. jQuery također pruža paradigmu za rukovanje događajima koje nadilaze odabir i manipuliranje DOM elementima. Svrha događaja i definicija funkcije povratnog poziva se izvode u jednom koraku na jednom mjestu u kodu.

Načela razvoja pomoću jQuery (primjeri):

• Odvajanje jаvascript i HTML knjižnica pruža jednostavnu sintaksu za dodavanje vodiča događaja u DOM pomoću jаvascript, a ne dodavanje atributa HTML događaja za pozivanje JS funkcija. Stoga potiče razvojne programere da potpuno odvoje jаvascript kôd od HTML oznaka.
• Kratkost i jasnoća - doprinosi kratkoročnosti i jasnoći s alatima kao što su lanci i skraćeni nazivi funkcija.
• Uklanjanje kompatibilnosti između preglednika - jаvascript motori različitih preglednika malo se razlikuju, pa JS kôd koji radi za jedan preglednik možda neće funkcionirati za drugi. Poput drugih jаvascript alata, jQuery rješava sve ove nedosljednosti među preglednicima i pruža dosljedno sučelje koje radi u različitim preglednicima.
• Proširivost - novi događaji, elementi i metode mogu se lako dodati, a zatim ponovno upotrijebiti kao dodatak.

priča

jQuery je izvorno objavljen u siječnju 2006. u BarCamp NYC-u od strane Johna Recig i bio je pod utjecajem rane cssQuery knjižnice Dean Edwards. Trenutno ga podržava razvojni tim kojeg vodi Timmy Willison (s motorom za odabir jQuery - Sizzleom, kojim upravlja Richard Gibson).

Značajke

Knjižnica uključuje sljedeće funkcije:

• odabir DOM elemenata pomoću mehanizma za više poslužitelja Sizzleovog izbornika otvorenog izvora;
• istaknuvši projekt DOM manipulacije na temelju CSS selektora koji koristi elemente i atribute, kao što su id i klasa, kao kriterije za odabir čvorova u DOM-u;
• događaji;
• efekti i animacije;
• ajax;
• objekti odgađani i obećavajući za kontrolu asinkronog procesiranja;
• raščlanjivanjem JSON-a;
• proširivost kroz dodatke;
• Uslužni programi, kao što su otkrivanje funkcija;
• metode kompatibilnosti koje su u početku dostupne u modernim preglednicima, ali trebaju ranije verzije, kao što su inArray () i svaki (), multi-preglednik (koji se ne smije miješati s unakrsnim preglednikom).

korištenje

JQuery knjižnica je jedna jаvascript datoteka koja sadrži sve zajedničke DOM funkcije, događaje, efekte i Ajax. Može se uključiti u web stranicu prema lokalnoj kopiji ili na jednom od višestrukih kopija dostupnih na javnim poslužiteljima. Knjižnica ima mrežu za isporuku sadržaja (CDN) koju čuva MaxCDN.

Primjer jQuerya u PHP-u:

stilovi

jQuery ima dva načina upotrebe:

1. Kroz funkciju $, koja je tvornička metoda za jQuery objekt. Te funkcije, koje se često nazivaju naredbe, su netaknute, jer sve vraćaju jQuery objekte.
2. Kroz $ - prefiks funkcije. To su servisne funkcije koje ne utječu izravno na objekt.

Pristupanje jQuery i upravljanje višestrukim DOM čvorovima obično počinje s funkcijom pozivanja $ pomoću niza CSS izbornik. Ovo vraća jQuery objekt koji se odnosi na sve relevantne elemente na HTML stranici.

Nepravilni način rada

jQuery uključuje način rada .noConflict () koji oslobađa kontrolu funkcije $. To je korisno ako se jQuery koristi s drugim bibliotekama koje također koriste $ kao identifikator. U načinu bez sukoba, razvojni programeri mogu koristiti biblioteku kao zamjenu za $ bez gubitka funkcionalnosti.

Napredna funkcionalnost

Funkcije povratnog poziva za rukovanje događajima na stavkama koje još nisu učitane mogu se registrirati u .ready () kao anonimne funkcije. Ti će rukovatelji biti pozvani samo kada se aktivira događaj. Na primjer, sljedeći kôd dodaje rukovatelj za klikanje na img element slike:

$ (funkcija () {

$ (`img`). na (`click`, function () {

// proces kliknite događaj na bilo koji img element na stranici

});

}).

Neke funkcije vraćaju određene vrijednosti (na primjer, $ (`# input-user-email`) Val ()). U tim slučajevima lanac ne radi jer se vrijednost ne odnosi na objekt jQuery.

Stvaranje novih stavki

Osim pristupa DOM čvorovima kroz hijerarhiju objekta, moguće je i stvaranje novih stavki ako je niz koji je prošao kao argument za $ () izgleda kao HTML. Na primjer, linija pronalazi element odabira HTML-a s ID karticama i dodaje element opcije VAG vrijednosti i Volkswagenovog teksta:

$ (`# select carmakes`)

.dodati ($ (`„)

.attr ({value: VAG})

.dodati (Volkswagen)).

komunalne usluge

JQuery funkcionira s prefiksom $ koji su korisne funkcije koje utječu na globalna svojstva i ponašanje. Sljedeći primjer upotrebljava svaku () funkciju, koja iterizira kroz polja:

$ .kako ([1,2,3], funkcija () {

console.log (to je + 1);

});

Ovaj primjer posta jQuery piše 2, 3, 4 na konzolu.

Ajax

Možete izvršiti Ajax zahtjeve unakrsnog preglednika koristeći $ .ajx () jQuery, što može biti primjer povezanih metoda za učitavanje i obradu daljinskog podataka:

$ .ajax ({

upišite: POST,

url: `/process/submit.php`,

podaci: {

ime: John,

mjesto: `Boston`,

}

}) učinjeno (funkcija (msg) {

upozorenje ("Spremljeno:" + msg);

}) fail (funkcija (xmlHttpRequest, statusText, errorThrown) {

obavijesti (

"Vaša poruka nije poslana. N n"

+`XML Http zahtjev:` + JSON.stringify (xmlHttpRequest)

+ `, nStatus Text:` + statusText

+ `, nIzvori pogreške:` + errorThrown);

});

U ovom primjeru, poslužitelj određuje naziv podataka = John i lokacija = Boston za /process/submit.php. Kada je ovaj zahtjev dovršen, funkcija se poziva upozoriti korisnika. Ako zahtjev ne uspije, upozorava korisnika o pogrešci, statusu zahtjeva i određenoj pogrešci.

dodataka

JQuery arhitektura omogućuje razvojnim programerima stvaranje dodatnog koda za proširenje različitih funkcija. Na internetu, tisuće dodataka dostupnih koje pokrivaju razne funkcije, kao što su Ajax pomagače, web usluge, dinamičke liste, XML i XSLT alata, povucite i ispustite, događaj rukovanje kolačićima i modalne prozora.

Postoje alternativni dodataka za tražilice poput jquer.in, koji koriste više specijalizirane pristupe kao što je popis samo dodatke koji zadovoljavaju određene kriterije (na primjer, oni koji imaju javnu kod sklonište). Programer pruža „Centar za učenje» - jQuery resurs za početnike koji mogu pomoći korisnicima da razumiju jаvascript i početi razvijati dodatke.

jQuery UI

jQuery UI je skup GUI widgeta, animiranih vizualnih efekata i tema implementiranih pomoću jQuery CSS (jаvascript biblioteke), kaskadnih stilskih listova i HTML-a. Prema jаvascript analitičkoj službi, Libscore, jQuery korisničko sučelje koristi se na više od 197.000 najboljih web stranica, što je čini drugom najpopularnijom JS knjižnicom. Najpoznatiji od njih su: Pinterest, PayPal, IMDb, Huffington Post i Netflix.

jQuery UI su besplatni i open source, koje distribuira Zaklada pod licencom MIT. Prvo je objavljeno u rujnu 2007.

jQuery Mobile

jQuery Mobile je web infrastruktura s optimizacijom senzora (također poznat kao mobilna infrastruktura). Glavna pozornost u razvoju je stvaranje infrastrukture koja je kompatibilna s velikim brojem pametnih telefona i tablet računala potrebnih za rastuće tržište digitalne opreme. Kompatibilan s drugim mobilnim aplikacijskim platformama kao što su PhoneGap, Worklight i mnogi drugi.