Share
Dacă există unul rău lucru despre jQuery, este faptul că nivelul de intrare este atât de uimitor de scăzut, încât tinde să atragă pe cei care nu au o uncie de cunoștințe JavaScript. Acum, pe de o parte, este fantastic. Cu toate acestea, pe de altă parte, rezultă și într-un amestec de cod, foarte sincer, dezgustător de rău (dintre care unele am scris eu însumi!).
Dar este în regulă; înfricoșător de sărac, care ar face chiar și bunicul tău să ardă în aer, este un ritual de trecere. Cheia este de a urca peste deal, și asta vom discuta în tutorialul de astăzi.
Este important să rețineți că majoritatea metodelor vor returna obiectul jQuery. Acest lucru este extrem de util și permite funcționarea în lanț pe care o folosim atât de des.
Accentsconagua
$ someDiv .attr ('class', 'someClass') .hide () .html ("lucruri noi"); Știind că obiectul jQuery este întotdeauna returnat, putem folosi acest lucru pentru a elimina uneori codul inutil. De exemplu, luați în considerare următorul cod:
var someDiv = $ ('# someDiv'); someDiv.hide (); Motivul pentru care am "cache" locația
someDivelementul este de a limita numărul de ori pe care trebuie să-l traversăm DOM pentru acest element o dată.
Codul de mai sus este perfect bine; cu toate acestea, puteți combina cu ușurință cele două linii într-o singură dată, atingând același rezultat.
var someDiv = $ ('# someDiv') ascunde (); În acest fel, încă ascundem someDiv element, dar metoda, de asemenea, așa cum am învățat, returnează obiectul jQuery - care este apoi referit prin intermediul someDiv variabil.
Atâta timp cât selectorii dvs. nu sunt ridicol de săraci, jQuery face o treabă fantastică de optimizare a acestora cât mai bine posibil și, în general, nu trebuie să vă faceți griji prea mult despre ei. Cu toate acestea, cu toate acestea, există o serie de îmbunătățiri pe care le puteți face, ceea ce va îmbunătăți ușor performanța scenariului dvs..
O astfel de soluție este de a utiliza găsi() atunci când este posibil. Cheia este departe de a forța jQuery să folosească motorul Sizzle, dacă nu este necesar. Desigur, vor exista momente când acest lucru nu este posibil - și asta este bine; dar, dacă nu aveți nevoie de extraa deasupra capului, nu o căutați.
/ / Fine în browserele moderne, deși Sizzle începe să ruleze $ ('someDiv p.someClass') hide (); // Mai bine pentru toate browserele, și Sizzle niciodată nu. . $ ( '# SomeDiv') găsește ( 'p.someClass') ascunde ().; Cele mai recente browsere moderne au suport pentru
querySelectorAll, care vă permite să treci selectori de tip CSS, fără a fi nevoie de jQuery. jQuery însăși verifică și această funcție.
Cu toate acestea, browserele mai vechi, și anume IE6 / IE7, în mod evident nu oferă suport. Ce inseamna acest lucru este ca acei selectori mai complicati declanseaza motorul complet al lui JQuery Sizzle, care, deși strălucit, vine împreună cu un pic mai mult.
Sizzle este o masă strălucită de cod pe care niciodată nu o pot înțelege. Cu toate acestea, într-o propoziție, prima alege selectorul și îl transformă într-o "matrice" compusă din fiecare componentă a selectorului.
// Idee clară despre cum funcționează ['#someDiv,' p '];
Apoi, de la dreapta la stânga, începe să descifreze fiecare element cu expresii regulate. Ceea ce înseamnă, de asemenea, că partea cea mai potrivită a selectorului dvs. ar trebui să fie cât mai specifică posibil - de exemplu, o id sau numele etichetei.
Linia de fund, atunci când este posibil:
găsi() metodă. În acest fel, mai degrabă decât folosind Sizzle, putem continua să folosim funcțiile native ale browserului. De asemenea, este posibil să adăugați un context selectorilor dvs., cum ar fi:
$ ('. someElements', '#someContainer'). ascunde (); Acest cod direcționează jQuery pentru a înfășura o colecție a tuturor elementelor cu o clasă de someElements -- care sunt copiii lui someContainer -- în cadrul jQuery. Utilizarea unui context este o modalitate utilă de a limita traversarea DOM, deși, în spatele scenei, jQuery folosește găsi în schimb.
$ ('# someContainer') .find ('. someElements') .hide (); // HANDLE: $ (expr, context) // (care este doar echivalent cu: $ (context) .find (expr) altceva return jQuery (context) .find (selector)
$ (Aceasta) Fără a ști despre diferitele proprietăți DOM și funcții, poate fi ușor să abuz obiectul jQuery inutil. De exemplu:
$ ('# someAnchor') faceți clic pe (function () // Bleh alert ($ (this) .attr ('id'));); Dacă singura noastră nevoie de obiectul jQuery este accesarea etichetei de ancorare id atribut, acest lucru este risipitor. Mai bine să rămâi cu JavaScript "brut".
$ ('# someAnchor') faceți clic pe (function () alert (this.id);); Rețineți că există trei atribute care ar trebui să fie întotdeauna accesate, prin jQuery: "src", "href" și "style". Aceste atribute necesită utilizarea
getAttributeîn versiunile mai vechi ale IE.
// Sursa jQuery var rspecialurl = / href | src | stil /; // ... var special = rspecialurl.test (nume); // ... var attr =! JQuery.support.hrefNormalized&& & notxml && special? // Unele atribute necesită un apel special pe IE elem.getAttribute (nume, 2): elem.getAttribute (nume);
Chiar mai rău este procesul de interogare repetată a DOM și crearea mai multor obiecte jQuery.
$ ( '# Elem') ascunde ().; $ ( '# Elem') html ( 'bla').; $ ( '# Elem') otherStuff ().;
Sperăm că deja știți cât de ineficient este acest cod. Dacă nu, e în regulă; noi toți învățăm. Răspunsul este fie să implementeze înlănțuirea, fie să "cacheze" locația #elem.
// Aceasta funcționează mai bine $ ('# elem') .hide () .html ('bla') .otherStuff (); // Sau asta, dacă preferi dintr-un motiv oarecare. var elem = $ ('# elem'); elem.hide (); elem.html ( 'bla'); elem.otherStuff (); Gata Metodă Ascultarea atunci când documentul este gata să fie manipulat este râzător de simplu cu jQuery.
$ (document) .ready (funcția () // să ne ridicăm în heeya);
Deși este foarte posibil să fi întâmpinat o funcție de împachetare diferită și mai confuză.
$ (funcția () // să ne ridicăm în heeya);
Deși ultimul este puțin mai ușor de citit, cele două fragmente de mai sus sunt identice. Nu mă credeți? Verificați doar sursa jQuery.
// HANDLE: $ (funcția) // Comandă rapidă pentru documentul gata dacă (jQuery.isFunction (selector)) returnează rootjQuery.ready (selector);
rootjQuery este pur și simplu o referire la rădăcină jQuery (documentul). Când treceți un selector la funcția jQuery, acesta va determina ce tip de selector ați trecut: șir, etichetă, id, funcție etc. Dacă o funcție a fost trecută, jQuery va apela apoi gata() metoda, și treceți funcția anonimă ca selector.
În cazul în care dezvoltați codul pentru distribuție, este întotdeauna important să compensați orice eventuală coliziune a numelui. Ce s-ar întâmpla dacă un scenariu, importat după al tău, a avut de asemenea un a $ funcţie? Lucruri rele!
Răspunsul este fie apelarea lui jQuery noConflict (), sau pentru a stoca codul dvs. într-o funcție anonimă care invocă automat și apoi trece jQuery la acesta.
var j = jQuery.noConflict (); // Acum, în loc de $, folosim j. . J ( '# someDiv') ascunde (); // Linia de mai jos va face referire la funcția $ $ a altei biblioteci. $ ('someDiv'). stil.display = 'nici unul'; Aveți grijă cu această metodă și încercați să nu o utilizați când distribuiți codul. Ar fi confundat cu adevărat utilizatorul scriptului tău! :)
(funcția ($) // În cadrul acestei funcții, $ se va referi întotdeauna la jQuery) (jQuery);
Parentele finale din partea de jos apelează automat funcția - funcţie()(). Cu toate acestea, când numim funcția, vom trece și jQuery, care este apoi reprezentat de $.
Gata Metodă jQuery (document) .ready (funcția ($) // $ se referă la jQuery); // $ este fie nedefinit, fie se referă la funcția unei alte biblioteci.
Amintiți - jQuery este doar JavaScript. Nu presupuneți că are capacitatea de a compensa codarea dvs. proastă. :)
Aceasta înseamnă că, așa cum trebuie să optimizăm lucruri precum JavaScript pentru declarații, același lucru este valabil și pentru jQuery fiecare metodă. Și de ce nu? Este doar o metodă de ajutor, care apoi creează o pentru declarație în spatele scenei.
/ / jQuery fiecare sursă de metode: funcția (obiect, callback, args) var nume, i = 0, length = object.length, isObj = length === undefined || jQuery.isFunction (obiect); dacă (args) if (isObj) pentru (nume în obiect) if (callback.apply (object [name], args) === false) break; altceva pentru (; i < length; ) if ( callback.apply( object[ i++ ], args ) === false ) break; // A special, fast, case for the most common use of each else if ( isObj ) for ( name in object ) if ( callback.call( object[ name ], name, object[ name ] ) === false ) break; else for ( var value = object[0]; i < length && callback.call( value, i, value ) !== false; value = object[++i] ) return object;
someDivs.each (funcția () $ ('#otherDiv') [0] .innerHTML + = $ (this) .text ();); anotherDiv pentru fiecare iterație var someDivs = $ ('container'). găsi ('. someDivs'), contents = []; someDivs.each (funcția () contents.push (this.innerHTML);); $ ('# altDiv'). html (contents.join (")); În acest fel, în cadrul fiecare (for), singura sarcină pe care o efectuăm este adăugarea unei chei noi într-o matrice ... spre deosebire de interogarea DOM, prinsărea innerHTML proprietatea elementului de două ori, etc.
Acest sfat este mai bazat pe JavaScript, în general, decât pe specificul jQuery. Ideea este să ne amintim că jQuery nu compensează codificarea slabă.
În timp ce suntem la el, o altă opțiune pentru aceste tipuri de situații este utilizarea fragmentelor de documente.
var someUls = $ ('container'). găsi ('. someUls'), frag = document.createDocumentFragment (), li; someUls.each (funcție () li = document.createElement ('li'); li.appendChild (document.createTextNode (this.innerHTML)); frag.appendChild (li);); $ ('# altUl') [0] .appendChild (frag); Cheia aici este că există mai multe modalități de a realiza sarcini simple precum acest lucru și fiecare are propriile beneficii de performanță de la browser la browser. Cu cât veți rămâne mai mult cu jQuery și veți învăța JavaScript, veți găsi mai des că vă referiți mai des la proprietățile și metodele native ale JavaScript. Și dacă da, e fantastic!
jQuery oferă un nivel uimitor de abstractizare pe care ar trebui să-l profitați, dar asta nu înseamnă că ești nevoit să folosești metodele sale. De exemplu, în exemplul de fragmentare de mai sus, folosim jQuery fiecare metodă. Dacă preferați să utilizați a pentru sau in timp ce declarație în loc, este în regulă!
Cu toate acestea, rețineți că echipa jQuery a optimizat foarte mult această bibliotecă. Dezbaterile despre jQuery
fiecare()împotriva nativuluipentrudeclarația este prostie și trivială. Dacă utilizați jQuery în proiectul dvs., economisiți timp și utilizați metodele de ajutor. Pentru asta sunt acolo! :)
Dacă începeți să vă săturați în jQuery, diferitele metode AJAX pe care ni le pune la dispoziție ar putea să se întâmple ca fiind puțin descurajante; deși nu au nevoie. De fapt, cele mai multe dintre ele sunt pur și simplu metode de ajutor, care direcționează direct către $ .ajax.
De exemplu, să examinăm getJSON, care ne permite să preluăm JSON.
$ .getJSON ('path / to / json', funcție (rezultate) // callback // results conține obiectul de date returnat); În spatele scenei, această metodă solicită mai întâi $ .get.
getJSON: funcție (url, date, callback) returnează jQuery.get (url, date, callback, "json");
$ .get apoi compilează datele transmise și, din nou, operează "master" (of sorts) $ .ajax metodă.
get: funcția (url, date, callback, tip) // argumentele de schimbare dacă argumentul de date a fost omis dacă (jQuery.isFunction (data)) type = type || suna inapoi; callback = date; date = null; return jQuery.ajax (tip: "GET", url: url, date: date, succes: callback, dataType: type);
In cele din urma, $ .ajax efectuează o cantitate masivă de muncă pentru a ne permite să efectuăm cu succes cereri asincrone în toate browserele!
Ce inseamna asta este că puteți folosi la fel de bine
$ .ajaxdirect și exclusiv pentru toate solicitările AJAX. Celelalte metode sunt pur și simplu metode de ajutor care sfârșesc în orice caz. Deci, dacă vreți, tăiați omul din mijloc. Nu este o problemă semnificativă.
$ .getJSON ('path / to / json', funcție (rezultate) // callback // results conține obiectul de date returnat); $ .ajax (tip: 'GET', url: 'cale / to / json', date: data, datatype: 'json' );
Deci, ați învățat un pic de JavaScript și ați aflat că, de exemplu, pe etichetele ancorei, puteți accesa direct valorile atributelor:
var ancora = document.getElementById ('someAnchor'); //anchor.id // anchor.href // anchor.title // .etc Singura problemă este că acest lucru nu pare să funcționeze atunci când menționați elementele DOM cu jQuery, nu? Bineînțeles că nu.
/ / Failed var id = $ ('# someAnchor'); id; Deci, ar trebui să aveți acces la href atributul (sau orice altă proprietate sau metodă nativă, pentru care contează), aveți o mulțime de opțiuni.
// OPȚIUNEA 1 - Utilizați jQuery var id = $ ('# someAnchor') atribut ('id'); // OPTION 2 - Accesarea elementului DOM var id = $ ('# someAnchor') [0] .id; // OPȚIUNEA 3 - Utilizați metoda jQuery de a primi var id = $ ('# someAnchor') get (0) .id; // OPȚIUNEA 3b - Nu treceți un index pentru a obține anchorsArray = $ ('. SomeAnchors'). Get (); var thirdId = ancoraArray [2] .id;
obținemetoda este deosebit de utilă, deoarece poate traduce colecția dvs. jQuery într-o matrice.
Desigur, pentru marea majoritate a proiectelor noastre, nu putem numai se bazează pe JavaScript pentru lucruri precum validarea sau solicitările AJAX. Ce se întâmplă atunci când JavaScript este dezactivat? Din acest motiv, o tehnică comună este de a detecta dacă o solicitare AJAX a fost făcută cu limbajul serverului pe care îl alegeți.
jQuery face acest lucru ridicol de simplu, prin setarea unui antet din interiorul $ .ajax metodă.
// Setați antetul astfel încât scriptul apelat să știe că este un XMLHttpRequest // Trimiteți numai antetul dacă nu este o distanță XHR dacă (! Remote) xhr.setRequestHeader ("X-Requested-With", "XMLHttpRequest"); Cu acest set de antet, acum putem folosi PHP (sau orice altă limbă) pentru a verifica acest antet și continuați în consecință. Pentru aceasta, verificăm valoarea $ _SERVER [ 'HTTP_X_REQUESTED_WITH'].
funcția isXhr () return $ _SERVER ['HTTP_X_REQUESTED_WITH'] === 'XMLHttpRequest';
Vă întrebați vreodată de ce / cum puteți folosi jQuery și $ interschimbabil? Pentru a găsi răspunsul dvs., vizualizați sursa jQuery și derulați până la partea de jos. Acolo veți vedea:
window.jQuery = fereastră. $ = jQuery;
Întregul script JQuery este, desigur, înfășurat într-o funcție de auto-execuție, care permite scriptului să limiteze cât mai mult numărul de variabile globale. Ceea ce înseamnă, de asemenea, că obiectul jQuery nu este disponibil în afara funcției anonime de împachetare.
Pentru a rezolva acest lucru, jQuery este expus la nivel global fereastră obiect, și, în acest proces, un alias - $ - este, de asemenea, creat.
Șablonul HTML5 Boilerplate oferă o aplicație de tip "one-liner" care va încărca o copie locală a jQuery dacă, din anumite motive, CDN-ul dvs. ales.
Pentru a "fraza" codul de mai sus: dacă window.jQuery este nedefinit, trebuie să fi existat o problemă la descărcarea scriptului din CDN. În acest caz, treceți la partea dreaptă a ecranului && operator și introduceți un script care leagă o versiune locală a jQuery.
Membrii premium: Descărcați acest videoclip (Trebuie să fiți autentificat)
Abonați-vă la pagina noastră YouTube pentru a viziona toate tutorialele video!
Notă:
jQuery.expr [ ':']este pur și simplu un alias pentrujQuery.expr.filters.
Începând cu jQuery 1.4, putem trece acum doar o singură funcție la planare metodă. Înainte, ambele în și afară au fost necesare metode.
$ ('# someElement') hover (funcția () // mouseover, funcția () // mouseout); $ ('# someElement') hover (funcția () // metoda de comutare () poate fi folosită aici, dacă este cazul); Rețineți că aceasta nu este o afacere veche sau nouă. De multe ori, va trebui să treci două funcții planare, și este perfect acceptabil. Cu toate acestea, dacă trebuie doar să comutați un element (sau ceva de genul ăsta), trecerea unei singure funcții anonime va salva o mână de caractere!
Începând cu jQuery 1.4, putem trece acum un obiect ca al doilea parametru al funcției jQuery. Acest lucru este util când trebuie să inserăm elemente noi în DOM. De exemplu:
$ ('') .attr (id: 'someId', className: 'someClass', href: 'somePath.html'); $ ('', id: 'someId', className: 'someClass', href: 'somePath.html'); Nu numai că acest lucru salvează câteva caractere, dar face și codul mai curat. În plus față de atributele elementului, putem trece chiar atributele și evenimentele jQuery specifice, cum ar fi clic sau text.
