15 Resurse pentru a începe cu jQuery de la zero

Poate că ești un jQuery pro condus. Heck, poate că ești John Resig. Pe de altă parte, poate că citiți cuvinte precum "Prototype", "jQuery" și "Mootools" și gândiți-vă: "Ce naiba sunt acestea?" Acum este timpul să învățăm.

În această industrie - acum mai mult ca niciodată - designerii devin coderi, iar coderii devin designeri. Ideea unui dezvoltator care efectuează numai lucrul frontend sau backend devine rapid un concept datat. jQuery va contribui la reducerea decalajului. Javascript nu este o abilitate de neatins. În acest articol, vom detalia cincisprezece resurse pentru a vă începe cu jQuery de la începutul absolut. Dacă ați evitat această bibliotecă din senzația de frică, acum este momentul să vă aruncați cu capul în jos. Veți fi uimiți de cât de simplu poate fi.

Ce este exact jQuery?

Potrivit jQuery.com, jQuery este o bibliotecă rapidă, concisă, care simplifică modul în care traversați documentele HTML, gestionați evenimente, efectuați animații și adăugați interacțiuni Ajax către paginile dvs. web. jQuery este proiectat pentru a schimba modul în care scrieți JavaScript.

În termeni simpli, jQuery vă permite să transformați zece linii de cod Javascript tradițional în două! Combinați o gamă enormă de caracteristici cu compatibilitate cross-platform și aveți un cadru robust. Înainte de a ști, veți crea totul, de la forme bogate la meniuri asemănătoare cu cele de tip Flash. Nu vă faceți griji dacă sarcina de a învăța încă un nou cadru pare a fi descurajantă. Aceste resurse vă vor duce pas cu pas.

De ce aș folosi această bibliotecă peste ceilalți?

În cele din urmă, este de preferat. Fiecare cadru are propriile sale avantaje specifice. Dar, există un motiv pentru care jQuery este cel mai popular cadru disponibil.

Cross-Browser Compatibility. Cu orice implementare Javascript, un dezvoltator de web se poate aștepta să-și petreacă o mare parte din timpul lui sau ei compensând pentru fiecare quirks browser-ului. Din fericire, biblioteca jQuery neutralizează aceste inconsecvențe ale browserului, permițând astfel dezvoltatorilor mai mult timp să lucreze la codul lor.

Selectori CSS. Utilizând sintaxa CSS, dezvoltatorii își pot folosi cunoștințele existente pentru a traversa documentele. Prin adăugarea multor selectori CSS 3 și XPATH, jQuery vă oferă un mecanism minunat pentru manipularea elementelor de pe pagina dvs..

înlănțuirea. jQuery folosește un model numit "lanț" pentru metodele sale. De fiecare dată când executați o metodă pe un obiect jQuery, metoda returnează același obiect jQuery. În consecință, nu va trebui să reintroduceți selectorii pentru fiecare metodă. Utilizarea unui astfel de tip de funcționalitate ".NET" permite dimensiuni reduse ale fișierelor și o citire mai mare a codului.

Dacă sunteți intrigat, ar trebui să fiți! Să începem.

Pasul 1: Descărcați Biblioteca

Primul pas în călătoria dvs. va fi descărcarea bibliotecii. Accesați jQuery.com și derulați până la secțiunea "Descărcați jQuery". Alegerea uneia dintre legăturile afișate va descărca biblioteca pe computer. Apoi, va trebui să importați fișierul .js în soluția dvs..

Citirea recomandată
  • CSS-Tricks.com: Introducere la jQuery

    În ecranul său jQuery, Chris Coyier, la CSS-Tricks, vă va oferi o introducere de bază pentru includerea jQuery pe pagina dvs. web și scrierea câtorva funcții.

    Vizitați articolul

  • Digital -Web.com: jQuery: Un curs de accident

    Iată un curs de jar în jQuery, scris cu designeri de web-savvy în minte.

    Vizitați articolul

  • Slideshare.net: "Învățarea jQuery în 30 de minute"

    Dacă vă bucurați de prezentări, acest tutorial vă va învăța fundamentele jQuery în treizeci de minute.

    Vizitați articolul

Pasul 2: Creați prima funcție

În cinci minute de la învățarea jQuery, veți crea funcții. Prima oprire ar trebui să fie articolul introductiv al lui John Resig, "Cum funcționează jQuery". Vă va arăta multe metode ușor de înțeles pe care le puteți utiliza în aplicațiile dvs. web - inclusiv adăugarea și eliminarea clasei, înlănțuirea și apelarea metodei "document.ready".

Citirea recomandată

  • jQuery.com: "Cum funcționează jQuery"

    În articolul introductiv, John Resig - creatorul jQuery - vă va duce de la elementele de bază la crearea de animații. Aceasta este o citire esențială dacă tocmai ați început.

    Vizitați articolul

  • FifteenDaysOfJquery.com: Ziua 1

    Într-o încercare curajoasă de a acoperi multe dintre caracteristicile lui jQuery în două săptămâni, "15 zile de jQuery" trece peste un subiect pe zi. În acest articol specific, veți învăța cum să utilizați metoda "document.ready ()".

    Vizitați articolul

  • VisualJquery.com: "Dicționarul dvs. jQuery"

    Gândiți-vă la VisualjQuery.com ca dicționarul dvs. digital. Acesta vă va arăta sintaxa și definiția pentru fiecare metodă jQuery disponibilă. Păstrați acest site marcată.

    Vizitați articolul

Pasul 3: Animați-vă elementele

Acesta este un subiect controversat pentru mulți dezvoltatori. În grupul numărul unu, există oameni care insistă asupra "animației zero". Dați utilizatorilor ceea ce au nevoie cât mai repede posibil și lăsați-i să meargă pe drum. Nu-i tratați ca și cum ar fi căpitanii care caută următoarea jucărie strălucitoare. Dar, există și oameni din grupa numărul doi. Se uită la un site, care are animații implementate cu gust, ca un site demn de baza lor de utilizatori. Atunci când sunt utilizate corect, ei cred că animația poate îmbunătăți considerabil gradul de utilizare. Va trebui să decideți singur care sunteți. Cu toate acestea, jQuery face elemente de animație pe pagina ta la fel de ușor ca și cum ar putea fi.

Citirea recomandată

  • jQuery.com: "Animații"

    Aceasta ar trebui să fie prima oprire când aflați despre abilitățile de animație ale jQuery. Acesta va detalia parametrii necesari atunci când se utilizează această metodă.

    Vizitați articolul

  • Proiecte desenate: Învățarea despre abilitățile de animație ale jQuery

    Sunteți un novice complet când vine vorba de animație? Acest tutorial va presupune că nu aveți nicio cunoaștere. Subiectele acoperite sunt textul în creștere și în scădere, elemente în mișcare, animații de înlănțuire și multe altele.

    Vizitați articolul

  • Web Designer Wall: Tutoriale jQuery pentru designeri

    Încă confuză despre puterea lui jQuery? Acest site va lista zece exemple variind de la meniuri la înlocuirea imaginilor.

    Vizitați articolul

Pasul 4: Plugin-uri

Lucrul minunat despre jQuery este că, atunci când a fost inițial dezvoltat, John Resig și echipa sa au asigurat că extinderea funcționalității sale prin utilizarea pluginurilor ar putea fi realizate cu doar câteva linii suplimentare de cod. Veți scrie metode personalizate în cel mai scurt timp! Prin păstrarea acestor plugin-uri separate de biblioteca principală (doar 16kb, apropo), putem implementa pluginuri specifice numai atunci când este necesar. Ca rezultat, acest lucru va permite ca dimensiunile fișierelor javascript să rămână cât mai mici posibil.

Citirea recomandată

  • jQuery Corner Galerie

    Căutați o modalitate de a adăuga ușor colțurile rotunjite elementelor dvs.? Cu colțuri variind de la rotunjit la urechi de câini, acest plugin poate găsi un loc permament în "setul de instrumente".

    Vizitați articolul

  • Îmbunătățiți experiența utilizatorului: 10 Plugin-uri jQuery utile

    În acest articol, James Padolsey detaliază primele zece plugin-uri favorite.

    Vizitați articolul

  • jQuery.com: "Plugin-uri"

    Ca întotdeauna, jQuery.com se dovedește a fi o resursă valoroasă. Acest articol vă va oferi instrucțiuni pas cu pas atunci când vine vorba de crearea primului plugin.

    Vizitați articolul

Pasul 5: Implementarea funcționalității AJAX

Vă simțiți încrezători cu abilitățile jQuery încă? Sunteți gata să faceți lucrurile la nivelul următor? De ce să nu începeți implementarea unor funcții Ajax în scenariile dvs.? Prin utilizarea metodelor "load ()" și ".get ()", jQuery face extrem de ușor încărcarea datelor. Următoarele resurse vor fi vitale pentru educația dvs..

Citirea recomandată

  • Sitepoint.com: Easy AJAX Cu jQuery

    În articolul său pentru Sitepoint, Akash Mehta vă va arăta cum să simplificați procesul de adăugare a Ajax la aplicațiile dvs. cu ajutorul jQuery.

    Vizitați articolul

  • jQuery pentru proiectanți: Utilizarea AJAX pentru a valida formularele

    Remy ne va arata cum putem folosi AJAX, impreuna cu biblioteca jQuery, pentru a adauga o validare de la server la formularele noastre.

    Vizitați articolul

  • Nettuts.com: Cum să încărcați și să animați conținutul cu jQuery

    Nu uitați întotdeauna să căutați în categoria NETTUTs "Javascript" atunci când căutați tutoriale jQuery. În acest tutorial, vă vom arăta
    cum puteți încărca și anima date utilizând jQuery.

    Vizitați articolul

Cod