Primer jQuery. Preprosti primeri skript na jQuery

jQuery je knjižnica jаvascript, ki spletnim razvijalcem omogoča dodajanje dodatnih funkcij na svoja spletna mesta. Na voljo je z odprto kodo in je brezplačno na voljo na podlagi licence MIT. V zadnjih letih je jQuery postal najbolj priljubljena knjižnica jаvascript, ki se uporablja za razvoj spletnih strani.

Primer JQuery

Če želite implementirati jQuery, se mora spletni razvijalec sklicevati na datoteko jаvascript v HTML kodi spletne strani. Nekatere spletne strani gostijo svojo lokalno kopijo, druge pa preprosto povezavo do knjižnice, ki jo gosti Google ali strežnik. Na primer, lahko spletna stran naloži knjižnico jQuery z naslednjo vrstico v razdelku HTML (primer jQuery in piškotek):

Primeri JQuery in Ajax

Po nalaganju knjižnice lahko spletna stran pokliče katero koli funkcijo, ki jo podpira knjižnica. Pogosti primeri vključujejo spreminjanje besedila, obdelavo podatkov o obrazcu, premikanje predmetov na strani in izvajanje animacij. jQuery lahko deluje tudi s kodo Ajax in skriptni jeziki, kot so PHP in ASP, za dostop do podatkov iz baze podatkov. Ker jQuery deluje na strani odjemalca (in ne na spletnem strežniku), lahko informacije na spletni strani v realnem času posodablja brez ponovnega nalaganja strani. Pogosti primer je samodokončanje, v katerem oblika iskanja samodejno prikaže splošne podatke, ko vnesete poizvedbo.

Koristi

Poleg brezplačne licence je eden od glavnih razlogov, zakaj je jQuery pridobil tako priljubljenost, združljivost z več brskalniki. Ker vsak brskalnik na različne načine prikaže HTML, CSS in jаvascript, lahko spletnemu razvijalcu težko naredi spletno mesto enako v vseh brskalnikih. Namesto pisanja po meri funkcij za vsak brskalnik lahko spletni razvijalec uporabi eno samo funkcijo jQuery, ki bo delovala v Chromu, Safari, Firefoxu in Internet Explorerju. Podpora za več brskalnikov je mnoge razvijalce prisilila, da se premikajo s standardnega jаvascripta v jQuery, saj to zelo olajša proces kodiranja.

Opis

Sintaksa jQuery se uporablja za poenostavitev navigacije dokumentov, elementov DOM, ustvarjanje animacij, procesnih dogodkov in razvoj aplikacij Ajax. jQuery razvijalcem omogoča tudi ustvarjanje vtičnikov na zgornjem delu knjižnice jаvascript. To omogoča programerjem ustvarjanje abstraktnih struktur za interakcijo in animacijo na nizki ravni, naprednih učinkov in tematskih pripomočkov na visoki ravni. Modularni pristop k knjižnici jQuery vam omogoča ustvarjanje močnih dinamičnih spletnih strani in spletnih aplikacij.

Skupina osnovnih funkcij:

• izbor elementov DOM;
• izogibanje in manipulacijo s pomočjo izbirnega mehanizma;
• nov stil programiranja;
• algoritmi za združevanje in strukture podatkov DOM.

Slog je vplival na arhitekturo drugih okvirov jаvascripta, kot sta YUI v3 in Dojo, prav tako pa je spodbudil izdelavo standardnega API-ja selektorjev.

Microsoft in Nokia dobavljata jQuery na svojih platformah. Microsoft jo vključuje z Visual Studio za uporabo z ASP.NET AJAX in ASP.NET MVC, Nokia pa jo je integriral v razvojno platformo Web Time Widget.

Pregled

jQuery je knjižnica elementov z modelom predmeta (DOM). DOM je prikaz strukture dreves vseh elementov spletne strani. jQuery poenostavlja sintakso za iskanje, izbiro in upravljanje teh elementov DOM. Knjižnica se lahko uporablja za iskanje elementov v dokumentu z določeno znamko (na primer, vsi elementi z h1 tag), sprememba v eni ali več svojih lastnosti (barve, prepoznavnost), ali sprejetje odgovor na dogodek (kot klik).

Razvoj

Knjižnica uporablja takšne priljubljene funkcije jаvascript kot zbledi in zbledi, ko skriva elemente, animira in dela z elementi jQuery CSS. jQuery zagotavlja tudi paradigmo za obravnavo dogodkov, ki presega izbiro in manipulacijo elementov DOM. Namen dogodka in definicija funkcije povratnega klica se izvedeta v enem koraku na enem mestu v kodi.

Načela razvoja z uporabo jQuery (primerov):

• Ločitev jаvascripta in knjižnice HTML zagotavlja preprosto sintakso za dodajanje upravljalcev dogodkov v DOM z uporabo jаvascripta, namesto dodajanja atributov dogodkov HTML za klicanje JS funkcij. Tako spodbuja razvijalce, da popolnoma ločijo kodo jаvascript iz oznake HTML.
• Brzdost in jasnost - prispeva k kratekosti in jasnosti z orodji, kot so verige in skrajšana imena funkcij.
• Odpravljanje nezdružljivosti navzkripljivih brskalnikov - motorji jаvascript različnih brskalnikov se nekoliko razlikujejo, zato koda JS, ki deluje za en brskalnik, morda ne bo delovala za drugo. Kot druga orodja jаvascript, jQuery obravnava vse te nedoslednosti med brskalniki in zagotavlja dosleden vmesnik, ki deluje v različnih brskalnikih.
• Razširljivost - novi dogodki, elementi in metode je mogoče zlahka dodati in nato ponovno uporabiti kot vtičnik.

Zgodovina

jQuery je bil prvotno izdan januarja 2006 v BarCamp NYC, John Recig, in je bil pod vplivom zgodnje cssQuery knjižnice Dean Edwards. Trenutno ga podpira razvojna ekipa pod vodstvom Timmyja Willisonja (s selektorskim motorjem jQuery - Sizzle, ki ga vodi Richard Gibson).

Značilnosti

Knjižnica vključuje naslednje funkcije:

• izbira elementov DOM z uporabo mehanizma za več strežnikov izbirnika odprtega vira Sizzle;
• poudarjanje projekta manipulacije DOM, ki temelji na izbirnikih CSS, ki uporablja elemente in atribute elementov, kot so id in razred, kot merila za izbiro vozlišč v DOM;
• dejavnosti;
• učinke in animacije;
• ajax;
• predmeti odloženi in obetavni za nadzor asinhronske obdelave;
• razčlenjevanje JSON;
• razširljivost z vtičniki;
• Utilities, kot so odkrivanje funkcij;
• metodami združljivosti, ki so na začetku na voljo v sodobnih brskalnikih, vendar potrebujejo starejše različice, kot so inArray () in vsak (), multi-brskalnik (ne sme biti zmeden z navzkrižnim brskalnikom).

Uporabi

Knjižnica jQuery je ena datoteka jаvascript, ki vsebuje vse svoje skupne funkcije DOM, dogodke, učinke in Ajax. Lahko se vključi na spletno stran s sklicevanjem na lokalno kopijo ali na eno od več kopij, ki so na voljo na javnih strežnikih. V knjižnici je omrežje za dostavo vsebine (CDN), ki ga gosti MaxCDN.

Primer jQuery v PHP:

Slogi

jQuery ima dva načina uporabe:

1. Skozi funkcijo $, ki je tovarniška metoda za objekt jQuery. Te funkcije, pogosto imenovane ukaze, so nedotaknjene, ker vse vrnejo jQuery objektov.
2. S funkcijami $ prefix. To so storitvene funkcije, ki ne vplivajo neposredno na predmet.

Dostop do jQuery in upravljanje več vozlišč DOM običajno začne s klicem $ funkcijo z nizom Izbirnik CSS. S tem se vrne objekt jQuery, ki se nanaša na vse ustrezne elemente na strani HTML.

Način brez konfliktov

jQuery vključuje način .noConflict (), ki sprosti nadzor nad funkcijo $. To je uporabno, če se jQuery uporablja z drugimi knjižnicami, ki uporabljajo tudi $ kot identifikator. V nekonfliktnem načinu lahko razvijalci knjižnico uporabljajo kot nadomestilo za $ brez izgube funkcionalnosti.

Napredna funkcionalnost

Funkcije povratnega klica za ravnanje z dogodki na elementih, ki še niso naloženi, se lahko registrirajo znotraj .ready () kot anonimne funkcije. Ti vodniki bodo klicani le, ko se dogodek sproži. Na primer, naslednja koda doda vodnik za klik na sliko img:

$ (funkcija () {

$ (`img`). naprej (`klik`, funkcija () {

// obrnite dogodek s klikom na kateri koli img element na strani

});

}).

Nekatere funkcije vrnejo določene vrednosti (na primer $ (`# vnos-uporabniški e-poštni naslov`). Val ()). V teh primerih veriga ne deluje, ker se vrednost ne nanaša na objekt jQuery.

Ustvarjanje novih predmetov

Poleg dostopa do vozlišč domene skozi hierarhijo objektov je mogoče ustvariti tudi nove elemente, če je niz prenesen kot argument za $ () kot HTML. Na primer, črta najde element izbire HTML z ID-ji in dodaja element elementa z vrednostjo VAG in besedilom Volkswagen:

$ (`# izberite avtomobilov`)

.dodajte ($ (``)

.attr ({vrednost: VAG})

.dodajte (Volkswagen)).

Utilities

Funkcije JQuery s predpono $ so uporabne funkcije, ki vplivajo na globalne lastnosti in vedenje. V naslednjem primeru je uporabljena vsaka () funkcija, ki se ponavlja z nizi:

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

console.log (to je + 1);

});

Ta primer post jQuery piše 2, 3, 4 na konzolo.

Ajax

Ajaxove zahteve po cross-browserju lahko uporabite z uporabo $ .ajax () jQuery, kar je lahko primer s tem povezanih metod za nalaganje in obdelavo oddaljenih podatkov:

$ .ajax ({

tip: POST,

url: `/process/submit.php`,

podatki: {

ime: John,

lokacija: "Boston",

},

}) opravljeno (funkcija (msg) {

opozorilo (»Podatki so shranjeni:« + ​​msg);

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

obvestilo (

`Vaše sporočilo ni bilo mogoče poslati. N n`

+`Zahtevek za Http XML:` + JSON.stringify (xmlHttpRequest)

+ `, nStat teksta:` + statusText

+ `, nError Thrown:` + errorThrown);

});

V tem primeru strežnik podaja ime podatkov = John in lokacija = Boston za /process/submit.php. Ko je ta zahteva končana, je funkcija pozvana, da opozori uporabnika. Če zahteva ne uspe, opozori uporabnika na napako, stanje zahteve in posebno napako.

Plugins

Arhitektura jQuery omogoča razvijalcem, da ustvarijo kodo za razširitev različnih funkcij. Na internetu je na tisoče vtičnikov voljo, ki zajemajo različne funkcije, kot so Ajax pomočnikov, spletne storitve, dinamičnih seznamov, XML in orodja, XSLT, povleci in spusti, dogodka, ravnanju piškotek, in modalne okna.

Obstajajo alternativne vstavki za iskalnike, kot so jquer.in, ki uporabljajo bolj specializirane pristope, kot so seznam le vtičnike, ki izpolnjujejo določena merila (na primer tiste, ki imajo javno kodo skladišče). Razvijalec ponuja "Learning Center" - vir za jQuery za začetnike, ki lahko uporabnikom pomaga razumeti jаvascript in začeti razvijati vtičnike.

jQuery UI

jQuery UI je nabor pripomočkov za GUI, animirane vizualne učinke in teme, ki se izvajajo z jQuery CSS (knjižnice jаvascript), kaskadnimi listi slogov in HTML. Glede na storitev analitike jаvascript, Libscore, se uporabniški vmesnik jQuery uporablja na več kot 197.000 najboljših spletnih mestih, zaradi česar je druga najbolj priljubljena knjižnica JS. Najbolj znani so: Pinterest, PayPal, IMDb, The Huffington Post in Netflix.

Uporabniški vmesnik jQuery je brezplačen in odprtokoden, ki ga podeli Fundacija pod licenco MIT. Prvič je bil objavljen septembra 2007.

jQuery Mobile

jQuery Mobile je spletna infrastruktura s optimizacijo senzorjev (znan tudi kot mobilna infrastruktura). Glavna pozornost v razvoju je namenjena vzpostavitvi infrastrukture, združljive s široko paleto pametnih telefonov in tabličnih računalnikov, potrebnih za rastoči trg digitalne opreme. Združljiv z drugimi mobilnimi aplikacijskimi platformami, kot so PhoneGap, Worklight in mnogi drugi.