Avdekke jQuery sine skjulte funksjoner

jQuery er ikke alltid som det ser ut. Det er mange kule ting som skjer under overflaten, og det finnes mange metoder som bare venter på å bli oppdaget, og mange potensielle anvendelser av jQuery API som du kanskje ikke har vurdert før. I denne artikkelen tar jeg deg gjennom noen av de ikke så åpenbare tingene jeg har oppdaget om jQuery.

1. Forstå jQuery!

Når du ringer 'JQuery' hva skjer?

Selve jQuery-funksjonen er veldig enkel:

 jQuery = funksjon (velg, kontekst) // Det jQuery-objektet er faktisk bare init-konstruktørens "forbedrede" retur ny jQuery.fn.init (selector, context); ;

Under sin hud returnerer jQuery-funksjonen (vanligvis referert til som "wrapper" -funksjonen) bare et instantiated jQuery-objekt - det vil si en forekomst av 'JQuery.fn.init' konstruktør.

Dette er nyttig å vite; Med denne informasjonen vet vi at hver gang vi ringer 'JQuery' vi skaper faktisk et helt unikt objekt med et sett av egenskaper. jQuery er smart ved at den gir deg et objekt som kan behandles som en matrise. Hver av elementene dine (samlet sett kjent som "samlingen") refereres til i objektet under en numerisk indeks, akkurat som innenfor en matrise. Og jQuery gir også dette objektet a 'lengde' eiendom, akkurat som du forventer fra en matrise. Dette åpner opp en verden av muligheter. For det betyr det at vi kan låne litt funksjonalitet fra 'Array.prototype'. jQuery 'skjære' Metode er et godt eksempel på dette - endret fra kilden:

 / * ... jQuery.fn.extend (... * / skive: funksjon () return this.pushStack (Array.prototype.slice.apply (dette, argumenter), "skive", Array.prototype.slice.call (argumenter) .join (",")); , / * ... * /

Den innfødte 'skjære' Metoden bryr seg ikke om det 'dette' er ikke et ekte utvalg - det blir bra med alt som har en 'lengde' eiendom og [0], [1], [2] etc.

Det er noen andre interessante egenskaper i dette jQuery-objektet -- '.Selector' og '.kontekst' vil mesteparten av tiden gjenspeile argumenter du passerer inn i 'jQuery (...)'.

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

En ting som er viktig å merke seg er at jQuery noen ganger gir deg nye jQuery-objekter å jobbe med. Hvis du kjører en metode som endrer samlingen på en måte, for eksempel '.foreldre()', da vil jQuery ikke endre det nåværende objektet; det vil bare gi deg en helt ny en:

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

Alle metoder som ser ut til å mutere samlingen på en eller annen måte, returnerer et helt nytt jQuery-objekt - du kan fortsatt få tilgang til det gamle objektet selv via '.slutt()', eller mer verbosely, via '.PrevObject'.

2. Brød-og-smør Element Creation

Sentralt i jQuerys DOM-evner er dens syntaks for elementopprettelse. 1.4 tok med seg en helt ny måte å skape dine elementer raskt og kortfattet på. f.eks.

 var myDiv = jQuery ('', id:' mitt nye element ', klasse:' foo ', css: farge:' rød ', backgrondColor:' #FFF ', grense:' 1px solid #CCC ', klikk: funksjon alert ('Clicked!'); , html: jQuery ('', href:' # ', klikk: funksjon () // gjør noe tilbake false; ));

Fra 1.4 kan du passere et annet argument til jQuery-funksjonen når du lager et element - objektet du passerer vil for det meste virke som om du passerte det til '.attr (...)'. Imidlertid vil jQuery kartlegge noen av egenskapene til egne metoder, for eksempel 'Klikk' eiendomsmegling til jQuery's 'Klikk' metode (som binder en hendelseshandler for 'Klikk' arrangement) og 'Css' kart til jQuery's 'Css' metode osv.

For å sjekke ut hvilke egenskaper kart til jQuerys metoder, åpner du konsollen og skriver inn 'JQuery.attrFn'.

3. Serialiser inngangene dine

jQuery gir en metode som du kan bruke til å serialisere alle inngangene i en eller flere former. Dette er nyttig når du sender inn data via XHR ("Ajax"). Det har vært i jQuery i lang tid, men det snakker ikke ofte om og så mange utviklere skjønner ikke at det er der. Det kan ikke være enklere å sende inn et helt skjema via Ajax, ved hjelp av jQuery:

 var myForm = $ ('# my-form'); jQuery.post ('submit.php', myForm.serialize (), funksjon () alert ('Data har blitt sendt!'););

jQuery gir også 'SerializeArray' metode, som er designet for å bli brukt med flere former, og 'Param' hjelpefunksjon (under jQuery-navneområdet) som tar et vanlig objekt og returnerer en spørringsstreng, f.eks.

 var data = navn: 'Joe', alder: 44, yrke: 'Webutvikler'; jQuery.param (data); // => "navn = Joe & alder = 44 & yrke =Web + Developer"

4. Animer alt

jQuery 'Animere' Metoden er trolig den mest fleksible av jQuerys metoder. Det kan brukes til å animere stort sett alt, ikke bare CSS egenskaper, og ikke bare DOM elementer. Slik bruker du normalt 'Animere':

 jQuery ('# box'). animate (left: 300, top: 300);

Når du angir en egenskap som skal animeres (f.eks. 'topp') jQuery sjekker for å se om du animerer noe med en stilegenskaper ('Element.style'), og det sjekker om den angitte egenskapen ('topp') er definert under 'stil' -- hvis det ikke er så jQuery bare oppdateringer 'topp' på selve elementet. Her er et eksempel:

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

'topp' er en gyldig CSS-eiendom, så jQuery vil oppdatere 'Element.style.top', men 'Foo' er ikke en gyldig CSS-eiendom, så jQuery vil bare oppdatere 'Element.foo'.

Vi kan bruke dette til vår fordel. La oss for eksempel si at du vil animere et torg på et lerret. Først la oss definere en enkel konstruktør og a 'tegne' metode som vil bli kalt på hvert trinn av animasjonen:

 funksjon Square (cnvs, bredde, høyde, farge) this.x = 0; this.y = 0; this.width = width; this.height = height; this.color = color; this.cHeight = cnvs.height; this.cWidth = cnvs.width; this.cntxt = cnvs.getContext ('2d');  Square.prototype.draw = function () this.cntxt.clearRect (0, 0, this.cWidth, this.cHight); this.cntxt.fillStyle = this.color; this.cntxt.fillRect (this.x, this.y, this.width, this.height); ;

Vi har opprettet vår Square-konstruktør, og en av metodene hans. Å lage et lerret og deretter animere det kan ikke være enklere:

 // Lage en

Dette er en veldig enkel effekt, men det viser tydelig mulighetene. Du kan se det i aksjon her: http://jsbin.com/ocida (dette vil bare fungere i nettlesere som støtter HTML5-lerretet)

5. jQuery.ajax Returnerer XHR-objektet

jQuery's Ajax verktøyfunksjoner ('JQuery.ajax', 'JQuery.get', 'JQuery.post') alle returnere en 'XMLHttpRequest' objekt som du kan bruke til å utføre etterfølgende operasjoner på enhver forespørsel. For eksempel:

 var curRequest; jQuery ( 'button.makeRequest').klikk (funksjon () curRequest = jQuery.get ('foo.php', funksjon (respons) alert ('Data:' + response.responseText););); jQuery ( 'button.cancelRequest').klikk (funksjon () hvis (curRequest) curRequest.abort (); // abort () er en metode for XMLHttpRequest);

Her gjør vi en forespørsel når 'MakeRequest' knappen er klikket - og vi avbryter den aktive forespørselen hvis brukeren klikker på 'Avbryt forespørsel' knapp.

En annen potensiell bruk er for synkrone forespørsler:

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

Les mer om 'XMLHttpRequest' objekt og også sørg for å sjekke ut jQuery's Ajax verktøy.

6. Tilpassede køer

jQuery har en innebygd kjøremekanisme som brukes av alle dens animasjonsmetoder (som alle bruker 'Animere ()' egentlig). Denne køen kan illustreres enkelt med en enkel animasjon:

 jQuery ('a'). svever (funksjon () jQuery (dette) .animate (paddingLeft: '+ = 15 piksler'); , funksjon () jQuery (dette) .animate (paddingLeft: '- = 15 piksler'); );

Raskt sveve over en haug med ankre og deretter sveve over dem igjen, vil føre til at animasjonene stiger opp og opptrer en om gangen - jeg er sikker på at mange av dere har opplevd denne køevirkningen før. Hvis ikke, sjekk det ut her: http://jsbin.com/aqaku

De 'kø' Metoden ligner den velkjente 'Hver' metode i hvordan den kalles. Du sender en funksjon, som etter hvert blir kalt for hver av elementene i samlingen:

 jQuery ('a') .kø (funksjon () jQuery (dette) .addClass ('alle-Ferdig ') dequeue (.); );

Passerer bare en funksjon til 'kø' vil føre til at funksjonen legges til standard 'Fx' kø, det vil si køen som brukes av alle animasjoner gjort av jQuery. Derfor vil denne funksjonen ikke bli kalt til alle aktuelle animasjoner som forekommer på hvert element i samlingen (i dette tilfellet alle ankre) har fullført.

Legg merke til at vi legger til en klasse av 'ferdig' i funksjonen ovenfor. Som angitt, vil denne klassen bare bli lagt til når alle nåværende animasjoner er fullført. Vi ringer også på 'Dequeue' metode. Dette er veldig viktig, som det vil tillate jQuery å fortsette med køen (det vil si at jQuery vet at du er ferdig med hva du gjør). jQuery 1.4 gir en annen måte å fortsette køen på; i stedet for å ringe 'Dequeue', bare ring det første argumentet passert til din funksjon:

 jQuery ( 'a'). kø (funksjon (nextItemInQueue) // Fortsett kø: nextItemInQueue (); );

Dette gjør akkurat det samme, selv om det er litt mer nyttig fordi det kan kalles hvor som helst innenfor din funksjon, selv innenfor et rot av lukkinger (som vanligvis ødelegger 'dette' søkeord). Selvfølgelig, pre-jQuery-1.4 kan du bare lagre en referanse til 'dette', men det ville bli litt kjedelig.

For å legge til en funksjon i en egendefinert kø, send du bare den egendefinerte køens navn som det første argumentet og funksjonen som den andre:

 jQuery ( 'a'). kø ('customQueueName ', funksjon () // Gjør ting jQuery (dette) .dequeue ('customQueueName '); );

Legg merke til det, siden vi ikke bruker standardinnstillingen 'Fx' kø, vi må også passere vår køs navn til 'Dequeue' metode for å tillate jQuery å fortsette med vår tilpassede kø.

Les mer om 'kø', 'Dequeue' og 'JQuery.queue'.

7. Event Namespacing

jQuery gir deg mulighet til navneplasseringshendelser, noe som kan være svært nyttig når du lager innstillingene og tredjepartskomponenter. Hvis det er nødvendig, kan brukeren av pluginet deaktivere pluginet ditt effektivt ved å fjerne alle hendelseshåndterere som den er registrert.

Hvis du vil legge til et navneområde når du registrerer en hendelsesbehandler, kan du bare suffikere hendelsesnavnet med en periode og deretter ditt unike navneområde (f.eks.. ' .FooPlugin'):

 jQuery.fn.foo = function () this.bind ('click.fooPlugin', funksjon () // gjør ting); this.bind ( "mouse.fooPlugin ', funksjon () // gjør ting); returnere dette; ; // Bruk plugin: jQuery ('a'). Foo (); // Ødelegg hendelsesbehandlerne: jQuery ('a'). Unbind ('.fooPlugin');

Passerer bare namespace til 'Frigi' vil knytte alle hendelseshåndterere til det navneområdet.

Konklusjon

Så hvilke jeg savnet? Noen nyttige funksjoner som du føler jQuery dokumenterer ikke godt nok? La oss diskutere i kommentarene!

Kode