Exemplu de jQuery. Exemple simple de script-uri pe jQuery

jQuery este o bibliotecă jаvascript care permite dezvoltatorilor web să adauge funcții suplimentare pe site-urile lor. Acesta este disponibil cu sursa open source si este oferit gratuit sub licenta MIT. În ultimii ani, jQuery a devenit cea mai populară bibliotecă jаvascript folosită în dezvoltarea web.

Exemplu JQuery

Pentru a implementa jQuery, dezvoltatorul web trebuie să se refere la fișierul jаvascript din codul HTML al paginii Web. Unele site-uri web găzduiesc o copie locală, în timp ce altele se leagă de o bibliotecă găzduită de Google sau de un server. De exemplu, o pagină web poate încărca o bibliotecă jQuery utilizând următoarea linie în secțiune HTML (exemplu jQuery și cookie):

Exemple JQuery și Ajax

După încărcarea bibliotecii, pagina web poate apela orice funcție susținută de bibliotecă. Printre exemplele obișnuite se numără modificarea textului, prelucrarea datelor din formular, mutarea elementelor din pagină și executarea animațiilor. jQuery poate lucra, de asemenea, cu codul Ajax și limbile de scripting, cum ar fi PHP și ASP, pentru a accesa datele din baza de date. Deoarece jQuery rulează pe partea clientului (și nu pe serverul web), acesta poate actualiza informațiile de pe pagina web în timp real fără a reîncărca pagina. Un exemplu comun este autocompletarea, în care formularul de căutare afișează automat date generale atunci când introduceți o interogare.

bibliotecă beneficii

În plus față de licența gratuită, un alt motiv major pentru care jQuery a câștigat o astfel de popularitate este compatibilitatea cu browserul încrucișat. Deoarece fiecare browser afișează HTML, CSS și jаvascript în moduri diferite, un dezvoltator web poate fi dificil de a face același site în toate browserele. În loc să scrie funcții personalizate pentru fiecare browser, un dezvoltator web poate utiliza o singură funcție jQuery care va funcționa în Chrome, Safari, Firefox și Internet Explorer. Suportul pentru mai multe browsere a forțat mulți dezvoltatori să treacă de la standardul jаvascript la jQuery, deoarece acest lucru simplifică foarte mult procesul de codificare.

descriere

Sintaxa jQuery este folosită pentru a simplifica navigarea documentelor, selecta elemente DOM, a crea animații, a procesa evenimente și a dezvolta aplicații Ajax. jQuery oferă de asemenea dezvoltatorilor posibilitatea de a crea pluginuri în partea de sus a bibliotecii jаvascript. Acest lucru permite programatorilor să creeze structuri abstracte pentru interacțiune și animație la un nivel scăzut, efecte avansate și widgeturi tematice de nivel înalt. O abordare modulară a bibliotecii jQuery vă permite să creați pagini web dinamice puternice și aplicații web.

Un set de funcții de bază:

• selectarea elementelor DOM;
• eludarea și manipularea cu ajutorul unui mecanism de selecție;
• un nou stil de programare;
• algoritmi pentru îmbinarea și structurile de date DOM.

Stilul a influențat arhitectura altor cadre jаvascript, cum ar fi YUI v3 și Dojo, și a stimulat, de asemenea, crearea unui standard API Selectors.

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

Privire de ansamblu asupra

jQuery este o bibliotecă de elemente cu un model de document obiect (DOM). DOM este o reprezentare a structurii copac a tuturor elementelor unei pagini web. jQuery simplifică sintaxa pentru căutarea, selectarea și gestionarea acestor elemente DOM. Biblioteca poate fi folosită pentru a căuta elemente într-un document cu o anumită proprietate (de exemplu, toate elementele cu tag-ul H1), o schimbare într-una sau mai multe dintre atributele sale (culoare, vizibilitate), sau adoptarea unui răspuns la un eveniment (cum ar fi clic).

desen

Biblioteca folosește astfel de funcții jаvascript populare, cum ar fi decolorări și decolorări atunci când ascunde elemente, animă și lucrează cu elementele jQuery CSS. jQuery oferă, de asemenea, o paradigmă pentru manipularea evenimentelor care depășește selectarea și manipularea elementelor DOM. Scopul evenimentului și definirea funcției de apel invers se realizează într-un singur pas dintr-un singur loc în cod.

Principii de dezvoltare folosind jQuery (exemple):

• Separarea jаvascript și a bibliotecii HTML oferă o sintaxă simplă pentru adăugarea programatorilor de evenimente în DOM utilizând jаvascript, mai degrabă decât adăugarea de atribute de eveniment HTML pentru a apela funcțiile JS. Astfel, încurajează dezvoltatorii să separe complet codul jаvascript din marcajul HTML.
• Brevetarea și claritatea - contribuie la concizie și claritate prin instrumente cum ar fi lanțurile și numele abreviat al funcțiilor.
• Eliminarea incompatibilităților încrucișate în browser - Motoarele jаvascript ale diferitelor browsere diferă ușor, astfel încât codul JS care funcționează pentru un singur browser poate să nu funcționeze pentru altul. Ca și alte instrumente jаvascript, jQuery se ocupă de toate aceste inconsecvențe încrucișate în browser și oferă o interfață consistentă care funcționează în diferite browsere.
• Extensibilitate - evenimente, elemente și metode noi pot fi adăugate cu ușurință și apoi reutilizate ca plug-in.

poveste

jQuery a fost lansat inițial în ianuarie 2006 în BarCamp NYC de John Recig și a fost influențat de biblioteca timpurie cssQuery a lui Dean Edwards. În prezent, este susținută de o echipă de dezvoltare condusă de Timmy Willison (cu motorul selector jQuery - Sizzle, condus de Richard Gibson).

caracteristici

Biblioteca include următoarele funcții:

• selectarea elementelor DOM utilizând mecanismul multi-server al selectorului Sizzle open-source;
• evidențiind un proiect de manipulare DOM bazat pe selectori CSS care utilizează nume de elemente și atribute, cum ar fi id și clasă, ca criterii pentru selectarea nodurilor în DOM;
• evenimente;
• efecte și animații;
• ajax;
• obiecte amânate și promițând să controleze procesarea asincronă;
• parsarea JSON;
• extensibilitate prin pluginuri;
• Utilități, cum ar fi detectarea funcțiilor;
• metode de compatibilitate care sunt disponibile inițial în browserele moderne, dar necesită versiuni anterioare, cum ar fi inArray () și fiecare (), un multi-browser (care nu trebuie confundat cu browserul încrucișat).

utilizarea

Biblioteca jQuery este un singur fișier jаvascript care conține toate funcțiile DOM, evenimente, efecte și Ajax. Acesta poate fi inclus într-o pagină web prin trimitere la o copie locală sau la una din copiile multiple disponibile pe servere publice. Biblioteca are o rețea de distribuire a conținutului (CDN) găzduită de MaxCDN.

Exemplu de jQuery în PHP:

stiluri

jQuery are două stiluri de utilizare:

1. Prin funcția $, care este metoda din fabrica pentru obiectul jQuery. Aceste funcții, numite adesea comenzi, sunt intacte, deoarece toate returnează obiectele jQuery.
2. Prin funcțiile $ - prefix. Acestea sunt funcții de serviciu care nu afectează direct obiectul.

Accesarea jQuery și gestionarea mai multor noduri DOM începe, de obicei, apelând funcția $ folosind un șir Selector CSS. Aceasta returnează un obiect jQuery care face trimitere la toate elementele relevante din pagina HTML.

Mod fără conflicte

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

Funcționalitate avansată

Comenzile de revenire pentru gestionarea evenimentelor pe elementele care nu au fost încă încărcate pot fi înregistrate în interiorul .ready () ca funcții anonime. Acești utilizatori vor fi chemați numai atunci când evenimentul este declanșat. De exemplu, următorul cod adaugă un handler pentru a face clic pe un element de imagine img:

$ (funcția () {

$ (`img`) la (`clic`, funcția () {

// procesează evenimentul clic pe orice element img de pe pagină

});

}).

Unele funcții returnează anumite valori (de exemplu, $ (`# input-user-email`). Val ()). În aceste cazuri, lanțul nu funcționează, deoarece valoarea nu se referă la obiectul jQuery.

Crearea de elemente noi

Pe lângă accesarea nodurilor DOM prin ierarhia obiectului, este posibilă și crearea de elemente noi dacă șirul a trecut ca argument la $ () arata ca HTML. De exemplu, o linie găsește un element de selecție HTML cu carduri de identitate și adaugă un element de opțiune cu o valoare VAG și un text Volkswagen:

$ (`# select carmakes`)

.adăugați ($ (`„)

.attr ({valoare: VAG})

.anexe (Volkswagen)).

Utilități

Funcțiile JQuery cu prefixul $ sunt funcții utilitare care afectează proprietățile globale și comportamentul. Următorul exemplu folosește funcția each (), care se repetă prin matrice:

$ (fie [1,2,3], funcția () {

console.log (aceasta este + 1);

});

Acest exemplu de post jQuery scrie 2, 3, 4 la consola.

Ajax

Puteți efectua solicitări Ajax cross-browser folosind jQuery $ .ajax (), care poate fi un exemplu de metode asociate pentru încărcarea și procesarea datelor de la distanță:

$ .ajax ({

tip: POST,

url: `/process/submit.php`,

date: {

nume: John,

locație: "Boston",

}

}) făcut (funcție (msg) {

alertă ("Date salvate: `+ msg);

}) eșuează (funcția (xmlHttpRequest, statusText, errorThrown) {

notificare (

`Mesajul dvs. nu a putut fi trimis. N n`

+`Cerere Http XML:` + JSON.stringify (xmlHttpRequest)

+ `, nStatus Text:` + statusText

+ `, nError Thrown:` + errorThrown);

});

În acest exemplu, serverul specifică numele de date = John și locația = Boston pentru /process/submit.php. Când această solicitare este finalizată, funcția este apelată pentru a avertiza utilizatorul. Dacă cererea nu reușește, avertizează utilizatorul despre eroare, starea solicitării și eroarea specifică.

Plugin-uri

Arhitectura jQuery permite dezvoltatorilor să creeze codul plug-in pentru a extinde diverse funcții. Pe Internet, mii de plug-in-uri disponibile care acoperă o varietate de funcții, cum ar fi ajutoare Ajax, servicii web, liste dinamice, XML și instrumentele XSLT, drag and drop, de evenimente, de manipulare cookie, și ferestre modale.

Există plugin-uri alternative pentru motoarele de căutare, cum ar fi jquer.in, care folosesc abordări mai specializate, cum ar fi listarea doar plugin-uri care îndeplinesc anumite criterii (de exemplu, cele care au un depozit de cod public). Dezvoltatorul oferă un „Learning Center» - resursa jQuery pentru incepatori care pot ajuta utilizatorii să înțeleagă jаvascript și să înceapă în curs de dezvoltare plug-in-uri.

jQuery UI

jQuery UI este un set de widget-uri GUI, efecte vizuale animate și teme implementate cu jQuery CSS (biblioteci jаvascript), foi de stil cascadă și HTML. Conform serviciului de analiză jаvascript, Libscore, interfața cu utilizatorul jQuery este utilizată pe mai mult de 197 000 de site-uri web cele mai bune, ceea ce îl face a doua cea mai populară bibliotecă JS. Cele mai faimoase dintre ele: Pinterest, PayPal, IMDb, The Huffington Post și Netflix.

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

jQuery Mobile

jQuery Mobile este o infrastructură web cu optimizarea senzorilor (cunoscută și sub numele de infrastructură mobilă). Principala atenție a dezvoltării este acordată creării unei infrastructuri compatibile cu o gamă largă de smartphone-uri și computere compacte necesare pentru piața în creștere a echipamentelor digitale. Compatibil cu alte platforme de aplicații mobile, cum ar fi PhoneGap, Worklight și multe altele.