Share
Avid cititorii de Envato Tuts + provin dintr-o mare varietate de medii în ceea ce privește experiența, cultura și ceea ce caută să învețe. Atunci când vine vorba de tehnologie, este ușor să luăm de la sine înțeles pe cei care sunt doar la început, mai ales dacă ați făcut orice tip de dezvoltare pentru o perioadă lungă de timp.
Acestea fiind spuse, unul dintre lucrurile drăguțe de a deveni un dezvoltator este că, odată ce ați obținut un mâner pe o anumită limbă și set de competențe, este ușor să le traduceți în alte domenii de dezvoltare.
Într-o încercare de a ne asigura că ajungem la cea mai largă audiență posibilă, intenționăm să publicăm conținut orientat direct către începători care sunt curioși de o anumită limbă, platformă sau aplicație.
Și în acest articol, vom fi axați exclusiv pe jQuery. Mai precis, vom analiza tot ceea ce oferă jQuery și cum ne poate ajuta și vom analiza câteva dintre proiectele care au avut loc și din biblioteca inițială.
Aflați JavaScript: Ghidul complet
Am creat un ghid complet care vă ajută să învățați JavaScript, indiferent dacă începeți doar ca dezvoltator web sau doriți să explorați subiecte mai avansate.
Mai intai lansat in 2006 de John Resig, jQuery a stabilit ca este o biblioteca JavaScript cross-platform care a facut mai usoara scrierea solutiilor client.
La momentul lansării, a fost utilă în special datorită incoerențelor care au existat între implementările JavaScript în Internet Explorer, Firefox și, eventual, Google Chrome (care nu a fost lansat până în 2008).
După cum este definit de Wikipedia:
jQuery este o bibliotecă JavaScript încrucișată, proiectată pentru a simplifica scripting-ul HTML al clientului. jQuery este cea mai populară bibliotecă JavaScript folosită astăzi, cu instalarea pe 65% din cele mai mari zece milioane de site-uri cu cele mai mari traficuri de pe Web. jQuery este software gratuit, cu sursă deschisă, licențiat sub licența MIT.
Mai mult, site-ul jQuery în sine spune:
jQuery este o bibliotecă JavaScript rapidă, mică și bogată în funcții. Ea face lucruri precum traversarea și manipularea documentelor HTML, manipularea evenimentelor, animația și Ajax mult mai simple, cu un ușor de utilizat API care funcționează într-o multitudine de browsere. Cu o combinație de versatilitate și extensibilitate, jQuery a schimbat modul în care milioane de oameni scriu JavaScript.
Dar ce înseamnă asta pentru noi ca dezvoltatori? Poate că cel mai bun mod pentru a înțelege ceea ce oferă toată biblioteca este să examineze ceea ce pretind că oferă.
Atunci când un browser redă o pagină web, este o reprezentare vizuală a ceea ce se numește DOM (sau modelul de obiect document). Acest model poate fi modelat conceptual ca o structură de date arborescentă în care există anumite noduri fiecare cu rădăcini și frunze.
De exemplu, consultați această imagine furnizată de Web Step Book:
Când lucrați cu jQuery, puteți traversa cu ușurință conținutul DOM pentru a ajunge la sau pentru a găsi nodurile, elementele sau valorile pe care intenționați să le recuperați.
Aceasta înseamnă că dacă căutați textul unui text div element care are un ID unic, este ușor de făcut.
Accentsconagua
/ ** * Acest cod caută un div cu ID-ul "elementului meu unic" * și apoi îl elimină din vedere. * / $ ('div # my-unic element') .hide ();Dacă încercați să treceți prin toate deschidere elemente, puteți face și asta:
/ ** * Acesta este modul de bază pentru a configura o buclă în jQuery. Acesta va * ia toate elementele de span pe pagină și apoi * vă permite să iterați prin ele. * / $ ('span'). fiecare (funcția () // Procesați elementul de spanare aici);Vom analiza această funcționalitate în mod special în următoarea secțiune, pentru a arăta câteva dintre lucrările suplimentare pe care le puteți face pentru a manipula pagina.
Acordat, aceste exemple sunt simple și lucruri poate sa obțineți mai complicat, mai ales când introducem introducerea metodei. De exemplu:
$ excerpt.on ('keydown', funcția (evt) if (= 17 === evt.keyCode || 91 === evt.keyCode) || 86 === evt.keyCode) if (-1 = == $ .inArray (fișierul keymap, keymap)) keymap.push (evt.keyCode);) pe ('keyup', function () if (user_has_pasted_content (keymap)) resize_textarea ; keymap = [];);În acest moment, nu ar trebui să știți ce se întâmplă cu codul, dar este menit să vă arate cât de util poate fi jQuery în anumite situații prin utilizarea funcțiilor helper și a lanțului de metode.
Este suficient să spunem că puterea lui jQuery constă în abilitatea sa de a interoga DOM (de aici numele jQuery) și apoi să-l ajustați prin utilizarea unui API bine documentat (care este plin de exemple de utilizare a fiecărei funcții).
S-ar putea argumenta că orice altceva decurge din această trăsătură singur. Deci, cu asta a spus, să continuăm să ne uităm la unele dintre ceea ce arată.
Când vine vorba de a manipula DOM, jQuery are mult de funcții care ne permit să schimbăm ceea ce vedem vizitatorii noștri.
Unele dintre aceste funcții sunt simple, cum ar fi permiterea noastră spectacol sau ascunde elemente care nu sunt vizibile ori de câte ori o pagină se încarcă. Alte funcții ne permit să creăm elemente și elemente noi adăuga le la un element existent sau Prepend în fața unei întregi liste.
Dacă încercați să treceți prin toate deschidere elemente pentru a le adăuga un atribut de clasă, puteți face și acest lucru:
/ ** * Acesta este modul de bază pentru a configura o buclă în jQuery. Aceasta * va lua toate elementele de span din pagină și apoi * va adăuga un atribut de clasă personalizată. * / $ ('span') .eu (funcția () $ (this) .addClass ('my-custom-class'););Acest lucru abia scarpină suprafața funcțiilor de manipulare DOM disponibile în cadrul jQuery. Privind la API, în secțiunea Manipulare, puteți vedea cât de multe opțiuni sunt disponibile (împreună cu exemple bune).
Pentru a da mai multe exemple, putem, de asemenea:
Amintiți-vă că unul dintre lucrurile care fac jQuery o soluție atrăgătoare pentru atât de mulți dezvoltatori este că toate funcțiile și exemplele la care ne uităm în acest articol sunt compatibile cu browserele.
Dacă sunteți nou în JavaScript, atunci un lucru care este cheia pentru a înțelege cum funcționează cu pagina care este afișată în browserul web este că răspunde la diferite evenimente.
Adică, atunci când un utilizator face clic pe un element, face o apăsare de tastă sau face clic pe mouse, browserul ridică un semnal corespunzător evenimentului care a avut loc. Aceasta ne permite să profităm de interacțiunea utilizatorului cu browserul.
Mai exact, de fiecare dată când un utilizator o face ceva la pagina, putem răspunde folosind un eveniment personalizat. Problema este că nu fiecare browser implementează evenimentele în același mod (de aceea este nevoie de o specificație, dar asta este conținut pentru un alt post).
Din fericire, jQuery face acest lucru mult mai ușor prin definirea unui nume consistent pentru toate evenimentele, astfel încât să putem folosi același nume pentru un eveniment la care încercăm să răspundem și acesta va funcționa în toate browserele majore.
Când a apărut prima dată jQuery, Flash era încă relativ popular, iar animațiile generale de pe web nu erau complet moarte.
Când vorbim despre animație în contextul jQuery, nu vorbim despre același tip de efecte sau comportamente pe care le-am obișnuit să le vedem cu tehnologie mai veche. În schimb, vorbim despre efecte care le oferă utilizatorilor feedback ceva sa întâmplat pe ecran. În plus, este mai puțin invazivă și poate adăuga un frumos simț al stilului unei pagini sau unei aplicații atunci când este folosit corect (orice poate fi abuzat, totuși).
Puteți vedea întregul API de efecte pe această pagină, dar merită să rețineți că efectele lui jQuery pot varia de oriunde, de la manipularea simplei decolorări și a estompării elementelor sau elementelor de alunecare în vederea unui lucru mai complex, cum ar fi manipularea coada de efecte înregistrate pentru a trage împotriva unui element.
Acordat, ultimul caz presupune că aveți puțină experiență cu API-ul de efecte, dar este ceva care vine în mod natural dat suficient timp cu biblioteca și documentația.
Dacă nu sunteți familiarizat cu Ajax, este în esență o modalitate prin care o pagină Web să poată efectua un apel către server, să se ocupe de răspuns și să actualizeze o porțiune dintr-o pagină fără a fi nevoie să actualizeze întreaga pagină. Deși tehnologia a fost în jur de ceva timp, este încă ceva care este foarte cool și poate oferi o anumită funcționalitate cu adevărat îngrijită în contextul unei pagini sau al unei aplicații web atunci când este utilizată în mod corespunzător și eficient.
Deși suportul pentru Ajax nu este la fel de rău ca acum cinci sau zece ani, implementarea pentru API în browsere poate varia oricât de ușor. Acest lucru înseamnă că suntem însărcinați cu scrierea codului Ajax special pentru un browser pe care îl furnizează Microsoft, pe care Google îl oferă, pe care Apple îl oferă, pe care Chrome o oferă și așa mai departe.
Cel puțin, acesta este cazul fără jQuery. Datorită suportului său pentru Ajax, putem folosi Ajax într-o serie de moduri diferite, fără a fi nevoiți să intrăm în neconcordanțele încrucișate în browser. De fapt, este ușor de manevrat OBȚINE și POST solicită, de asemenea, posibilitatea de a efectua apeluri mult mai avansate utilizând $ .ajax metodă.
Odată ce vă obișnuiți să aveți API disponibil în centrul aplicației sau la dispoziția dvs., este greu să vă imaginați că nu lucrați cu ea (sau cu ceva asemănător).
O caracteristică pe care o oferă o mulțime de cadre și biblioteci din partea serverului este abilitatea de a crea extensii la baza de coduri de bază. Bibliotecile moderne și cadrele moderne permit acest lucru, iar jQuery nu este diferit.
Spuneți, de exemplu, că lucrați într-o nișă specială în care vă găsiți a crea aceeași funcționalitate pentru fiecare proiect. Sau ce dacă aveți un produs pe care îl vindeți și aveți un pic de cod personalizat care trebuie să se integreze cu jQuery, dar ar putea necesita diferiți parametri în funcție de proiect.
Ce faci atunci?
Din fericire, jQuery acceptă pluginuri. Acest lucru înseamnă că noi, ca dezvoltatori, nu numai că avem abilitatea de a accesa pluginurile pe care le-au scris alții (unele dintre acestea sunt disponibile pe site-ul jQuery, altele sunt disponibile pe GitHub), dar putem, de asemenea, să dezvoltăm propriile pluginuri.
Putem apoi să reutilizăm acest cod în propriile noastre proiecte sau să le punem la dispoziție pe site-uri cum ar fi GitHub pentru alții pentru a oferi contribuții, corecții, caracteristici și așa mai departe.
De la începuturi, jQuery a devenit mai mult decât o bibliotecă JavaScript care ne oferă posibilitatea de a efectua operațiuni simple și puternice într-un mod compatibil cu platformele.
În plus față de biblioteca de bază, jQuery a dus de asemenea la două alte proiecte notabile care merită menționate înainte de a încheia acest articol. Deși nu ne vom uita la detaliile a ceea ce permite fiecare proiect, vom lua o viziune la nivel înalt asupra fiecărui proiect, dacă nu pentru alt motiv decât a fi conștient de ceea ce ne este disponibil ar trebui să avem nevoie de acest lucru pentru o lucrare viitoare.
De pe pagina de pornire jQuery UI:
jQuery UI este un set curativ de interacțiuni cu interfața cu utilizatorul, efecte, widget-uri și teme construite pe partea de sus a jQuery JavaScript Library. Fie că construiți aplicații Web foarte interactive, fie că trebuie doar să adăugați un selector de date într-un control al formularului, jQuery UI este alegerea perfectă.
Această bibliotecă a fost publicată pentru prima dată în 2007, aproximativ un an după jQuery. Funcționează ca o bibliotecă complementară pentru jQuery prin faptul că utilizează compatibilitatea cross-platform a bibliotecii pentru a ajuta la crearea de widgeturi care pot fi utilizate pe tot parcursul unui site web.
Multe dintre widget-uri includ bucăți de funcționalitate utilizate în mod obișnuit. De exemplu:
Există, de asemenea, funcții avansate, cum ar fi efecte, utilități și interacțiuni. Tot ceea ce am acoperit până acum (precum și lucrurile pe care nu le avem) includ o mare varietate de callbacks, atribute și funcții care ne permit să interacționăm cu ele în cea mai mare măsură.
Toate caracteristicile menționate anterior oferă, de asemenea, diverse teme pentru a vă asigura că acestea se încadrează în aspectul site-ului dumneavoastră. În cele din urmă, toate caracteristicile prezentate aici și incluse pe site sunt bine documentate.
De pe pagina de pornire jQuery Mobile:
jQuery Mobile este un sistem de interfață cu utilizatorul bazat pe HTML5, conceput pentru a face site-uri Web și aplicații receptive accesibile pe toate dispozitivele smartphone, tabletă și desktop.
Această bibliotecă este cea mai recentă introducere în familia bibliotecilor lansate în 2010 (ultima versiune stabilă fiind în 2014).
La fel ca omologul său UI, acesta oferă un API bine documentat și teme personalizate care sunt ideale pentru diferitele dispozitive pe care proiectul dvs. le poate viza.
În timp ce ultimele două biblioteci oferă un set de caracteristici cross-platform care ne permit să scriem jQuery și widget-uri însoțitoare într-un mod relativ ușor, jQuery Mobile include un cadru CSS care ne permite să proiectăm și interfețe utilizator care sunt ideale pentru natura noastră respectivului proiect.
Cadrul include:
De acolo, biblioteca oferă ceea ce v-ați aștepta de la un proiect orientat spre dezvoltarea web-ului mult mai ușor pentru diverse dispozitive mobile. Acestea includ:
În cele din urmă, numărul de browsere care sunt încă disponibile și folosite în sălbăticie este ridicat. Deși am văzut o scădere a utilizării versiunilor mai vechi ale Internet Explorer și adoptarea mai largă a browserului Chrome, avem totuși anumiți utilizatori care se lipesc de browsere mai vechi din mai multe motive.
Uneori, acești utilizatori se află pe browsere mai vechi din cauza naturii intranetului companiei lor. Uneori are de a face cu dispozitivele mobile și / sau telefoanele pe care le-au fost atribuite pentru slujba lor. Și uneori pur și simplu are de a face cu incapacitatea de a face upgrade la ceva mai bun.
Nu contează, totuși. jQuery Mobile oferă suport pentru majoritatea browserelor și sistemelor de operare disponibile în prezent. Dacă nu sunteți sigur dacă platforma pe care o vizați este susținută de bibliotecă, puteți verifica întotdeauna pagina de asistență pentru browser.
Înțelegerea jQuery (și ce nu este) și modul în care este legată de JavaScript este importantă pentru a ști ce se face pentru dvs. și ce puteți face atunci când trebuie să lucrați cu biblioteca.
După cum sa menționat anterior, unii pot argumenta că trebuie să înveți mai întâi JavaScript și să înveți jQuery; alții pot susține că învățarea jQuery este o modalitate excelentă de a vă deplasa înapoi spre JavaScript.
Indiferent de situație, jQuery este o bibliotecă de lungă durată în economia JavaScript și este una care este utilizată într-o serie de proiecte foarte populare (cum ar fi WordPress), astfel încât învățarea vă va da un picior în mai multe moduri diferite.
JavaScript a devenit una dintre limbile de-facto de lucru pe web. Nu este fără curbele sale de învățare, și există o mulțime de cadre și biblioteci pentru a vă menține ocupați. Dacă sunteți în căutarea unor resurse suplimentare pentru a studia sau a utiliza în munca dvs., verificați ce avem la dispoziție pe piața Envato.
Dacă acest lucru nu este suficient, există o mulțime de documentație și un cod open-source disponibil pentru a vă revizui și a citi, de asemenea. Există, de asemenea, plugin-uri disponibile pe scară largă și un blog activ pentru a vă menține în buclă, cu toate știrile care se întâmplă cu dezvoltarea bibliotecii.
Pentru cei care sunt interesați de JavaScript (în special în contextul WordPress), nu ezitați să mă urmați pe blogul meu și / sau pe Twitter la @tommcfarlin. Puteți să vă captați toate cursurile și tutorialele pe pagina mea de profil, de asemenea.
Nu ezitați să lăsați întrebările sau comentariile în feedul de mai jos și mă voi adresa fiecăruia.
