jQuery

jQuery software
Tip	Bibliotecă software (nu este listată )
Dezvoltator	John Resig
Data primei versiuni	Ianuarie 2006
Ultima versiune	3.6.0 (2 martie 2021)
Sistem de operare	Multiplatform
Limba	JavaScript
Licență	Licență GNU GPL , MIT [1] ( licență gratuită )
Site-ul web	jquery.com/
Editați datele pe Wikidata · Manual

jQuery este o bibliotecă JavaScript pentru aplicații web , distribuită ca software gratuit , distribuită în condițiile licenței MIT . ^[1] . A fost creat cu scopul de a simplifica selecția, manipularea, gestionarea evenimentelor și animația elementelor DOM în paginile HTML , precum și simplificarea utilizării funcționalității AJAX , a gestionării evenimentelor și a manipulării CSS .

Caracteristicile sale permit dezvoltatorilor JavaScript să abstractizeze interacțiunile la nivel scăzut cu conținutul paginii HTML . Abordarea modulară a JQuery permite crearea simplificată de aplicații web versatile și conținut dinamic. În 2020, jQuery este cea mai utilizată bibliotecă JavaScript de pe Internet, ceea ce înseamnă că este prezentă în 74,4% din primele 10 milioane de site-uri Internet cele mai populare conform W3Techs ^[2] .

Dezvoltare

Publicat pentru prima dată în ianuarie 2006 de John Resig , este un proiect activ și în dezvoltare, gestionat de un grup de dezvoltatori condus de Dave Methvin .. ^[3] .

Selecția obiectelor DOM se bazează pe motorul numit Sizzle , un proiect Open Source derivat din jQuery ^[4] .

API

Cadrul oferă metode și funcții pentru a gestiona mai bine aspectele grafice și structurale, cum ar fi poziția elementelor, efectul de clic pe imagini, manipularea modelului de obiect document și multe altele, menținerea compatibilității între diferite browsere și standardizarea obiectelor puse la dispoziție de către interpret. .

Miezul

Nucleul jQuery oferă:

• Constructori pentru utilizarea bibliotecii în sine
  • Pentru a obține articole printr-un selector (a se vedea mai jos)
  • Pentru a obține un element referindu-l ca parametru
  • Pentru a crea un element de la zero începând de la cod HTML brut
• Metodele și proprietățile pentru accesarea elementelor conținute într-un obiect jQuery
  • Pentru a cunoaște numărul de elemente (funcția size() sau length proprietății)
  • Pentru a itera fiecare element ( each() funcție)
  • Pentru a cunoaște selectorul utilizat sau elementul DOM la care se face referință (selector de proprietăți sau context)
  • Pentru a obține și manipula elemente native (funcțiile get () și index ())
• Metode pentru crearea și utilizarea listelor și a cozilor (de obiecte și funcții)
• Metode de extindere a cadrului folosind plugin-uri (function extend() și fn.extend() )
• Metode de animare folosind funcțiile show() , hide() și animate()

Selectoare

Selectorii sunt instrumentele folosite pentru a obține acces la elementele HTML ale paginii, utilizând aceeași sintaxă ca selectorii Cascading Style Sheet , și anume:

• Pentru a selecta un element pe baza id-ului său (# image_24)
• Pentru a selecta unul sau mai multe elemente pe baza clasei ( .thumb sau div.modale sau .class1.subclass )
• Pentru a selecta ierarhic, folosind cuvinte cheie precum strămoș , frate , prev și altele
• Pentru a selecta pe baza pseudo-claselor ( :first :last :not , etc.)
• Pentru a selecta pe baza atributelor sau a conținutului ( :contain :has :contain :hidden , [type="text"] etc.)

Atribute

Atributele sunt obținute sau modificate diferit în funcție de browser; jQuery ajută dezvoltatorul oferind o singură funcție frontend valabilă atât ca getter (obțineți o valoare), cât și ca setter (setați o valoare), în funcție de specificarea sau nu a unui parametru:

• Metoda pentru atribute generice ( attr() )
• Metode pentru cursuri
  • Pentru a ști dacă un element aparține unei anumite clase ( hasClass() )
  • Pentru a seta sau elimina o clasă ( addClass() , removeClass() și comutatorul toggleClass() )
• Metode pentru conținut
  • Pentru cod HTML, cum ar fi proprietatea innerHTML ( html() )
  • Pentru conținut textual ( text() )
  • Pentru valoare, de obicei pentru câmpurile de formular, indiferent dacă sunt câmpuri de text, câmpuri cu mai multe linii, liste derulante sau casetă de selectare ( val() )

DOM Traversing

Pentru a reveni la elementele părinte, copii, pentru nodurile frunze sau pentru elementele ulterioare, cadrul oferă numeroase metode și funcții pentru parcurgerea și derularea DOM a documentului.

Manipularea

Manipularea DOM este simplificată prin mai multe metode:

• Pentru a adăuga și a elimina articole pe pagină sau într-o anumită locație
• Pentru a înlocui elemente sau pentru a le înconjura cu conținut nou
• Pentru a șterge toate elementele conținute într-un anumit nod sau pentru a le copia

CSS

Pentru a controla stilul elementelor, într-un mod simplificat și standardizat. Sunt furnizate metode:

• Pentru a modifica, elimina sau adăuga proprietăți grafice ale tuturor elementelor selectate
• Pentru obținerea și înlocuirea rapidă a proprietăților care sunt de obicei dificil de manipulat
  • Derularea unei pagini sau a unui element
  • Dimensiunile ( height() și width() )
  • Dimensiunile interne (excluzând astfel marja)
  • Decalajul de la margini

Evenimente

Cadrul recunoaște obiectele de tip eveniment și le modifică proprietățile, făcându-le uniforme, simplificându-le gestionarea, propagarea și oferind o modalitate utilă de a împiedica browserul să continue execuția (de exemplu, făcând clic pe un link). Alocarea de evenimente precum clic, încărcare, trecere cu mouse-ul este gestionată eficient și nu intruzivă.

Efecte bidimensionale

Exemplu de glisor JQuery

Efectele puse la dispoziție de cadru servesc la manipularea vizibilității elementelor selectate. Le puteți afișa sau ascunde cu diferite efecte, inclusiv:

• Fading efect, decolorare sau micșorați
• Efect de alunecare, efectul de alunecare
• Afișaj ascuns sau plat

Puteți defini cu ușurință efectele personalizate specificând proprietatea CSS de manipulat (de exemplu: înălțime, chenar și multe altele), precum și specificând durata efectului și o funcție de apel invers pentru a rula după animație.

Efecte tridimensionale

Cu JQuery puteți crea vizite virtuale ^[5] și câteva efecte care simulează web-ul 3D ^[6] .

Galerie JQuery cu efect 3D

AJAX

Gestionarea apelurilor asincrone ( AJAX ) este într-adevăr simplificată, iar funcțiile sunt furnizate:

• Pentru a încărca conținut dinamic
  • Funcție simplă de încărcare
  • Funcția de încărcare a codului HTML cu inserare automată
• Pentru a efectua cereri asincrone (cu metoda GET / POST)
• Pentru interacțiunea cu JavaScript
  • Funcție de încărcare a unui obiect JSON
  • Funcție pentru a încărca un fișier JavaScript la distanță și a-l executa automat

Evenimentele AJAX sunt, de asemenea, gestionabile într-un mod simplificat, pentru completarea formularelor de intrare, gestionarea erorilor și trimiterea datelor.

Utilitate

Biblioteca oferă comenzi rapide pentru gestionarea vectorilor, pentru manipularea șirurilor și pentru recunoașterea browserelor și a obiectelor / funcțiilor.

Caracteristici

Obiectul principal, denumit jQuery , este utilizat în mod generic prin aliasul său, caracterul $ , pentru a menține coerența cu biblioteca Prototype.

 // Toate linkurile
var l1 = jQuery ( 'a' );
var l2 = $ ( 'a' );

// l1 și l2 sunt obiecte diferite
// dar conținutul lor este identic

Selectorii, în jQuery, folosesc sintaxa selectorilor css; sunt, prin urmare, conectabile și foarte precise în returnarea elementelor dorite.

 // Returnează toate imaginile clasei class1 și / sau class3
$ ( 'img.class1, img.class3' );

Concatenare cod ( lanțabilitate ); aproape fiecare funcție returnează același obiect jQuery de la care a fost apelată. Datorită acestui fapt, liniile de cod sunt reduse semnificativ.

 var links = $ ( 'a' );

link-uri . css ( „culoare” , „roșu” );
link-uri . css ( „lățime” , „150px” );
linkuri . spectacol ( 1000 );
link-uri . faceți clic pe ( funcție () {
	alert ( „a făcut clic!” );
} );

Poate fi rescris după cum urmează

 $ ( „a” ). css ( { color : 'red' , width : '150px' } )
      . spectacol ( „1000” )
      . faceți clic pe ( funcție () {
      	alert ( „a făcut clic!” );
      } );

Biblioteca nu se ciocnește cu alte cadre precum Prototype , MooTools sau YUI și, prin urmare, poate fi utilizată împreună cu acestea.

jQuery se mândrește cu o varietate decentă de plugin-uri care îi extind funcționalitatea. ^[7] Printre pluginurile oficiale se numără JQuery UI ( interfață utilizator pentru jQuery), creat pentru a simplifica și standardiza gestionarea unei interfețe grafice formate din teme, widget-uri, animații, tranziții etc.

Versiuni

Alternative

Același subiect în detaliu: HTML5 , CSS , JavaScript și jQuery UI .

Mai multe articole au subliniat că, deși jQuery a fost o bibliotecă obligatorie pentru efectuarea anumitor sarcini cu JavaScript, cu cele mai recente versiuni de JavaScript și browsere, caracteristicile jQuery au devenit caracteristici JavaScript standard. ^[16]

De-a lungul anilor, s-a născut Vanilla JS, un cadru JavaScript fals, al cărui scop este să promoveze utilizarea JavaScript fără un cadru. ^[17]

Odată cu nașterea HTML 5 și CSS 3, unele posibilități, cum ar fi crearea de galerii de imagini, efecte și meniuri derulante, sunt fezabile fără a utiliza JQuery și / sau JQuery UI și / sau Ajax , ceea ce cu HTML 4 și CSS 2 a fost adesea imposibil a face ^{[18] [19] [20] [21]} .

Exemple de utilizare JQuery

• 

  Efect JQuery Zoom la trecerea peste o imagine

• 

  Efecte JQuery acordeon și filă

• 

  Efectul „reflector” JQuery asupra cursorului

Notă

Elemente conexe

• UI jQuery

Alte proiecte

• Wikibooks conține texte sau manuale despre jQuery
• Wikimedia Commons conține imagini sau alte fișiere pe jQuery

linkuri externe

• ( RO )Site oficial , pe jquery.com .
• JQuery , pe packages.debian.org .
• ( EN ) JQuery , pe GitHub .
• Depozitul sursă JQuery , la github.com .
• ( EN ) JQuery , în Free Software Directory .
• ( RO ) Site-ul fundației jQuery , pe fundația js .
• ( EN ) Site de dezvoltatorul John Resig , la ejohn.org .
• ( EN ) Site-ul web complet al documentației bibliotecii la learn.jquery.com .
• Comunitate italiană pe jQuery cu documentație și forum , pe jqueryitalia.org .
• (RO) jQuery vs MooTools pe jqueryvsmootools.com. - articol tehnic pentru comparație cu bibliotecile MooTools

Portal IT

Portal de software gratuit