Descoperirea caracteristicilor ascunse ale jQuery

jQuery nu este întotdeauna așa cum apare. Există multe lucruri interesante care se întâmplă sub suprafață și există multe metode care așteaptă să fie descoperite și multe posibile utilizări ale API-ului jQuery pe care probabil că nu le-ați avut în vedere înainte. În acest articol vă voi lua câteva lucruri pe care le-am descoperit despre jQuery.

1. Înțelegeți jQuery!

Când sunați 'JQuery' ce se întâmplă?

Funcția jQuery însăși este foarte simplă:

 jQuery = funcția (selector, context) // Obiectul jQuery este de fapt doar constructorul init 'îmbunătățit' returnează jQuery.fn.init (selector, context); ;

Sub pielea sa, funcția jQuery (denumită în mod obișnuit funcția "wrapper") returnează pur și simplu un obiect jQuery instanțiat - adică o instanță a 'JQuery.fn.init' constructor.

Acest lucru este util să știți; cu aceste informații știm că de fiecare dată când sunăm 'JQuery' de fapt, creăm un obiect complet unic, cu un set de proprietăți. jQuery este inteligent prin faptul că vă oferă un obiect care poate fi tratat ca o matrice. Fiecare dintre elementele dvs. (toate împreună, cunoscută în mod obișnuit drept "colecția") este menționată în interiorul obiectului sub un index numeric, la fel ca într-un matrice. Și jQuery dă și acest obiect a 'lungime' proprietate, la fel cum v-ați aștepta de la o matrice. Aceasta deschide o lume a posibilităților. Pentru unul, înseamnă că putem împrumuta unele funcționalități 'Array.prototype'. lui jQuery 'felie' metoda este un bun exemplu al acestui lucru - modificat de la sursa:

 / * ... jQuery.fn.extend (... * / slice: function () retur acest.pushStack (Array.prototype.slice.apply (this, arguments), slice, Array.prototype.slice.callargumente) .join (",")); , / * ... * /

Nativul 'felie' metoda nu-i pasă 'acest' nu este o reală gamă - va fi bine cu tot ce are a 'lungime' proprietate și [0], [1], [2] etc.

Există și alte proprietăți interesante în cadrul acestui obiect jQuery -- '.Selector' și '.context' vor reflecta, de cele mai multe ori, argumentele în care treci "jQuery (...)".

 var jqObject = jQuery ('a'); jqObject.selector; // => "a"

Un lucru important este faptul că jQuery vă va oferi uneori noi obiecte jQuery cu care să lucrați. Dacă executați o metodă care modifică colecția într-un fel, cum ar fi '.părinţi()', atunci jQuery nu va modifica obiectul curent; va trece pur și simplu unul nou:

 var originalObject = jQuery ('a'); var altObject = originalObject.parents (); originalObject === altObject; // => false

Toate metodele care par să muteze colecția într-un fel returnează un obiect jQuery nou nou - puteți totuși să accesați obiectul vechi deși, prin intermediul '.Sfârșit()', sau mai mult, via '.PrevObject'.

2. Crearea elementelor de pâine și unt

Centrală a capabilităților DOM lui jQuery este sintaxa de creare a elementelor sale. 1.4 a adus cu ea o modalitate cu totul nouă de a crea elementele dvs. rapid și succint. De exemplu.

 var myDiv = jQuery ('', id:' my-new-element ', clasa:' foo ', css: color:' red ', backgrondColor:' #FFF ' alert ("Apăsat!"); , html: jQuery ('', href:' # ', faceți clic pe: funcția () // face ceva return false; );

Încă de la 1.4 puteți trece un al doilea argument la funcția jQuery atunci când creați un element - obiectul pe care îl veți trece va acționa, în cea mai mare parte, ca și cum l-ați trece la ".attr (...)". Cu toate acestea, jQuery va cartografia unele dintre proprietăți propriilor metode, de exemplu, 'clic' hărțile de proprietăți ale lui jQuery 'clic' (care leagă un manipulator de evenimente pentru 'clic' eveniment) și 'Css' hărți pentru jQuery 'Css' metoda etc.

Pentru a verifica ce hartă a proprietăților în metodele jQuery, deschideți consola și tastați 'JQuery.attrFn'.

3. Serializați intrările

jQuery oferă o metodă pe care o puteți utiliza pentru a serializa toate intrările din cadrul uneia sau mai multor formulare. Acest lucru este util atunci când trimiteți date prin XHR ("Ajax"). A fost în jQuery pentru o lungă perioadă de timp, dar nu este vorba de multe ori și atât de mulți dezvoltatori nu-și dau seama că este acolo. Trimiterea unui întreg formular prin intermediul Ajax, folosind jQuery, nu ar putea fi mai simplă:

 var myForm = $ ('# formula mea'); jQuery.post ('submit.php', myForm.serialize (), function () alert ('Datele au fost trimise!'););

jQuery furnizează de asemenea 'SerializeArray' care este concepută pentru a fi utilizată în forme multiple și 'Param' funcția helper (sub spațiul de nume jQuery) care ia un obiect obișnuit și returnează un șir de interogare, de ex.

 var data = nume: 'Joe', varsta: 44, profesie: 'Web Developer'; jQuery.param (date); // => "nume = Joe & vârstă = 44 & profesie =Web Developer +“

4. Animați-vă de orice

lui jQuery 'anima' metoda este probabil cea mai flexibila metoda a lui jQuery. Poate fi folosit pentru a anima ceva, nu doar proprietățile CSS și nu doar elementele DOM. Acesta este modul în care utilizați în mod normal 'anima':

 jQuery ("caseta #") animate (left: 300, top: 300);

Când specificați o proprietate de animat (de ex. 'top') jQuery verifică dacă animați ceva cu o proprietate de stil ('Element.style') și verifică dacă proprietatea specificată ('top') este definită la 'stil' -- dacă nu este atunci jQuery pur și simplu actualizări 'top' pe elementul însuși. Iată un exemplu:

 jQuery ('caseta #') animate (top: 123, foo: 456);

'top' este o proprietate CSS validă, deci jQuery se va actualiza 'Element.style.top', dar 'Foo' este nu o proprietate CSS validă, deci jQuery va actualiza pur și simplu 'Element.foo'.

Putem folosi acest lucru în avantajul nostru. Să spunem, de exemplu, că doriți să animați un pătrat pe o pânză. Mai intai sa definim un constructor simplu si a 'a desena' metoda care va fi apelata la fiecare pas al animatiei:

 funcția Pătrat (cnvs, lățime, înălțime, culoare) this.x = 0; this.y = 0; this.width = width; this.height = înălțime; this.color = culoare; this.cHeight = cnvs.height; this.cWidth = cnvs.width; this.cntxt = cnvs.getContext ("2d");  Square.prototype.draw = funcția () this.cntxt.clearRect (0, 0, this.cWidth, this.cHeight); this.cntxt.fillStyle = aceasta.color; this.cntxt.fillRect (this.x, this.y, this.width, this.height); ;

Am creat constructorul nostru "Square" și una dintre metodele sale. Crearea unei panze și apoi animarea acesteia nu ar putea fi mai simplă:

 // Creeaza o

Acesta este un efect foarte simplu, dar demonstrează în mod clar posibilitățile. Puteți vedea acțiunea aici: http://jsbin.com/ocida (aceasta va funcționa numai în browserele care acceptă panza HTML5)

5. jQuery.ajax Returnează Obiectul XHR

Funcțiile utilitare Ajax ale jQuery ('JQuery.ajax', 'JQuery.get', 'JQuery.post') retur toate 'XMLHttpRequest' obiect pe care îl puteți utiliza pentru a efectua operații ulterioare la orice solicitare. De exemplu:

 var curRequest; jQuery ( 'button.makeRequest').faceți clic pe (funcția () curRequest = jQuery.get ('foo.php', funcția (răspunsul) alert ('Data:' + response.responseText););); jQuery ( 'button.cancelRequest').faceți clic pe (funcția () if (curRequest) curRequest.abort (); // abort () este o metodă de XMLHttpRequest);

Aici facem o cerere ori de câte ori 'MakeRequest' butonul este apăsat - și anulează solicitarea activă dacă utilizatorul face clic pe acesta 'anulează cererea' buton.

O altă utilizare potențială este pentru cererile sincrone:

 var myRequest = jQuery.ajax (url: 'foo.txt', async: false); console.log (myRequest.responseText);

Citiți mai multe despre 'XMLHttpRequest' obiect și, de asemenea, asigurați-vă că pentru a verifica jQuery lui Ajax utilități.

6. Cozi personalizate

jQuery are un mecanism de așteptare încorporat, care este folosit de toate metodele sale de animație (toate acestea utilizează 'anima()' într-adevăr). Această așteptare poate fi ilustrată cu ușurință cu o animație simplă:

 jQuery ('a') hover (funcția () jQuery (aceasta) .animate (paddingLeft: '+ = 15px'); , funcția () jQuery (aceasta) .animate (paddingLeft: '- = 15px'); );

Deplasându-te rapid peste o grămadă de ancore și apoi trecând deasupra lor, vor provoca animațiile să coboare și să apară unul câte unul - sunt sigur că mulți dintre voi au fost martorii acestui efect de așteptare înainte. Dacă nu, verificați-l aici: http://jsbin.com/aqaku

'coadă' metoda este similară celei cunoscute 'fiecare' în modul în care se numește. Parcurgeți o funcție, care în cele din urmă va fi apelată pentru fiecare dintre elementele din colecție:

 jQuery ('a') coadă (funcția () jQuery (this) .addClass ('toate-done ') dequeue (.); );

Trecând doar la o funcție 'coadă' va determina adăugarea acestei funcții la valoarea implicită 'Fx' cozile, adică coada folosită de toate animațiile realizate de jQuery. Prin urmare, această funcție nu va fi apelată până când toate animațiile curente care apar pe fiecare element al colecției (în acest caz toate ancorele) au fost finalizate.

Observați că adăugăm o clasă de 'totul este gata' în funcția de mai sus. Așa cum am subliniat, această clasă va fi adăugată numai când toate animațiile curente sunt complete. Suntem, de asemenea, de asteptare 'Dequeue' metodă. Este foarte important, deoarece va permite jQuery să continue cu coada de așteptare (adică îi permite lui jQuery să știe că ați terminat cu ceea ce faceți). jQuery 1.4 oferă un alt mod de a continua coada de așteptare; în loc de a chema 'Dequeue', pur și simplu apelați primul argument transmis funcției dvs.:

 jQuery ( 'a'). coadă (function (nextItemInQueue) // Continuă coadă: nextItemInQueue (); );

Acest lucru se întâmplă exact același lucru, deși este ceva mai util în faptul că poate fi apelat oriunde în cadrul funcției dvs., chiar și într-o mizerie de închideri (care de obicei distrug 'acest' cuvinte cheie). Desigur, pre-jQuery-1.4 ai putea să salvezi o referință 'acest', dar asta ar fi un pic obositor.

Pentru a adăuga o funcție la o coadă particularizată, pur și simplu treceți numele cozii personalizate ca primul argument și funcția ca a doua:

 jQuery ( 'a'). coadă (“customQueueName ', funcția () // Face jQuery stuff (this) .dequeue ('customQueueName '); );

Observați că, deoarece nu folosim implicit 'Fx' coada, trebuie să trecem și numele coadajului 'Dequeue' , pentru a permite jQuery să continue cu coada noastră personalizată.

Citiți mai multe despre 'coadă', 'Dequeue' și 'JQuery.queue'.

7. Pachetul de nume de evenimente

jQuery oferă o cale pentru evenimentele namespace, care pot fi foarte utile atunci când creați pluginuri și componente ale unor terțe părți. Dacă este necesar, utilizatorul pluginului dvs. poate dezactiva în mod efectiv pluginul, dezlegând toți agenții de procesare a evenimentului care sunt înregistrați.

Pentru a adăuga un spațiu de nume la înregistrarea unui handler de evenimente, pur și simplu sugeți numele evenimentului cu o perioadă și apoi spațiul de nume unic (de ex. “.FooPlugin'):

 jQuery.fn.foo = funcția () this.bind ('click.fooPlugin', funcția () // do stuff); this.bind ( "mouseover.fooPlugin ', funcția () // do stuff); returnați acest lucru; ; // Utilizați pluginul: jQuery ('a') foo (); // Distrugeți manipulatorii evenimentului: jQuery ('a') unbind ('.fooPlugin');

Trecând doar spațiul de nume la 'desface' va dezabona toate manipulatoarele de evenimente cu acel spațiu de nume.

Concluzie

Deci, care mi-a fost dor de mine? Orice caracteristici utile pe care le considerați jQuery nu documentează suficient de bine? Să discutăm în comentarii!

Cod