jQuery 1.4 Lansat Cele 15 noi caracteristici pe care trebuie să le cunoașteți

S-ar putea să fi observat "text", probabil că vă întrebați ce face acolo, după toate acestea nu există"text"atribut pentru ancore JQuery 1.4 utilizează propriile sale metode atunci când treci anumite atribute Deci, atributul" text "specificat mai sus ar provoca jQuery pentru a apela".text()", trecând" Du-te la Google! "ca singurul său argument.

Un exemplu mai bun în acest sens:

 jQuery (“
', id:' foo ', css: fontWeight: 700, culoare:' verde ', click: function () alert (' Foo a fost apasat! '); );

"Id" -ul este adăugat ca atribut obișnuit, dar proprietățile "css" și "click" declanșează apelarea fiecărei metode. Codul de mai sus, înainte de lansarea 1.4, ar fi fost scris astfel:

 jQuery (“
') .attr (' id ',' foo ') .css (fontWeight: 700, culoare: verde) .click (function () alert (' Foo a fost dat!

Citiți mai multe despre jQuery (...)

2. Totul "până la"!

Trei metode noi au fost adăugate la arsenalul de traversare DOM în 1.4, "nextUntil","prevUntil" și "parentsUntil"Fiecare dintre aceste metode vor trece prin DOM într-o anumită direcție până când selectorul trecut nu va fi satisfăcut Deci, să spunem că aveți o listă de fructe:

 
 
măr
 
Banană
 
strugure
 
căpșună
 
Pară
 
Piersică
 

Doriți să selectați toate elementele după "Apple", dar doriți să opriți odată ce ajungeți la "Strawberry". Nu ar putea fi mai simplu:

 jQuery ('ul li: conține (Apple)') nextUntil (': conține (Pear)'); // Selecteaza banana, struguri, capsuni

Citiți mai multe despre: prevUntil, nextUntil, parentsUntil

3. Manipulatori de evenimente multiple

În loc să alăturați o grămadă de metode de legare a evenimentelor, le puteți pune în întregime în același apel, așa cum este cazul:

 jQuery ('# foo) .bind (click: function () // face ceva, mouseover: function () // face ceva

Acest lucru, de asemenea, funcționează cu ".unu()".

Citiți mai multe despre .bind (...)

4. Facilitarea pe proprietate

În loc să definiți doar o funcție de relaxare pentru o singură animație, puteți defini acum o funcție de relaxare diferită pentru fiecare proprietate pe care o animați. jQuery include două funcții de relaxare, swing (implicit) și liniare. Pentru celelalte, va trebui să le descărcați separat!

Pentru a specifica o funcție de relaxare pentru fiecare proprietate, pur și simplu definiți proprietatea ca fiind o matrice, cu prima valoare fiind ceea ce doriți să animați acea proprietate și al doilea fiind funcția de relaxare pe care o utilizați:

 jQuery ('# foo') animați (left: 500, top: [500, 'easeOutBounce'], 2000);

Vedeți acest cod în acțiune!

De asemenea, puteți defini funcțiile de relaxare per proprietate în obiectul opțional opțional ca perechi de nume de proprietăți în obiectul "specialEasing":

 jQuery ('# foo') animate (left: 500, top: 500, duration: 2000, specialEasing: top: 'easeOutBounce');

Nota editorului - Autorul acestui articol, James Padolsey, este modest. Această nouă caracteristică a fost ideea lui!

Citiți mai multe despre relaxarea pe proprietăți

5. Noi evenimente live!

jQuery 1.4 adaugă suport pentru delegarea funcției "a depune","Schimbare","concentra" și "estompa"În jQuery, folosim".Trăi()"pentru delegarea evenimentelor.Acesta este utilă atunci când trebuie să înregistrați agenți de procesare a evenimentelor pe mai multe elemente și când pot fi adăugate elemente noi în timp (folosind".Trăi()"este mai puțin costisitor decât re-obligatoriu continuu).

Dar, fii atent! Trebuie să utilizați numele evenimentului, "focusin" și "focusout"dacă doriți să delegeți evenimentele" focus "și" blur "!

 jQuery ('input') live ('focusin', function () // face ceva cu aceasta);

6. Controlul contextului unei funcții

jQuery 1.4 oferă un nou "împuternicit"functioneaza sub spatiul de nume jQuery.Aceasta functie necesita doua argumente, fie un" scop "si un nume de metoda, sau o functie si domeniul de aplicare intentionat.Licio" acest "cuvânt cheie JavaScript poate fi destul de dificil pentru a păstra un hold.Uneori, nu doriți să fie un element, ci un obiect pe care l-ați creat anterior.

De exemplu, aici avem un "aplicaţia"obiect care are două proprietăți, un"clickHandler"și un obiect config:

 var app = config: clickMessage: "Bună!" , faceți clic peHandler: function () alert (this.config.clickMessage); ;

""clickHandler"metodă, când este numită"app.clickHandler ()" vom avea "aplicaţia"ca context, ceea ce înseamnă că"acest"cuvântul cheie va permite accesul la"aplicaţia"Aceasta funcționează destul de bine dacă sunăm pur și simplu:

 app.clickHandler (); // "Bună!" este alertat

Să încercăm să o legăm ca pe un manipulator de evenimente:

 jQuery ('a'). bind ('click', app.clickHandler);

Când faceți clic pe o ancora, nu pare să funcționeze (nimic nu este anunțat). Acest lucru se datorează faptului că jQuery (și cele mai aspre modele de evenimente) va seta în mod implicit contextul handler-ului ca element țintă, adică elementul care tocmai a fost clickat va fi accesibil prin intermediul "acest"Dar nu vrem asta, vrem"acest"pentru a fi setat la"aplicaţia"Atingerea acestui lucru în jQuery 1.4 nu a putut fi mai simplă:

 jQuery ('a') bind ('clic', jQuery.proxy (app, 'clickHandler'));

Acum, ori de câte ori se face clic pe o ancora, "Bună!" va fi alertat!

Funcția proxy returnează o versiune "înfășurată" a funcției dvs., cu "acest"setat la ceea ce specificați. Este util și în alte contexte, cum ar fi trecerea apelurilor către alte metode jQuery sau la pluginuri.

Citiți mai multe despre jQuery.proxy

7. Întârziați o coadă de animație

Acum puteți adăuga o întârziere la cozile de animație. De fapt, aceasta funcționează pe orice coadă de așteptare, dar cel mai des întâlnit caz va fi probabil cu coada "fx". Acest lucru vă permite să întrerupeți între animații, fără a fi nevoiți să deranjezi apelurile de apel și apelurile către "setTimeout"Primul argument pentru".întârziere()"este cantitatea de milisecunde pe care doriți să o întârziați.

 jQuery ('# foo') .slideDown () // Glisați în jos .delay (200) // Nu faceți nimic pentru 200 ms. fadeIn (); // Fade in

Dacă doriți să întârziați o coadă diferită de coada implicită "fx", atunci va trebui să transmiteți numele coadă ca al doilea argument la ".întârziere()".

Citiți mai multe despre .întârziere (...)

8. Verificați dacă un Element are Ceva

jQuery 1.4 facilitează verificarea dacă un element (sau o colecție) ".are ()"ceva .Acesta este echivalentă cu programul selector al jQuery,": Are ()"Această metodă va selecta toate elementele din colecția curentă care conțin cel puțin un element care respectă selectorul trecut.

 . JQuery ( 'div') are ( 'ul');

Aceasta ar selecta toate elementele DIV care conțin elemente UL. În această situație, probabil că ați folosi filtrul selector (": Are ()"), dar această metodă este încă utilă atunci când trebuie să filtrați o colecție programabil.

jQuery 1.4 dezvăluie, de asemenea,conține"în spațiul de nume jQuery.Acesta este o funcție de nivel scăzut care acceptă două noduri DOM.Aceasta va reveni un boolean care indică dacă al doilea element este conținut în primul element..

 jQuery.contains (document.documentElement, document.body); // Returnează adevărat -  este înăuntru 

Citiți mai multe despre: .are (...), jQuery.contains (...)

9. Desfaceți Elementele!

Am avut ".înfășurați ()"pentru o perioadă de timp.JQuery 1.4 adaugă".Unwrap ()"metodă care face opusul complet Dacă presupunem următoarea structură DOM:

 
 
foo
 

Putem desprinde elementul paragraf astfel:

 jQuery ( 'p') unwrap (.);

Structura DOM rezultată ar fi:

 
foo

În esență, această metodă elimină pur și simplu părintele oricărui element.

Citiți mai multe despre .desface (...)

10. Eliminați elementele fără a șterge datele

Noul ".desprinde()"vă permite să eliminați elemente din DOM, la fel ca".elimina()"Diferența cheie cu această nouă metodă este aceea că nu distruge datele deținute de jQuery pe acel element, inclusiv date adăugate prin intermediul".date()"și eventualii agenți de procesare a evenimentelor au fost adăugați prin sistemul de evenimente al jQuery.

Acest lucru poate fi util atunci când trebuie să eliminați un element din DOM, dar știți că va trebui să îl adăugați într-o etapă ulterioară. Manipulatorii de evenimente și orice alte date vor persista.

 var foo = jQuery ('# foo'); // Legați un manipulator important al evenimentului foo.click (function () alert ('Foo!');); foo.detach (); // Eliminați-l din DOM // ... face lucruri foo.appendTo ('body'); // Adăugați-o în DOM foo.click (); // alerte "Foo!"

Citiți mai multe despre .desprinde(… )

11. index (...) Îmbunătățiri

jQuery 1.4 vă oferă două modalități noi de utilizare a funcției ".index()"În trecut, ați putea trece doar un element ca argument și ați aștepta ca un număr să fie returnat indicând indicele acelui element din colecția curentă.

Dacă nu treceți niciun argument, revine indexul unui element printre frații săi. Deci, presupunând următoarea structură DOM:

 
 
măr
 
Banană
 
strugure
 
căpșună
 
Pară
 
Piersică
 

Când faceți clic pe un element de listă pe care doriți să aflați indexul elementului clicat printre toate celelalte elemente de listă. Este la fel de simplu ca:

 jQuery ('li') faceți clic pe (funcția () alert (jQuery (this) .index ()););

jQuery 1.4 vă permite, de asemenea, să specificați un selector ca primul argument pentru ".index()", acest lucru vă va oferi indicele elementului curent printre colecțiile produse de acel selector.

Trebuie să rețineți că ceea ce sa returnat din această metodă este un număr întreg și va reveni la -1 dacă selectorul / elementul trecut nu poate fi găsit în document.

Citiți mai multe despre .index (...)

12. Metodele de manipulare DOM Acceptă callback-urile

Majoritatea metodelor de manipulare DOM susțin acum să treacă o funcție ca argument unic (sau a doua, în cazul ".css ()"&".attr ()") Această funcție va fi rulată pe fiecare element al colecției pentru a determina ce ar trebui să fie folosit ca valoare reală pentru acea metodă.

Următoarele metode au această capacitate:

• după
• inainte de
• adăuga
• Prepend
• addClass
• toggleClass
• removeClass
• împacheta
• wrapAll
• wrapInner
• Val
• text
• înlocui cu
• css
• attr
• html

În cadrul funcției de apel invers, veți avea acces la elementul curent din colecție prin intermediul opțiunii "acest"și indicele său prin primul argument.

 jQuery ('li'). html (funcția (i) return 'Indexul acestui element de listă:' + i;);

De asemenea, cu unele dintre metodele de mai sus veți primi și un al doilea argument. Dacă apelați o metodă de setare (cum ar fi ".html ()"sau".attr ( 'href)") veți avea acces la valoarea curentă.

 jQuery ('a'). attr ('href', funcția (i, currentHref) return currentHref + '? foo = bar';);

După cum puteți vedea, cu ".css ()" și ".attr ()", ați trece funcția ca al doilea argument, deoarece prima ar fi folosită pentru a numi proprietatea pe care doriți să o modificați:

 jQuery ('li') css ('culoare', functie (i, currentCssColor) return i% 2? red: blue;

13. Determinați tipul de obiect

jQuery 1.4 adaugă două noi funcții de ajutor (stocate direct sub jurnalul jQuery) care vă ajută să determinați ce tip de obiect aveți de a face.

În primul rând,isEmptyObject", această funcție returnează un boolean care indică dacă obiectul trecut este gol sau nu (fără proprietăți - direct și mostenit). În al doilea rând,isPlainObject", care va întoarce un boolean care indică dacă obiectul trecut este un obiect simplu JavaScript, adică unul creat prin""sau"obiect nou ()".

 jQuery.isEmptyObject (); / / true jQuery.isEmptyObject (foo: 1); // false jQuery.isPlainObject (); // true jQuery.isPlainObject (fereastră); // false jQuery.isPlainObject (jQuery ()); // fals

Citiți mai multe despre: isPlainObject (...), isEmptyObject (...)

14. Îmbunătățirile cele mai apropiate (...)

jQuery's ".cel mai apropiat()"metoda acceptă acum o gamă de selectori.Acest lucru este util atunci când doriți să traversați strămoșii unui element care caută (mai mult de unul) cele mai apropiate elemente cu anumite caracteristici.

În plus, acum acceptă un context drept cel de-al doilea argument, ceea ce înseamnă că puteți controla cât de departe sau cât de aproape doriți ca DOM să treacă. Ambele aceste îmbunătățiri se potrivesc cu cazuri de utilizare rară, dar ele sunt utilizate intern pentru un efect deosebit!

Citiți mai multe despre .cel mai apropiat(… )

15. Evenimente noi! focusIn și focusOut

După cum sa menționat, pentru a delega evenimentele "focus" și "blur" trebuie să utilizați aceste evenimente noi, numite "focusin" și "focusout". Aceste evenimente vă permit să luați măsuri atunci când un element sau un descendent al unui element se concentrează.

 jQuery ('form') .focusin (funcția () jQuery (aceasta) .addClass ('concentrat');); .focusout (funcția () jQuery (aceasta) .removeClass ('concentrat'););

De asemenea, trebuie să rețineți că ambele evenimente nu se propagă ("bubble"); acestea sunt capturate. Aceasta înseamnă că elementul cel mai îndepărtat (strămoș) va fi declanșat înainte de elementul "țintă" cauzal.

Citiți mai multe despre focusIn și focusOut evenimente.

Bucurați-vă de jQuery 1.4, cea mai așteptată versiune a jQuery, cea mai performantă și cea mai performantă lansare a jQuery!

Ei bine, asta-i tot! Am încercat să acoperim modificările care cred că vor avea un impact asupra dvs.!

Dacă nu ați făcut-o deja, ar trebui să verificați "14 zile de jQuery", un eveniment online minunat care marchează lansarea jQuery 1.4 și cea de-a patra aniversare a lui jQuery!

Și nu uitați să verificați noul Documentație API!

Scrie un tutorial Plus