Avtäcka jQuerys dolda funktioner

jQuery är inte alltid som det verkar. Det finns många coola saker som händer under ytan, och det finns många metoder som bara väntar på att upptäckas och många möjliga användningsområden av jQuery API som du kanske inte har övervägt förut. I den här artikeln tar jag dig igenom några av de inte så uppenbara sakerna jag har upptäckt om jQuery.

1. Förstå jQuery!

När du ringer 'JQuery' vad händer?

Själva jQuery-funktionen är väldigt enkel:

 jQuery = funktion (väljare, sammanhang) // Det jQuery-objektet är faktiskt bara init-konstruktorns "förbättrade" retur ny jQuery.fn.init (väljare, kontext); ;

Under sin hud returnerar jQuery-funktionen (vanligen kallad "wrapper" -funktionen) helt enkelt ett instantierat jQuery-objekt - det vill säga en förekomst av 'JQuery.fn.init' konstruktör.

Detta är användbart att veta; med den här informationen vet vi att varje gång vi ringer 'JQuery' Vi skapar faktiskt ett helt unikt objekt med en uppsättning egenskaper. jQuery är smart eftersom det ger dig ett objekt som kan behandlas som en array. Var och en av dina element (alla tillsammans kallas "samlingen") refereras inom objektet under ett numeriskt index, precis som i en array. Och jQuery ger också detta föremål a 'längd' egendom, precis som du kan förvänta dig från en grupp. Detta öppnar en värld av möjligheter. För det betyder det att vi kan låna lite funktionalitet från 'Array.prototype'. jQuery s 'skiva' Metod är ett bra exempel på detta - modifierat från källan:

 / * ... jQuery.fn.extend (... * / skiva: funktion () returnera this.pushStack (Array.prototype.slice.apply (detta, argument), "skiva", Array.prototype.slice.call (argument) .join (",")); , / * ... * /

Den infödda 'skiva' metod bryr sig inte om det 'detta' Det är inte ett riktigt utbud - det blir bra med allt som har en 'längd' egendom och [0], [1], [2] etc.

Det finns några andra intressanta egenskaper inom det här jQuery-objektet -- '.väljare' och '.sammanhang' kommer mestadels att återspegla de argument som du passerar in i 'jQuery (...)'.

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

En sak som är viktigt att notera är att jQuery ibland ger dig nya jQuery-objekt att arbeta med. Om du kör en metod som ändrar samlingen på något sätt, till exempel '.föräldrar()', då kommer jQuery inte att ändra det aktuella objektet. det kommer helt enkelt ge dig en helt ny en:

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

Alla metoder som verkar mutera samlingen på något sätt returnerar ett helt nytt jQuery-objekt - du kan fortfarande komma åt det gamla objektet via '.slutet()', eller mer verbosely, via '.PrevObject'.

2. Bröd-och-smör Element Creation

Centralt för jQuerys DOM-funktioner är dess syntetisk synpunkt för elementskapande. 1.4 tog med sig ett helt nytt sätt att snabbt och noggrant skapa dina element. T.ex.

 var myDiv = jQuery ('', id:' my-new-element ', klass:' foo ', css: färg:' röd ', backgrondColor:' #FFF ', gräns:' 1px solid #CCC ', klicka: funktion alert ('Clicked!'); , html: jQuery ('', href:' # ', klicka: funktion () // gör någonting tillbaka falskt; ));

Från och med 1.4 kan du skicka ett andra argument till jQuery-funktionen när du skapar ett element - det objekt du passerar kommer för det mesta att fungera som om du skickade det till '.attr (...)'. JQuery kommer dock att kartlägga några av egenskaperna till egna metoder, till exempel 'klick' fastighetskartor till jQuery's 'klick' metod (som binder en händelsehanterare för 'klick' händelse) och 'Css' kartor till jQuery s 'Css' metod etc.

För att kolla vilken egenskaperskarta som är till för jQuery-metoder, öppna din konsol och skriv 'JQuery.attrFn'.

3. Serialisera dina ingångar

jQuery tillhandahåller en metod som du kan använda för att serialisera alla inmatningar i en eller flera former. Detta är användbart när du skickar data via XHR ("Ajax"). Det har varit i jQuery länge men det talas inte ofta och så många utvecklare inser inte att det finns där. Att skicka en hel blankett via Ajax, med jQuery, kunde inte vara enklare:

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

jQuery ger också 'SerializeArray' metod, som är utformad att användas med flera former, och 'Param' hjälparfunktionen (under jQuery namespace) som tar ett vanligt objekt och returnerar en fråge sträng, t.ex..

 var data = namn: "Joe", ålder: 44, yrke: "Webutvecklare"; jQuery.param (data); // => "namn = Joe & ålder = 44 & yrke =Web + Developer"

4. animera någonting

jQuery s 'animera' Metoden är förmodligen den mest flexibla av jQuerys metoder. Det kan användas för att animera ganska mycket, inte bara CSS-egenskaper, och inte bara DOM-element. Så här brukar du normalt använda 'animera':

 jQuery ('# box'). animera (vänster: 300, topp: 300);

När du anger en egenskap som ska animeras (t.ex.. 'topp') jQuery kontrollerar om du animerar något med en stilfastighet ('Element.style'), och det kontrollerar om den angivna egenskapen ('topp') definieras under 'stil' -- Om det inte är så uppdaterar jQuery bara uppdateringar 'topp' på själva elementet. Här är ett exempel:

 jQuery ("# box"). animera (topp: 123, foo: 456);

'topp' är en giltig CSS-egenskap, så jQuery kommer att uppdateras 'Element.style.top', men 'Foo' är inte en giltig CSS-egenskap, så jQuery uppdaterar helt enkelt 'Element.foo'.

Vi kan använda detta till vår fördel. Låt oss säga att du vill animera en torg på en duk. Låt oss först definiera en enkel konstruktör och a 'dra' metod som kommer att kallas på alla steg i animationen:

 funktion Kvadrat (cnvs, bredd, höjd, färg) 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 skapat vår "Square" -konstruktör och en av dess metoder. Att skapa en duk och sedan animera den kan inte vara enklare:

 // Skapa en

Det här är en mycket enkel effekt, men det visar tydligt möjligheterna. Du kan se den här i åtgärd här: http://jsbin.com/ocida (det här fungerar bara i webbläsare som stöder HTML5-kanalen)

5. jQuery.ajax Returnerar XHR-objektet

jQuerys Ajax-funktioner ('JQuery.ajax', 'JQuery.get', 'JQuery.post') alla returnera en 'XMLHttpRequest' objekt som du kan använda för att utföra efterföljande operationer på någon begäran. Till exempel:

 var curRequest; jQuery ( 'button.makeRequest').klicka (funktion () curRequest = jQuery.get ('foo.php', funktion (svar) alert ('Data:' + response.responseText););); jQuery ( 'button.cancelRequest').klicka (funktion () om (curRequest) curRequest.abort (); // abort () är en metod för XMLHttpRequest);

Här gör vi en förfrågan när 'MakeRequest' knappen klickar - och vi avbryter den aktiva förfrågan om användaren klickar på 'avbryta begäran' knapp.

En annan potentiell användning är för synkrona förfrågningar:

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

Läs mer om 'XMLHttpRequest' objekta och se till att du kolla in jQuery's Ajax-verktyg.

6. Anpassade köer

jQuery har en inbyggd köningsmekanism som används av alla dess animeringsmetoder (som alla använder 'animera()' verkligen). Denna kö kan lätt illustreras med en enkel animering:

 jQuery ('a'). sväva (funktion () jQuery (this) .animate (paddingLeft: '+ = 15 bildpunkter'); , funktion () jQuery (this) .animate (paddingLeft: '- = 15 bildpunkter'); );

Snabbt svävar över ett gäng ankare och sedan svävar över dem igen kommer att få animationerna att köa upp och förekomma en i taget - jag är säker på att många av er har bevittnat denna köregeneration före. Om inte, kolla in det här: http://jsbin.com/aqaku

De 'kö' Metoden liknar den välkända 'varje' metod i hur det kallas. Du skickar en funktion, som så småningom kommer att krävas för varje element i samlingen:

 jQuery ('a'). kö (funktion () jQuery (detta) .addClass ('alla-Klar ") dequeue ().; );

Passerar bara en funktion till 'kö' kommer att göra att funktionen läggs till som standard 'Fx' kö, det vill säga kön som används av alla animeringar som gjorts av jQuery. Därför kommer denna funktion inte att ringas tills alla aktuella animeringar som förekommer på varje element i samlingen (i detta fall alla ankare) har slutfört.

Observera att vi lägger till en klass av 'klart' i funktionen ovan. Som beskrivs kommer den här klassen bara att läggas till när alla aktuella animationer är färdiga. Vi ringer också på 'Dequeue' metod. Det här är väldigt viktigt, eftersom det kommer att tillåta jQuery att fortsätta med köen (det vill säga att jQuery vet att du är klar med vad du än gör). jQuery 1.4 ger ett annat sätt att fortsätta köen; istället för att ringa 'Dequeue', ring bara det första argumentet som passerat till din funktion:

 jQuery ( 'a'). kö (funktion (nextItemInQueue) // Fortsätt kö: nextItemInQueue (); );

Det gör det exakt detsamma, även om det är lite mer användbart eftersom det kan kallas var som helst inom din funktion, även inom en rad stängningar (som vanligtvis förstör 'detta' nyckelord). Naturligtvis, före jQuery-1.4 kan du bara spara en referens till 'detta', men det skulle bli lite tråkigt.

För att lägga till en funktion i en anpassad kö, skicka helt enkelt din anpassade kös namn som första argumentet och funktionen som den andra:

 jQuery ( 'a'). kö ('customQueueName ', funktion () // Gör saker jQuery (this) .dequeue ('customQueueName '); );

Observera att eftersom vi inte använder standardvärdet 'Fx' kö, vi måste också skicka vår kös namn till 'Dequeue' metod för att tillåta jQuery att fortsätta med vår anpassade kö.

Läs mer om 'kö', 'Dequeue' och 'JQuery.queue'.

7. Event Namnrymd

jQuery ger dig möjlighet att namnhantera händelser, vilket kan vara mycket användbart när du skapar plugins och komponenter från tredje part. Om det behövs kan användaren av ditt plugin effektivt inaktivera ditt plugin genom att binda bort alla händelsehanterare att den är registrerad.

För att lägga till en namnrymd när du registrerar en händelsehanterare, helt enkelt suffixa händelsens namn med en period och sedan ditt unika namnrymd (t.ex.. ' .FooPlugin'):

 jQuery.fn.foo = function () this.bind ('click.fooPlugin', funktion () // gör saker); this.bind ( "mouseover.fooPlugin ', funktion () // gör saker); returnera detta; ; // Använd plugin: jQuery ('a'). Foo (); // Förstör dess händelsehanterare: jQuery ('a'). Unbind ('.fooPlugin');

Passerar bara namespace till 'Unbind' kommer att binda alla händelsehanterare till den namnposten.

Slutsats

Så vilka jag saknade? Några användbara funktioner som du känner jQuery dokumenterar inte tillräckligt bra? Låt oss diskutera i kommentarerna!

Koda