O colecție de scripturi jQuery de la Dimox. Scripturi JQuery proaspete pentru dezvoltatori Ce este jQuery

jQuery este o bibliotecă JavaScript care permite dezvoltatorilor web să adauge funcționalități avansate site-urilor lor web. Este disponibil de la și disponibil gratuit sub licența MIT. În ultimii ani, jQuery a devenit cea mai populară bibliotecă JavaScript folosită în dezvoltarea web.

Exemplu jQuery

Pentru a implementa jQuery, un dezvoltator web trebuie să facă referire la un fișier JavaScript în codul HTML al unei pagini web. Unele site-uri web găzduiesc propria lor copie locală, în timp ce altele pur și simplu se leagă la o bibliotecă găzduită de Google sau de un server. De exemplu, o pagină web ar putea încărca biblioteca jQuery folosind următoarea linie din secțiunea HTML (exemplu jQuery și cookie):

Exemple jQuery și Ajax

Odată ce biblioteca este încărcată, pagina web poate apela orice funcție acceptată de bibliotecă. Exemplele comune includ modificarea textului, procesarea datelor din formular, mutarea elementelor pe o pagină și realizarea de animații. jQuery poate funcționa și cu codul Ajax și cu PHP și ASP pentru a accesa date dintr-o bază de date. Deoarece jQuery rulează pe partea client (nu pe serverul web), poate actualiza informațiile de pe o pagină web în timp real fără a reîncărca pagina. Un exemplu comun este completarea automată, în care un formular de căutare afișează automat date generale pe măsură ce introduceți o interogare.

Beneficiile bibliotecii

În afară de licența gratuită, celălalt motiv principal pentru care jQuery a câștigat atât de multă popularitate este compatibilitatea sa între browsere. Deoarece fiecare browser redă JavaScript în mod diferit, poate fi dificil pentru un dezvoltator web să facă un site web să arate la fel în toate browserele. În loc să scrie funcții personalizate pentru fiecare browser, un dezvoltator web poate folosi o singură funcție jQuery care va funcționa în Chrome, Safari, Firefox și Internet Explorer. Suportul pentru mai multe browsere a determinat mulți dezvoltatori să treacă de la JavaScript standard la jQuery, deoarece simplifică foarte mult procesul de codificare.

Descriere

Sintaxa jQuery este utilizată pentru a simplifica navigarea documentelor, selectarea elementelor DOM, crearea de animații, gestionarea evenimentelor și dezvoltarea aplicațiilor Ajax. jQuery oferă, de asemenea, dezvoltatorilor posibilitatea de a crea plugin-uri deasupra bibliotecii JavaScript. Permite programatorilor să creeze modele abstracte pentru interacțiune și animație la nivel scăzut, efecte avansate și widget-uri tematice la nivel înalt. Abordarea modulară a bibliotecii jQuery vă permite să creați pagini web și aplicații web puternice, dinamice.

Set de funcții de bază:

• selectarea elementelor DOM;
• bypass și manipulare folosind mecanismul de selecție;
• stil nou de programare;
• unirea algoritmilor și structurilor de date DOM.

Stilul a influențat arhitectura altor cadre JavaScript, cum ar fi YUI v3 și Dojo, și a inspirat, de asemenea, crearea API-ului standard Selectors.

Microsoft și Nokia oferă jQuery pe platformele lor. Microsoft îl include cu Visual Studio pentru a fi utilizat în ASP.NET AJAX și ASP.NET MVC, iar Nokia l-a integrat în platforma de dezvoltare Web Time Widget.

Revizuire

jQuery este o bibliotecă de elemente cu un Document Object Model (DOM). DOM este o reprezentare a structurii arborescente a tuturor elementelor unei pagini web. jQuery simplifică sintaxa pentru găsirea, selectarea și manipularea acestor elemente DOM. Biblioteca poate fi folosită pentru a găsi un element dintr-un document cu o anumită proprietate (de exemplu, toate elementele cu o etichetă h1), pentru a modifica unul sau mai multe atribute ale acestuia (culoare, vizibilitate) sau pentru a răspunde la un eveniment (de exemplu, un clic de mouse).

Dezvoltare

Biblioteca folosește caracteristici JavaScript populare, cum ar fi fade ins și fade outs pentru a ascunde elemente, animații și pentru a lucra cu elemente jQuery CSS. jQuery oferă, de asemenea, o paradigmă pentru gestionarea evenimentelor care merge dincolo de selectarea și manipularea elementelor DOM. Atribuirea unui eveniment și definirea unei funcții de apel invers se fac într-un singur pas într-un singur loc din cod.

Principii de dezvoltare cu jQuery (exemple):

• Separați JavaScript și HTML - Biblioteca oferă o sintaxă simplă pentru adăugarea de gestionare a evenimentelor la DOM folosind JavaScript, în loc să adăugați atribute de evenimente HTML pentru a apela funcții JS. Astfel, încurajează dezvoltatorii să separe complet codul JavaScript de marcajul HTML.
• Concizie și claritate - Promovează concizia și claritatea cu instrumente precum înlănțuirea și scurtarea numelor de funcții.
• Eliminați incompatibilitățile între browsere - Motoarele JavaScript variază ușor între browsere, astfel încât codul JS care funcționează pentru un browser poate să nu funcționeze pentru altul. Ca și alte seturi de instrumente JavaScript, jQuery gestionează toate aceste inconsecvențe între browsere și oferă o experiență consecventă care funcționează în toate browserele.
• Extensibilitate - Evenimente noi, elemente și metode pot fi adăugate cu ușurință și apoi reutilizate ca plugin.

Poveste

jQuery a fost lansat inițial în ianuarie 2006 la BarCamp NYC de către John Resig și a fost influențat de biblioteca cssQuery a lui Dean Edwards. În prezent este întreținut de o echipă de dezvoltatori condusă de Timmy Willison (cu motorul de selecție jQuery - Sizzle, condus de Richard Gibson).

Particularități

Biblioteca include următoarele funcții:

• selectarea elementelor DOM folosind motorul de selectare multi-server open source Sizzle;
• evidențierea proiectului de manipulare DOM bazat pe selector CSS, care utilizează numele și atributele elementelor, cum ar fi id și clasa, ca criterii pentru selectarea nodurilor în DOM;
• Evenimente;
• efecte și animații;
• ajax;
• obiecte amânate și promit să controleze procesarea asincronă;
• analiza JSON;
• extensibilitate prin pluginuri;
• utilități precum descoperirea caracteristicilor;
• metode de compatibilitate care sunt disponibile nativ în browserele moderne, dar necesită versiuni anterioare, cum ar fi inArray() și each(), multi-browser (a nu fi confundat cu cross-browser).

Utilizare

Biblioteca jQuery este un singur fișier JavaScript care conține toate funcțiile comune DOM, evenimentele, efectele și Ajax. Poate fi inclus într-o pagină web prin link-ul către o copie locală sau către una dintre numeroasele copii disponibile pe serverele publice. Biblioteca are o rețea de livrare a conținutului (CDN) găzduită de MaxCDN.

Exemplu jQuery în PHP:

Stiluri

jQuery are două stiluri de utilizare:

Prin funcția $, care este o metodă din fabrică pentru obiectul jQuery. Aceste funcții, numite adesea comenzi, sunt numere întregi, deoarece toate returnează obiecte jQuery.

Prin $ sunt funcții de prefix. Acestea sunt funcții de serviciu care nu afectează direct obiectul.

Accesarea și manipularea mai multor noduri DOM în JQuery începe de obicei prin apelarea funcției $ cu șirul Acest lucru returnează un obiect jQuery care face referire la toate elementele care se potrivesc pe pagina HTML.

Mod fără conflicte

jQuery include un mod .noConflict() care eliberează controlul $. Acest lucru este util dacă jQuery este utilizat cu alte biblioteci care folosesc și $ ca identificator. În modul fără conflicte, dezvoltatorii pot folosi biblioteci ca înlocuitori pentru $ fără a pierde funcționalitatea.

Funcționalitate avansată

Funcțiile de apel invers pentru a gestiona evenimente pe elemente care nu au fost încă încărcate pot fi înregistrate în .ready() ca funcții anonime. Acești handlere vor fi apelați numai atunci când evenimentul se declanșează. De exemplu, următorul cod adaugă un handler pentru un clic de mouse pe un element de imagine img:

$("img").on("click",function())(

//tratează evenimentul click pe orice element img de pe pagină

Unele funcții returnează valori specifice (de exemplu, $("#input-user-email").Val()). În aceste cazuri, înlănțuirea nu funcționează deoarece valoarea nu face referire la un obiect jQuery.

Crearea de noi elemente

Pe lângă accesarea nodurilor DOM prin ierarhia obiectelor, este, de asemenea, posibil să se creeze elemente noi dacă șirul transmis ca argument la $() arată ca HTML. De exemplu, linia găsește un element de selecție HTML cu cărți de identitate și adaugă un element de opțiune cu valoarea VAG și textul Volkswagen:

$("# selectează mașini")

Adăugați($("")

Attr((valoare:VAG))

Anexați (Volkswagen)).

Utilități

Funcțiile jQuery prefixate cu $ sunt funcții utilitare care afectează proprietățile și comportamentul global. Următorul exemplu utilizează funcția each(), care iterează prin matrice:

$.each(,funcție())(

console.log(acest+1);

Acest exemplu de postare jQuery scrie 2, 3, 4 pe consolă.

Ajax

Este posibil să faceți Ajax folosind $.ajax() de la jQuery, un exemplu al căruia este metodele asociate pentru încărcarea și procesarea datelor de la distanță:

url: "/process/submit.php",

nume: Ioan

locație: Boston

)).terminat(funcție(msg)(

alert("Date salvate:"+msg);

)).fail(function(xmlHttpRequest, statusText, errorThrown)(

alerta(

„Nu am putut să vă trimitem mesajul.\N\n”

+"Solicitare HTTP XML:"+JSON.stringify(xmlHttpRequest)

+ ",\nText de stare:"+Text de stare

+ ",\nEroare aruncată:"+eroare aruncată);

În acest exemplu, serverul are dataname=John și locație=Boston pentru /process/submit.php. Când această solicitare se finalizează, este apelată o funcție pentru a alerta utilizatorul. Dacă cererea eșuează, acesta va alerta utilizatorul despre eroare, starea solicitării și eroarea specifică.

Pluginuri

Arhitectura jQuery permite dezvoltatorilor să creeze cod conectabil pentru a extinde diferite funcții. Există mii de plugin-uri disponibile online care acoperă o gamă largă de funcții, cum ar fi ajutoare Ajax, servicii web, liste dinamice, instrumente XML și XSLT, drag and drop, evenimente, gestionarea cookie-urilor și modal.

Există pluginuri alternative pentru motoarele de căutare, cum ar fi jquer.in, care adoptă abordări mai specializate, cum ar fi listarea numai a pluginurilor care îndeplinesc anumite criterii (de exemplu, cele cu un depozit de cod public). Dezvoltatorul oferă Centrul de învățare, o resursă jQuery pentru începători, care poate ajuta utilizatorii să înțeleagă JavaScript și să înceapă să dezvolte pluginuri.

jQuery UI

jQuery UI este o colecție de widget-uri GUI, imagini animate și teme implementate folosind jQuery CSS (o bibliotecă JavaScript), foi de stil în cascadă și HTML. Potrivit serviciului de analiză JavaScript Libscore, jQuery UI este folosită de peste 197.000 de site-uri web de top, ceea ce o face a doua cea mai populară bibliotecă JS. Cele mai cunoscute dintre ele: Pinterest, PayPal, IMDb, The Huffington Post și Netflix.

jQuery UI este gratuit și open source, distribuit de Fundație sub licența MIT. A fost publicat pentru prima dată în septembrie 2007.

jQuery Mobile

jQuery Mobile este un cadru web optimizat pentru atingere (cunoscut și ca cadru mobil). Obiectivul principal al dezvoltării este crearea unei infrastructuri compatibile cu o gamă largă de smartphone-uri și tablete, necesare pentru piața în creștere a tehnologiei digitale. Compatibil cu alte platforme de aplicații mobile, cum ar fi PhoneGap, Worklight și multe altele.

Acum 10 ani, când jQuery era la început, ecosistemul browserului era foarte divers și fiecare dintre produsele existente la acea vreme se lupta cu complexitatea gestionării elementelor DOM. Scopul ambițios pe care dezvoltatorii jQuery și l-au stabilit a fost să dezvolte o abordare universală pentru rezolvarea acestor probleme și să creeze un API care să funcționeze la fel de bine în orice situație.

Din câte au putut să judece, dar după 10 ani de existență, jQuery rămâne una dintre cele mai populare biblioteci JavaScript.

JavaScript în sine este acum un produs complet matur, bine documentat și susținut de toate browserele moderne. Comunitatea de browsere moderne este, de asemenea, mai consolidată și, în cele mai multe cazuri, poți fi sigur că, dacă, de exemplu, o pagină este afișată corect în Crome, atunci va arăta la fel în Firefox. QuerySelectors sunt, de asemenea, acceptate de aproape toate browserele moderne.

S-ar părea că istoria dezvoltării jQuery se îndreaptă spre apus - de ce să supraîncărcați paginile și să pierdeți cicluri suplimentare de procesor dacă majoritatea problemelor pot fi rezolvate folosind instrumente standard în limbaj? Pe de altă parte, într-o perioadă atât de lungă pentru industria calculatoarelor, au fost dezvoltate un număr imens de soluții care pot fi pur și simplu luate și utilizate, aici și acum.

Cred că această alegere ar trebui făcută chiar de dezvoltator în fiecare situație specifică, concentrându-se nu pe modă și tendințe, ci pe bunul simț și pe perspectivele de dezvoltare a creației sale.

În această recenzie, am colectat toate pluginurile jQuery gratuite despre care știu, care sunt în prezent dezvoltate în mod activ sau care au fost actualizate cel puțin o dată în ultimul an. Unele dintre ele le-am folosit și le-am folosit în mod activ în practica mea, pe altele le cunosc doar superficial, dar m-au impresionat prin capacitățile lor. Printre acestea se numara si altele exceptional de extraordinare, realizate cu mare imaginatie. Și chiar dacă nu găsești o modalitate de a le folosi în proiectele tale, poate te vor inspira să-ți creezi propriile soluții, chiar mai incredibile.

multiscroll.js O solutie interesanta pentru a atrage atentia vizitatorului - defilarea paginii se face sub forma a doua panouri, dintre care unul aluneca in sus si celalalt in jos, deschizand blocul urmator. De asemenea, funcționează excelent pe toate browserele, chiar și foarte învechite.

jquery.email-autocomplete.jsAdresele de e-mail trebuie introduse foarte des și, în ciuda faptului că este vorba de doar o duzină de caractere, există adesea dorința de a accelera acest proces. jquery.email-autocomplete.js are propria sa listă de domenii ale serviciilor de e-mail populare, pe baza cărora oferă completarea automată a adresei. Utilizatorul poate accepta această solicitare apăsând tasta Tab sau tasta săgeată dreapta sau poate continua să tastați manual. Pluginul funcționează bine și în versiunile mobile ale site-ului. Cu toate acestea, va trebui să modificați puțin pluginul pentru ca acesta să înceapă să lucreze cu serviciile de e-mail interne.

tinyDatePicker Acest plugin include multă putere în 5 kB. Calendare, planificatoare, rezervare de bunuri și servicii - aceasta nu este o listă completă a locurilor în care puteți utiliza tinyDatePicker. Rapid, ușor, scalabil - poate fi integrat cu ușurință în Bootstrap sau în orice alt cadru.

ReadRemaining.js Mulți dintre noi avem întotdeauna foarte puțin timp. Întotdeauna am invidiat oamenii care știu să o gestioneze corect. Probabil, autorul pluginului ReadRemaining.js este unul dintre acestea. Cine altcineva s-ar fi putut gândi să afișeze informații lângă text despre cât timp îți va lua să-l citești? Și pe măsură ce parcurgeți textul, recalculați acest timp pe baza vitezei de citire a unui anumit utilizator.

Un plugin foarte original care cred că le va plăcea vizitatorilor dacă aveți o mulțime de material text lung.

TooltipsterBonul clasic cu o gamă largă de funcții și opțiuni. Elementul în sine poate fi localizat oriunde în raport cu elementul părinte și poate conține orice elemente. Principalul lucru este să nu exagerați cu utilizarea sa, folosiți-l numai acolo unde este cu adevărat necesar.

Addel În ciuda numelui similar, acest plugin nu are nimic de-a face cu cântăreața Adelă. Numele său provine din cuvintele englezești ADd-DELete (adăugați și eliminați) și reflectă scopul său - de a adăuga sau ascunde în mod dinamic elemente HTML, în primul rând elemente de formular. Comenzile sunt flexibile și intuitive.

Chart.jsUn plugin în curs de dezvoltare care vă permite să afișați diferite tipuri de diagrame (8 tipuri în total, inclusiv cele mixte). Funcționează grozav pe toate browserele moderne și are o animație netedă și plăcută la schimbarea datelor.

jQuery Flip-Quote Un plugin foarte interesant care face două lucruri. În primul rând, rotește blocurile de citate prezente pe pagină în momentul în care blocul devine vizibil (excelent pentru a atrage atenția). În al doilea rând, când dați clic pe acest bloc, citatul din text este evidențiat, ceea ce vă permite să îl găsiți rapid în fluxul general de material. Se pare că citatele pot fi și distractive!

Algolia PlacesCăutare rapidă cu completare automată a adreselor poștale, orașelor, rutelor și tot ceea ce are legătură cu locații din întreaga lume datorită integrării cu baza de date OpenStreetMap. Un plugin foarte util pentru magazinele online.

HideSeekUn plugin de căutare live simplu, dar funcțional. Poate căuta pe baza diverselor criterii, poate efectua anumite acțiuni după găsirea datelor necesare și multe altele.

Timedropper Există un număr mare de soluții convenabile pentru a introduce un anumit moment în timp. Cu toate acestea, Timedropper se remarcă printre ele prin simplitatea și ușurința de utilizare. Schimbarea orelor și minutelor cu această mică filă distractivă este foarte convenabilă. Are mai multe opțiuni de personalizare, precum: formatul orei (12 sau 24 de ore), culoarea cadranului, test, fundal și posibilitatea de a schimba orele și minutele folosind rotița mouse-ului. Apropo, există un plugin similar pentru setarea datei.

LorySlider scris în JavaScript pur. Minimalist, dar suportă controlul prin gesturi, setarea unui element fix, afișarea butoanelor de control și afișarea simultană a mai multor imagini, inclusiv a celor de diferite lățimi.

CurrencyFormatter.js Un script foarte simplu și mic care afișează valori numerice în format monetar. Adaugă puncte, spații la cifre separate și un simbol valutar. Suportă 155 de monede mondiale.

Shave.jsJavascript, care va tăia cu grijă textul care nu se potrivește într-un container de o înălțime dată. Ocupă doar 1,5 kB și nu necesită biblioteci terțe.

jQuery Linechart O bibliotecă pentru construirea de diagrame de diferite tipuri și o cantitate destul de mare de date sursă. Scris în HTML/CSS/JS, dar există și o versiune bazată pe Angular.js

Freewall Un plugin jQuery incredibil de frumos pentru crearea unei interfețe în mosaic într-o varietate de stiluri: Windows Metro, Pinterest, plat obișnuit sau ierarhic, cu elemente dragabile și adăugate dinamic. Funcționează excelent atât pe browserele mobile, cât și pe cele desktop, inclusiv IE8. Un instrument cu adevărat versatil!

rowGrid.js Un plugin mic care aranjează imaginile sau alte elemente în rânduri egale de înălțime egală, ajustând dimensiunea și distanța dintre ele, astfel încât fiecare rând să se potrivească perfect în lățimea ferestrei. Adevărat, toate obiectele trebuie să aibă aceeași înălțime.

SlidebarsSlidebars adaugă un meniu sau o bară laterală la o pagină de site, care apare sau se ascunde cu o mișcare de alunecare atunci când cursorul face clic pe un buton de control. Versiunea 2 a acestui plugin a fost complet rescrisă și poate conține acum un număr nelimitat de elemente diferite. Are un API cu drepturi depline, abilitatea de a vă conecta propriile funcții de apel invers și de a vă abona la evenimente.

pagePiling.js este foarte asemănător cu pluginul multiscroll.js discutat în această recenzie, dar pagina nu este împărțită în două panouri, ci mutată în întregime. Puteți schimba direcția și viteza de deplasare. O alegere bună pentru un site web cu o singură pagină, care va arăta la fel de bine pe dispozitive mobile și pe ecrane mari.

AnimsitionScopul principal al Animsition este de a implementa un set mare și divers de efecte tranzitive diferite într-un singur plugin. Acestea includ estomparea și dezvoltarea, rotirea, reflectarea, mărirea etc. (total 58 bucăți).

ZooMove Nu-mi place mărirea dinamică a imaginilor la hover - mi se pare prea enervant acest efect. Dar dacă doriți cu adevărat să-l utilizați, atunci este mai bine să luați ZooMove în acest scop. Niciun alt plugin nu va oferi o scalare și derulare atât de lină și lină.

Rippleria Un plugin ușor care creează un efect de undă (similar cu ondulațiile de pe suprafața apei) pe orice element DOM: buton, element DIV, imagine. Foarte ușor de configurat și gestionat.

Flickity Glisor rapid, receptiv și controlat prin gesturi. În exterior, este destul de obișnuit, dar cu o documentație incredibil de atent scrisă și structurată. API complet și bine gândit.

Unslider Un slider foarte mic și simplu care are mai mulți parametri care vă permit să-și diversificați comportamentul: diferite direcții de mișcare (orizontală și verticală), derulare ciclică (nesfârșită), redare automată.

Lightcase.js Lightbox remarcabil cu animație CSS3. Funcționează cu DIV, imagini, text, obiecte flash, video și iframe. Încă nu acceptă jQuery 3, dar dezvoltatorii promit să rezolve acest lucru în versiunile viitoare.

PhotoSwipeO galerie de imagini minunată cu control atât al tastaturii de pe browserele desktop, cât și al gesturilor de pe mobil. Este posibil să setați o întârziere în încărcarea fotografiilor până când pagina în sine este complet încărcată. Și toată această distracție are o dimensiune de doar 14 kB.

StripStrip este o casetă de lumină care ocupă o anumită zonă a paginii, lăsând pagina însăși nu doar parțial vizibilă, ci și accesibilă pentru interacțiune. În plus, poate funcționa simultan ca glisor. În plus, alături de imagini, acceptă și conținut video de pe Youtube și Vimeo.

Turntable.js O abordare incredibil de impresionantă pentru prezentarea unui produs, mai ales dacă este un obiect fizic. De fapt, pluginul este foarte simplu și arată doar o grămadă de imagini. Cu toate acestea, datorită capacității de a controla procesul utilizând rotița mouse-ului sau gesturile de pe ecran, cu condiția ca setul să reprezinte imagini ale unui obiect luate din unghiuri diferite de vedere, privitorul are o iluzie completă a rotației acestuia.

Vide.jsPoate că cea mai ușoară modalitate de a adăuga un videoclip de fundal pe o pagină de site este să utilizați pluginul Vide.js. Funcționează pe toate browserele moderne, începând cu IE9+. Pe iOS și Android, care nu redă întotdeauna videoclipuri în fundal, va fi afișat un cadru fix.

Trianglificare Dacă nu doriți să încărcați pagina cu un videoclip de fundal, dar o imagine statică pare banală, încercați să trianglificați! Acestea sunt modele triunghiulare geometrice unice care vor adăuga o oarecare personalitate designului tău. Pluginul vă permite să schimbați culoarea, dimensiunea celulei și dispersia. Puteți chiar să scrieți propria implementare a algoritmului și să o utilizați în Trianglify.

LazeeMenu Dacă aveți un meniu ierarhic mare pe site-ul dvs. pe care doriți să îl păstrați simplu și clar, atunci LazeeMenu vă va fi, fără îndoială, util. Convertește listele imbricate neordonate într-un meniu derulant convenabil.

Web-ticker O linie de rulare, asemănătoare celor care pot fi văzute adesea pe ecranul televizorului în comunicatele de presă - ultimele evenimente, cotații bursiere, vremea... Nu știi niciodată ce poate fi plasat acolo! Deci, dacă vă place acest mod de a prezenta informațiile, luați în considerare Web-ticker.

InputmaskExperiența utilizatorului în acțiune. Îți amintești acele momente când a trebuit să reintroduci date într-un formular din cauza unei erori. Mai mult, eroarea a fost detectată numai după ce serverul a răspuns. Uita de asta! Inputmask nu numai că controlează și afișează vizual corectitudinea datelor introduse, ci previne și introducerea celor incorecte. Încercați, de exemplu, să introduceți luna a 13-a în câmpul pentru dată. Măștile pot fi foarte diferite - date, numere de telefon, e-mailuri și chiar expresii obișnuite.

Cu siguranță, ați auzit despre minunata bibliotecă Javascript numită jQuery. Ce este exact jQuery?

Cum să faci viața unui dezvoltator web mai ușoară? Unde sa încep? jQuery face scrierea Javascript mai distractivă și mai ușoară. Cu această bibliotecă, multe aspecte destul de complexe ale Javascript pot fi implementate cu ușurință în orice aplicație.

Lecția de astăzi vă va spune cum să începeți cu jQuery și cum să scrieți primul script.

Ce este jQuery?

jQuery este o bibliotecă Javascript foarte ușoară (unii o numesc cadru) care elimină durerea de cap din scrierea codului Javascript. Are o mulțime de caracteristici foarte puternice, cum ar fi urmărirea DOM, adăugarea de efecte și animații frumoase elementelor, tehnici și metode Ajax super simple. Pe pagina principală a site-ului jQuery, cea mai exactă descriere, după părerea mea:

jQuery este o bibliotecă rapidă și concisă care simplifică gestionarea evenimentelor, animația și interacțiunea Ajax pentru o dezvoltare web mai rapidă. jQuery este conceput pentru a schimba modul în care este scris JavaScript.

Care sunt beneficiile jQuery?

Să aruncăm o privire rapidă la câteva dintre avantajele și proprietățile acestui cadru:

Cantitatea de cod (necesară pentru ca scriptul să ruleze) este semnificativ redusă în comparație cu JavaScript, ceea ce înseamnă, la rândul său, mai puțin timp petrecut și un cod mai ușor de citit. Restul articolului va analiza câteva exemple.

Mult mai ușor de înțeles codul (spre deosebire de JavaScript). În lumea noastră, cu cât terminați mai repede procesul de programare, cu atât mai mult timp puteți dedica altor obiective.

Documentare foarte convenabilă și o comunitate activă, întotdeauna gata să ajute dacă este necesar.

Utilizarea Ajax devine mult mai ușoară. Aveți nevoie doar de 5 linii de cod (uneori mai puțin) pentru a crea o cerere simplă Ajax.

Un număr mare de plugin-uri cu care poți face aproape orice.

jQuery este distractiv :)

Cum să înceapă?

În primul rând, trebuie să vizitați pagina principală a site-ului oficial jQuery și să descărcați cea mai recentă versiune a acestui cadru. După descărcare, trebuie să încărcați acest fișier pe găzduirea dvs. și să scrieți un link către acest fișier în antetul documentului.

Alternativ, puteți folosi ajutorul marelui Google și puneți un link către serverul lor, unde se află întotdeauna cele mai recente versiuni ale oricăror cadre. Link-ul necesar poate fi găsit.

Este documentul gata?

Pentru a executa primul nostru script jQuery, trebuie să împachetăm întregul nostru script într-o funcție. Această funcție va fi executată când DOM-ul este complet gata (când „documentul este gata” - traducere literală din engleză). Rețineți că acesta este foarte asemănător cu evenimentul popular „onload”, dar nu este același lucru. Să ne uităm la un exemplu:

$(document).ready(function())( //Cod aici ));

Mai sus îi spunem jQuery să execute orice cod în interiorul funcției, cu DOM-ul complet gata. Acest lucru are avantajele sale, în ciuda faptului că poate să nu fie clar pentru mulți. În primul rând, folosind această tehnică, separăm complet Javascript de HTML. În al doilea rând, nu trebuie să așteptăm ca pagina să se încarce complet, DOM-ul este suficient pentru a se încărca.

Pentru codificatorii leneși sau pentru cei care numără fiecare caracter, puteți scurta și mai mult codul de mai sus:

$(funcție())( //Cod aici ));

Primul tău script jQuery

Știm deja cum să facem referință la bibliotecă. De asemenea, înțelegem puțin despre funcția document.ready. Acum este timpul să scrieți un scenariu simplu.

Să o facem cât se poate de simplă. Pentru acest exemplu, să facem o pagină cu text și un citat la sfârșit. Dorim să arătăm cotația doar dacă utilizatorul face clic pe buton. Aruncă o privire mai jos la codul necesar pentru asta:

$(document).gata(funcție())(
var myQuote = $("#my_quote");
myQuote.hide();
$(".button").click(funcție())(
myQuote.show(500);
});
});

Să aruncăm o privire mai atentă la întregul cod.

După cum am menționat mai sus, punem tot codul de executat în funcția $document.ready().

Atribuim id-ul citatului nostru (my_quote) variabilei myQuote. Acum avem acces la citatul cu id my_quote.

Asta e tot. Când apăsați butonul timp de 0,5 secunde, va fi afișat un citat. Foarte ușor, nu-i așa?

Va urma....

Vă mulțumim pentru atenție! Toate cele bune!

Este una dintre cele mai populare biblioteci JavaScript. Și acest lucru nu este surprinzător pentru cei care îl folosesc. Vă permite să simplificați, să accelerați și, cel mai surprinzător, să îmbunătățiți dezvoltarea scripturilor JavaScript.

Avantaje:

• Lucru foarte convenabil cu elemente bazate pe selectori CSS.
• Compatibilitate excelentă între browsere. Mulți programatori nu se gândesc la compatibilitatea între browsere, totuși, este necesară, deoarece browsere diferite pot procesa același cod diferit. ține cont de toate aceste nuanțe și nu mai trebuie să te gândești la asta.
• Capabilitati excelente de animatie. Animația decorează pagina și o face mai plăcută de utilizat. Este pur și simplu imposibil să faci animația mai ușor decât ceea ce este implementat în . Are posibilități enorme cu ușurință de utilizare.
• Un număr mare de plugin-uri gata făcute. Poate dura câteva zile pentru a face același glisor de imagine în JavaScript. Și puteți instala și configura un plugin gata făcut în câteva minute.

Pe baza acestui lucru, toți cei care dezvoltă scripturi în JavaScript ar trebui să știe. Și scopul acestei categorii este de a vă învăța cum să utilizați și, de asemenea, de a arăta exemple de utilizare, de exemplu, din propria mea practică.

După ce citiți articole despre jQuery, veți învăța:

1) Cum se instalează.

2) Care este funcția $() în .

3) Cum se selectează elemente în .

4) Cum să lucrați cu eșantionarea pe .

5) Cum să adăugați și să eliminați elemente în .

6) Cum se procesează evenimentele pe .

7) Cum se realizează animația pe .

8) Cum să măriți imaginile pe .

9) Cum să faci un buton neted „înapoi în sus” pe .

10) Cum să încărcați dinamic fișiere pe server.

11) Cum se face aspectul adaptiv pe .

12) Cum să trimiteți cereri asincrone către

13) Cum să trimiteți cereri Ajax folosind metodele $.post() și $.get().

14) Cum se face un buton radio sub forma unui glisor pe .

15) Cum se instalează glisorul slick.

16) Cum să faci o arhivă folosind un plugin pentru .

17) Cum să faci un tur al site-ului pe .

18) Cum să faci file frumoase folosind JQuery.

19) Cum să creați subtitrări pe un site web folosind un plugin pentru .

20) Cum să creați o bară de progres frumoasă folosind un plugin pentru .

21) Cum se face o lacăt folosind un șablon pe .

22) Cum să adăugați difuzoare la un site web cu biblioteca dynamo.js.

23) Cum să faci un videoclip în fundal folosind .

24) Cum se confirmă trimiterea e-mailului către .

25) Cum să faci un slider frumos și eficient folosind JQuery.

26) Cum să faci o listă derulantă frumoasă pe .

27) Cum să faci o fereastră pop-up frumoasă în JQuery folosind WebUI-Popover.

28) Cum să faci notificări frumoase în JQuery folosind pluginul Noty.

29) Cum să faci un meniu derulant frumos cu un efect interesant folosind CSS și .

30) Cum să faci un fundal de particule pe .

31) Cum să faci o comparație interactivă a două fotografii folosind JQuery.

32) Cum să faci un glisor circular în JQuery.

33) Cum să faci nori folosind JQuery.

34) Cum se afișează timpul scurs de la publicarea unei postări pe .

35) Cum să afișați caractere speciale în JQuery.

36) Cum să faci un numărător invers în JQuery.

37) Cum să faci un meniu personalizat folosind JQuery.

38) Cum să faci animație atunci când o pagină se încarcă pe .

40) Cum să faci un meniu glisant folosind JQuery.

41) JQuery LightGallery - plugin pentru crearea de galerii.

42) Cum să împachetați un element într-un aspect de browser sau dispozitiv pe .

43) Cum să faci o galerie frumoasă cu sortare folosind JQuery.

44) Cum să faci un obiect 3D interactiv folosind JQuery.

45) Cum să faci o fereastră pop-up folosind JQuery.

46) Cum să faci un efect de paralaxă de defilare.

47) Cum să faci un meniu de hamburger folosind CSS și JS. Partea 1.

48) Cum să faci un meniu de hamburger folosind CSS și JS. Partea 2.

49) Cum să faci o căutare de clic pop-up.

50) Cum se validează un formular folosind jQuery.

51) Cum să faci o mască de intrare a telefonului folosind jQuery.

52) Cum să lucrați cu biblioteca jQuery.

53) Cum să lucrați cu biblioteca jQuery UI.

54) Cum să utilizați jQuery UI Slider.

55) Cum să utilizați widgetul jQuery UI Datapicker.

56) Despre pluginul pentru file EasyTabs.

57) Cum să personalizați glisorul BxSlider.

58) Cum să puneți o numărătoare inversă pe un site web.

59) Cum se face un formular AJAX fără a reîncărca pagina.

60) Cum să creați efectul textului tipărit pe un site web.

61) Folosind un exemplu real despre animația unui vector SVG.

62) Filtre în jQuery.

63) Cum să obțineți un selector în jQuery.

64) Cum să manipulați atributele în jQuery.

65) Cum funcționează evenimentele mouse-ului jQuery.

66) Cum funcționează efectele jQuery.

67) Cum se face (partea 1).

68) Cum să faci o fereastră pop-up folosind jQuery (partea 2).

69) Cum se filtrează după primele litere folosind jQuery.

70) Cum să animați butonul de meniu hamburger.

71) Cum să faci un meniu de hamburger receptiv.

72) Cum să faci primul aspect mobil.

73) Cum să faci o ancoră netedă folosind jQuery.

74) Cum să derulați pagina în sus.

75) Cum să faci un widget de acordeon de bibliotecă.

Acesta, s-ar putea spune, este un fel de postare finală a ceea ce am reușit să „gătesc” menținând acest blog, folosind minunatul cadru jQuery.

• — două opțiuni universale foarte simple pentru crearea comutatoarelor de file. Exemplu în bara laterală.

— când treceți cu mouse-ul peste un link, apare o listă de linkuri pentru a salva pagina în marcaje sociale. Când faceți clic pe linkul „Adăugați la marcaje”, comutați între lista de servicii de marcare și rețelele sociale. Din păcate, nu toate rețelele sociale pe care le-am adăugat pe listă există în acest moment.

Am abandonat recent acest script în favoarea unei soluții mai frumoase - am creat un panou plutitor, pe care acum îl puteți vedea în stânga postării. Îmi place mai mult această opțiune și este mai potrivită cu tendințele moderne. Probabil voi scrie o postare despre crearea unui astfel de panou.

• — în momentul de față exemplul de lucru este situat în dreapta sus, sub formularul de căutare. Mă gândesc să elimin această caracteristică de pe blog. Mă întreb dacă cineva chiar îl folosește?
• - un script care modifică dimensiunea fontului paginii în funcție de dimensiunea ferestrei browserului. Pentru mine, nu am găsit încă o utilizare pentru acest script nicăieri.
• — sub formular apare o previzualizare pentru adăugarea unui comentariu pe măsură ce tastați. Îl puteți atașa la orice site cu un formular.
• — apare o previzualizare când faceți clic pe butonul corespunzător și este afișată în locul unui câmp de text. După părerea mea, aceasta este o soluție mai frumoasă decât prima opțiune. Acest script poate fi, de asemenea, atașat la orice site web.
• . Acest script este pentru utilizatorii interfeței web Twitter și fanii browserului Opera. Deși, cred că există o modalitate de a-l atașa la alte browsere.
• — Pe baza celei de-a doua opțiuni de mai sus, am creat acest plugin. Îmi place foarte mult cum a ieșit. Până în prezent, a fost descărcat de aproximativ 8 mii de ori.
• — un plugin asemănător celui precedent, doar pentru pagina de creare/editare a postărilor din panoul de administrare.
• - acesta este pentru cei care știu să conecteze scripturile UserJS la browser. Formular de conectare pop-up convenabil.
• — arată vizitatorului un mesaj de bun venit lângă formularul de adăugare a comentariilor dacă a lăsat un comentariu cel puțin o dată.

- aceasta este pentru utilizatorii WordPress care au funcția de cache de la Maxim.

Scriptul are o eroare cu UTF-8 - dacă scrieți numele cu litere rusești prin FireFox, atunci caracterele din cookie sunt inserate în moduri proaste. O soluție a fost sugerată în comentarii, dar nimic nu a funcționat pentru mine.

• — ideea a fost împrumutată de la Habrahabr. Are sens să-l plasezi atunci când se formează fire de discuții mari în comentariile site-ului.

— interfața funcționează folosind jQuery, iar traducerea funcționează folosind API-ul Google.

Am venit cu o soluție foarte reușită și populară - widgetul meu ocupă în prezent constant locul 2 în lista celor mai descărcate, ceea ce este o veste bună.

Și încă câteva scripturi jQuery despre care nu am scris nicăieri, dar care sunt folosite pe acest blog:

• Citarea unui comentariu - dacă selectați orice fragment de text în comentarii, în apropierea selecției apare un panou cu un link „inserați un citat în câmpul de răspuns”, textul selectat va fi inserat în formular; pentru adăugarea unui comentariu.
• Validarea câmpurilor „Nume” și „E-mail” din formular pentru adăugarea unui comentariu. Dacă unul dintre aceste câmpuri este completat incorect, ele sunt evidențiate.

Iată o listă considerabilă. Cred că va crește și mai mult în timp - îmi place foarte mult jQuery și procesul de scriere a scripturilor pe el.

În general, jQuery pentru mine este următoarea etapă în dezvoltarea mea ca dezvoltator web, după CSS și HTML. Dacă sunt deja destul de puternic în ultimele două tehnologii și nu am unde să mă mișc, atunci jQuery este, după cum se spune, un câmp nearat și există loc de mers în această direcție.

Bloggerul Max1mus pe blogul său personal publică modalități actuale de a face bani pe internet, informații utile despre blogging, SEO, SMO și, de asemenea, împărtășește experiența sa personală despre promovarea site-ului.