Primer jQuery. Enostavni primeri skriptov jQuery

jQuery je knjižnica javascript, ki spletnim razvijalcem omogoča dodajanje dodatnih funkcij na svoja spletna mesta. Je odprtokodna in je brezplačno pod licenco MIT. V zadnjih letih je jQuery postal najbolj iskana javascript knjižnica, ki se uporablja v spletnem razvoju.

Primer jQuery

Za izvedbo jQuery se spletni razvijalec mora sklicevati na javascript datoteko v HTML spletne strani. Nekatere spletne strani imajo svojo lokalno kopijo, druge pa se sklicujejo na knjižnico, ki jo gosti Google ali strežnik. Na primer, spletna stran lahko naloži knjižnico jQuery z naslednjo vrstico v razdelku HTML (primer jQuery in piškotek):


Primeri jQuery in Ajax

Po prenosu knjižnice lahko spletna stran pokliče katero koli funkcijo, ki jo knjižnica podpira. Pogosti primeri vključujejo spremembe besedila, obdelavo podatkov obrazcev, premikanje elementov na strani in izvajanje animacij. jQuery lahko deluje tudi z Ajax kodo in skriptnimi jeziki, kot sta PHP in ASP, za dostop do podatkov iz baze podatkov. Ker se jQuery izvaja na odjemalski strani (in ne na spletnem strežniku), lahko informacije na spletni strani posodablja v realnem času brez ponovnega nalaganja strani. Običajen primer je samodokončanje, v katerem iskalni obrazec ob vnosu poizvedbe samodejno prikaže splošne podatke.

Prednosti knjižnic

Poleg brezplačne licence je še en pomemben razlog, zakaj je jQuery pridobil takšno priljubljenost,Združljivost med brskalniki. Ker vsak brskalnik na različne načine prikazuje HTML, CSS in javascript, lahko spletni razvijalec težko naredi spletno mesto enako v vseh brskalnikih. Namesto pisanja uporabniško določenih funkcij za vsak brskalnik lahko spletni razvijalec uporablja eno funkcijo jQuery, ki bo delovala v Chromu, Safariju, Firefoxu in Internet Explorerju. Podpora za več brskalnikov je prisilila mnoge razvijalce, da preklopijo s standardnega javascripta na jQuery, saj to močno poenostavi postopek kodiranja.


Opis

Sintaksa jQuery se uporablja za poenostavitev navigacije z dokumenti, izbiranje elementov DOM, ustvarjanje animacij, procesiranje dogodkov in razvoj aplikacij Ajax. jQuery ponuja tudi razvijalcem možnost ustvarjanja vtičnikov prek knjižnice javascript. To programerjem omogoča ustvarjanje abstraktnih modelov za interakcijo in animacijo na nizki ravni, napredne učinke in tematske pripomočke na visoki ravni. Modularni pristop k knjižnici jQuery omogoča ustvarjanje močnih dinamičnih spletnih strani in spletnih aplikacij. Niz osnovnih funkcij:
  • izbira elementov DOM;
  • Obvod in manipulacija z mehanizmom za izbiro;
  • nov slog programiranja;
  • algoritmi združitev in podatkovne strukture DOM.
  • Stil je vplival na arhitekturo drugih okvirov javascripta, kot sta YUI v3 in Dojo, ter spodbudil oblikovanje standardnega API selektorja.
    Microsoft in Nokia zagotavljata jQuery na svojih platformah. Microsoft jo vključuje v Visual Studio za uporabo v ASP.NET AJAX in ASP.NET MVC, Nokia pa jo integrira v platformo čarovnika za razvoj spletnih mest.

    Pregled

    jQuery je knjižnica elementov z dokumentom objektnega modela (DOM). DOM je predstavitev drevesne strukture vseh elementov spletne strani. jQuery poenostavlja sintakso za iskanje, izbiranje in upravljanje teh domen. Knjižnica se lahko uporablja za iskanje elementa v dokumentu z določeno lastnostjo (na primer vse elemente z oznako h1), spremembo enega ali več atributov (barva, vidnost) ali sprejemanje odgovora na dogodek (npr. Klik miške).

    Razvoj

    Knjižnica uporablja tako priljubljene funkcije javascripta, kot so zbledi in izginjajo pri skrivanju elementov, animacij in delu z elementi jQuery CSS. jQuery ponuja tudi paradigmo za ravnanje z dogodki, ki presegajo obseg izbire in manipulacije elementov DOM. Dodelitev dogodka in definiranje funkcije povratnega klica poteka v enem koraku na enem mestu v kodi. Načela razvoja jQuery (primeri):
  • Knjižnica delitve javascript in html nudi preprosto sintakso za dodajanje obdelovalcev dogodkov v DOM s pomočjo javascripta, namesto da dodaja atribute dogodkov HTML za klicanje funkcij JS. Zato spodbuja razvijalce, da popolnoma ločijo javascript kodo od oznake HTML.
  • Kratica in jasnost - daje prednost jedrnatosti in jasnosti z orodji, kot so verige in skrajšana imena funkcij.
  • Odstranjevanje nezdružljivosti med brskalniki - javascript-motorji za različne brskalnike so nekoliko drugačni, zato koda JS, ki deluje za en brskalnik, morda ne deluje za drug brskalnik. Podobno kot druga JavaScript orodja, jQuery obravnava vse teodstopanja med brskalniki in zagotavlja skladen vmesnik, ki deluje v različnih brskalnikih.
  • Razširljivost - Novi dogodki, elementi in metode se lahko enostavno dodajo in nato ponovno uporabijo kot vtičnik.
  • Zgodovina

    jQuery je bil prvotno izdan januarja 2006 na BarCamp NYC z John Reshig in je bil pod vplivom zgodnje cssQuery knjižnice Dean Edwards. Trenutno ga podpira ekipa razvijalcev Timmyja Willisona (z izbirnim mehanizmom jQuery, Sizzle, ki ga vodi Richard Gibson).

    Značilnosti

    Knjižnica vključuje naslednje funkcije:
  • izbira elementov DOM z uporabo več strežniškega mehanizma izbirnika z odprto kodo Sizzle;
  • Izbira CSS izbirnega projekta manipulacije DOM, ki uporablja imena in atribute elementov, kot je ID, razred kot merilo za izbiro vozlišč DOM;
  • ukrep;
  • animacijski učinki;
  • ajax;
  • predmeti so odloženi in obljubljajo, da bodo nadzorovali asinhrono obdelavo;
  • razčlenjevanje JSON;
  • razširljivost prek vtičnikov;
  • pripomočki, kot je odkrivanje funkcij;
  • metode združljivosti, ki so prvotno na voljo v sodobnih brskalnikih, vendar zahtevajo starejše različice, kot so inArray () in vsak (), več brskalnik (ne sme se zamenjati s križnim brskalnikom).
  • Uporaba

    Knjižnica jQuery je ena datoteka javascript, ki vsebuje vse njegove skupne DOM funkcije, dogodke, učinke in Ajax. Lahko se vključi v spletno stran s povezavo na lokalno kopijo ali eno od številnih kopij, ki so na voljo javnostistrežnikov Knjižnica ima omrežje za dostavo vsebine (CDN), ki ga gosti max-cdn. Primer JQuery PHP:

    Slogi

    jQuery ima dva načina uporabe:
  • Zaradi funkcije $, ki je tovarniška metoda za objekt jQuery. Te funkcije, ki se pogosto imenujejo ukazi, so cela števila, saj vsi vrnejo jQuery objekte.
  • ​​
  • S funkcijo predpone $ -. To so storitvene funkcije, ki ne vplivajo neposredno na objekt.
  • Dostop do JQuery in upravljanje z več vozlišči DOM se običajno začne s klicanjem funkcije $ z uporabo vrstice za izbiro CSS. To vrne objekt jQuery, ki se nanaša na vse ustrezne elemente na strani HTML.

    Način brez konflikta

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

    Napredna funkcionalnost

    Funkcije povratnega klica za obravnavanje dogodkov na elementih, ki še niso naloženi, se lahko prijavijo v .ready () kot anonimne funkcije. Ti rokovniki bodo klicani samo, ko se dogodek sproži. Naslednja koda na primer doda upravljalnik za klik na img: $ (function () {$ ('img'). V ('klik', funkcija () {//obdelamo dogodek klika na katerem koli elementu img na strani });}). Nekatere funkcije vrnejo določene vrednosti (na primer $ ('# input-user-email')). Val ()). V teh primerih veriga ne deluje, ker se vrednost ne nanaša na objekt jQuery.

    Ustvarjanje novihelementi

    Poleg dostopa do vozlišč DOM skozi hierarhijo objektov je mogoče ustvariti tudi nove elemente, če je niz, ki je podan kot argument $ (), videti kot HTML. Na primer niz najde element izbire HTML z identifikacijskimi karticami in doda element možnosti z vrednostjo VAG in besedilom Volkswagen: $ ('# select carmakes') .append ($ ('') .attr ({value: VAG}) .append (Volkswagen ))

    Pripomočki

    Funkcije jQuery s predpono $ so funkcije koristnosti, ki vplivajo na globalne lastnosti in obnašanje. V naslednjem primeru uporabimo funkcijo every (), ki opravi iteracijo skozi polja: $ .each ([1,2,3], function () {console.log (this + 1);}); Ta primer jQuery piše 234 na konzolo.

    Ajax

    Ajaxove navzkrižne brskalnike lahko izvajate z uporabo $ .ajax () jQuery, primeri katerih so povezane metode za prenos in obdelavo izbrisanih podatkov: $ .ajax ({type: POST, url: ') /process/submit.php ', data: {name: John, lokacija:' Boston ',},}) končano (funkcija (msg) {alert (' Data Saved: '+ msg);}) datoteka (funkcija (xmlHttpRequest, statusText, errorThrown) {alert ('Ne morem poslati vašega sporočila. Nn' + 'XML Http Request:' + JSON.stringify (xmlHttpRequest) + ', nStatus Text:' + statusText + ', nError Thrown: '+ errorThrown};}); V tem primeru ima strežnik ime podatkov = John in location = Boston za /process/submit.php. Ko je ta zahteva končana, se funkcija pokliče in opozori uporabnika. Če zahteva ne uspe, bo uporabnika opozorila na stanje napake zahteve in določeno napako.

    Plugins

    Arhitektura jQuery omogoča razvijalcem, da ustvarijo kodo po meri za razširitev različnih funkcij. Na internetu je na voljo na tisoče dodatnih modulov, ki pokrivajo vrsto funkcij, kot je nprAjax pomočniki, spletne storitve, dinamični seznami, orodja XML in XSLT, povleci in spusti, dogodki, obdelava piškotkov in modalna okna. Obstajajo alternativni vtičniki za iskalnike, kot je jquer.in, ki uporabljajo bolj specializirane pristope, kot je vnos samo vtičnikov, ki ustrezajo določenim kriterijem (na primer tistim, ki imajo skupno skladišče kode). Razvijalec ponuja učnemu centru jQuery za začetnike, ki lahko uporabnikom pomaga razumeti javascript in začnejo razvijati vtičnike.

    jQuery UI

    jQuery UI je zbirka GUI pripomočkov, animiranih vizualnih učinkov in tem, ki se izvajajo z jQuery CSS (javascript knjižnico), kaskadnimi listi slogov in HTML. Glede na javascript, Libscore, je vmesnik jQuery uporabljen na več kot 197.000 najboljših spletnih straneh, zaradi česar je druga najbolj priljubljena knjižnica JS. Najbolj znani so Pinterest, PayPal, IMDb, Huffington Post in Netflix.
    UI jQuery je brezplačna in odprtokodna ustanova, licencirana s strani MIT. Prvič je bila objavljena septembra 2007.

    jQuery Mobile

    jQuery Mobile je spletna infrastruktura za senzorično optimizacijo (znana tudi kot mobilna infrastruktura). Glavni poudarek razvoja je ustvarjanje infrastrukture, združljive s široko paleto pametnih telefonov in tabličnih računalnikov, ki so potrebni za naraščajoči trg tehnologije pripomočkov. Združljiv z drugimi platformami za mobilne aplikacije, kot je PhoneGap, Worklight in še veliko več.

    Sorodne publikacije