Share
jQuery 1.4 släpptes nyligen. Detta var inte bara en underhållslösning som vissa hade spekulerat; det finns många Nya funktioner, förbättringar och prestanda förbättringar ingår i 1.4! Det här inlägget täcker de nya funktioner och förbättringar som du kan hitta fördelaktiga.
Du kan ladda ner jQuery 1.4 just nu, här: http://code.jquery.com/jquery-1.4.js
Pre 1.4, jQuery stöds lägga attribut till en element samling via den användbara "attr"-metoden, som kan ges både ett attributnamn och ett värde eller ett objekt som anger flera attribut. jQuery 1.4 lägger till stöd för att överföra ett attributobjekt som det andra argumentet till jQuery-funktionen själv, när element skapas.
Låt oss säga att du måste skapa ett ankareelement med flera attribut. Med 1,4 är det så enkelt som:
Accentsconagua
jQuery ('', id:' foo ', href:' http://google.com ', titel:' Bli en Googler ', rel: "extern", text: "Gå till Google!" ); Du kanske har märkt "text"attribut - du kommer nog att undra vad det är där, trots allt finns det ingen"text"Attribut för ankare! JQuery 1.4 använder sig av sina egna metoder när du passerar vissa attribut. Så" attributet "text som anges ovan skulle få jQuery att ringa".text()"metod, passerar" Gå till Google! "som enda argument.
Ett bättre exempel på detta i åtgärd:
jQuery ('', id:' foo ', css: fontWeight: 700, färg:' grön ', klicka: funktion () alert (' Foo har blivit klickat! '); ); "Id" läggs till som ett vanligt attribut, men "css" och "klicka" egenskaper utlöser anrop av respektive metod. Ovanstående kod, före 1,4-utgåvan, skulle ha skrivits så här:
jQuery ('') .attr (' id ',' foo ') .css (fontWeight: 700, färg:' green') .click (funktion () alert ('Foo har blivit klickat!');); Läs mer om jQuery (...)
Tre nya metoder har lagts till DOM-traversalarsenalen i 1.4, "nextUntil","prevUntil"och"parentsUntil". Varje av dessa metoder kommer att korsa DOM i en viss riktning tills den valda väljaren är nöjd. Så låt oss säga att du har en lista med frukt:
Du vill välja alla objekt efter "Apple", men du vill sluta när du når "Jordgubbe". Det kunde inte vara enklare:
jQuery ('ul li: innehåller (Apple)'). nextUntil (': contains (Pear)'); // Välj Banan, Grape, Jordgubb Läs mer om: prevUntil, nextUntil, parentsUntil
I stället för att kedja en massa händelsebindande metoder tillsammans kan du klumpa dem alla i samma samtal, som så:
jQuery ('# foo) .bind (klick: funktion () // gör någonting, mouseover: funktion () // gör något, mouseout: funktion () // gör något) Detta fungerar också med ".ett()".
Läs mer om .bind (...)
I stället för att bara definiera en lättnadsfunktion för en enda animering kan du nu definiera en annan lättnadsfunktion för varje egenskap som du animerar. jQuery innehåller två lättnader, sväng (standard) och linjär. För andra behöver du ladda ner dem separat!
Att ange en lättnadsfunktion för varje egendom definierar bara egenskapen som en grupp, med det första värdet är vad du vill animera den egenskapen till och den andra är lättnadfunktionen som ska användas:
jQuery ('# foo'). animera (vänster: 500, topp: [500, 'easeOutBounce'], 2000); Se den här koden i aktion!
Du kan också definiera per-egenskapslättningsfunktioner i alternativalternativet som egenskapsnamn-värdepar i "specialEasing" -objektet:
jQuery ('# foo'). animera (vänster: 500, topp: 500, duration: 2000, specialEasing: top: 'easeOutBounce'); Redaktörens anteckning - Författaren till denna artikel, James Padolsey, är blygsam. Denna nya funktion var hans idé!
Läs mer om lättnad per fastighet
jQuery 1.4 lägger till stöd för att delegera "lämna","Byta","fokus"och"fläck"händelser. I jQuery använder vi".leva()"metod för att delegera händelser. Det här är användbart när du måste registrera händelsehanterare på många element och när nya element kan läggas över tiden (med".leva()"är billigare än återbindande kontinuerligt).
Men var försiktig! Du måste använda händelsens namn, "fokusera"och"focusOut"om du vill delegera händelserna" fokus "och" oskärpa "!
jQuery ('input'). live ('focusin', funktion () // gör något med detta); jQuery 1.4 ger en ny "ombud"funktionen under jQuery namespace. Den här funktionen tar två argument, antingen ett" scope "och ett metodnamn, eller en funktion och det avsedda omfånget. JavaScript-s" nyckelordet "kan vara ganska knepigt för att hålla koll på. Ibland vann du" t vill att det ska vara ett element, men istället ett objekt som du tidigare skapat.
Till exempel har vi här en "app"objekt som har två egenskaper, en"clickhandler"metod och ett config-objekt:
var app = config: clickMessage: "Hej!" , clickHandler: function () alert (this.config.clickMessage); ;
"clickhandler"metod, när den kallas som"app.clickHandler ()" kommer att ha "app"som dess sammanhang, vilket betyder att"detta"nyckelordet tillåter det åtkomst till"app". Det fungerar ganska bra om vi bara ringer:
app.clickHandler (); // "Hej!" är varnad
Låt oss försöka binda det som en händelsehanterare:
jQuery ('a'). bind ('klick', app.clickHandler); När vi klickar på ett ankar verkar det inte fungera (inget varnar). Det beror på att jQuery (och mest sana händelsemodeller) som standard anger handlarens sammanhang som målelement, dvs det element som just har klickats kommer att vara tillgängligt via "detta"Men vi vill inte ha det, vi vill ha"detta"att ställas in på"app". Att uppnå detta i jQuery 1.4 kunde inte vara enklare:
jQuery ('a'). bind ('klick', jQuery.proxy (app, 'clickHandler')); Nu när ett ankare klickas, "Hej!" kommer att varnas!
Proxy-funktionen returnerar en "förpackad" version av din funktion, med "detta"inställd på vad du anger. Det är användbart även i andra sammanhang, till exempel att skicka återkopplingar till andra jQuery-metoder eller till plugins.
Läs mer om jQuery.proxy
Du kan nu lägga till en fördröjning till dina animeringsköer. Faktum är att det fungerar i vilken kö som helst, men det vanligaste användningsfallet kommer troligtvis att vara med "fx" -kön. Detta låter dig pausa mellan animeringar utan att behöva röra med callbacks och samtal till "setTimeout". Det första argumentet att".fördröjning()"är den mängd millisekunder du vill fördröja för.
jQuery ('# foo') .slideDown () // Slide down .delay (200) // Gör ingenting för 200 ms .fadeIn (); // Fade in Om du vill fördröja en annan kö än den standard "fx" -kön, måste du skicka könamnet som det andra argumentet till ".fördröjning()".
Läs mer om .fördröjning (...)
jQuery 1.4 gör det enkelt att kontrollera om ett element (eller samling) ".har ()"något. Det här är det programmatiska som motsvarar jQuery's selektorfilter,": Har ()". Denna metod väljer alla element i den aktuella samlingen som innehåller minst ett element som överensstämmer med den valda väljaren.
. JQuery ( 'div') har ( 'ul');
Det skulle välja alla DIV-element som innehåller UL-element. I denna situation skulle du förmodligen bara använda väljarfiltret (": Har ()"), men den här metoden är fortfarande användbar när du behöver filtrera en samling programmatiskt.
jQuery 1.4 avslöjar också "innehåller"funktionen under jQuery namespace. Detta är en lågnivåfunktion som accepterar två DOM-noder. Den kommer att returnera en booleska som anger om det andra elementet finns i det första elementet..
jQuery.contains (document.documentElement, document.body); // Returnerar sant - är inom
Läs mer om: .har (...), jQuery.contains (...)
Vi har haft ".slå in()"metod ett tag nu. jQuery 1.4 lägger till".packa upp()"metod som gör det fullständiga motsatsen. Om vi antar följande DOM-struktur:
foo
Vi kan ta bort styckeelementet som så:
jQuery ( 'p') packa ().;
Den resulterande DOM-strukturen skulle vara:
foo
I grunden tar denna metod helt enkelt föräldern till något element.
Läs mer om .packa ut (...)
Den nya ".lösgöra()"-metoden låter dig ta bort element från DOM, ungefär som".ta bort()"-metoden. Nyckelförskjutningen med den här nya metoden är att den inte förstör data som innehas av jQuery på det här elementet. Detta inkluderar data som läggs till via".data()"och eventuella händelsehanterare läggs till via jQuerys händelsessystem.
Det här kan vara användbart när du behöver ta bort ett element från DOM, men du vet att du måste lägga till det på ett senare stadium. Dess händelsehanterare och andra uppgifter kommer att fortsätta.
var foo = jQuery ('# foo'); // Bind en viktig händelsehanterare foo.click (funktion () alert ('Foo!');); foo.detach (); // Ta bort det från DOM // ... gör saker foo.appendTo ('body'); // Lägg till det tillbaka till DOM foo.click (); // varningar "Foo!" Läs mer om .lossa (...)
jQuery 1.4 ger dig två nya sätt att använda ".index()"-metoden. Tidigare kunde du bara skicka ett element som sitt argument och du förväntar dig att ett nummer ska returneras som anger indexet för det elementet i den aktuella samlingen.
Att lämna inga argument returnerar nu indexet för ett element bland sina syskon. Så antar du följande DOM-struktur:
När ett listobjekt är klickat vill du ta reda på indexet för det klickade elementet bland alla andra listobjekt. Det är så enkelt som:
jQuery ('li'). klicka (funktion () alert (jQuery (this) .index ());); jQuery 1.4 låter dig också ange en väljare som det första argumentet till ".index()", så kommer du att ge dig indexet för det aktuella elementet bland den samling som produceras från den väljaren.
Du bör notera att det som returneras från denna metod är ett heltal, och det kommer att returneras -1 om väljaren / elementet som passerat inte finns i dokumentet.
Läs mer om .index (...)
De flesta DOM-manipuleringsmetoderna stöder nu att överföra en funktion som enda argument (eller för det andra, i fallet med ".css ()"&".attr ()"). Denna funktion kommer att köras på varje element i samlingen för att bestämma vad som ska användas som det verkliga värdet för den metoden.
Följande metoder har denna förmåga:
Inom återuppringningsfunktionen har du tillgång till det aktuella elementet i samlingen via "detta"och dess index via det första argumentet.
jQuery ('li'). html (funktion (i) return'index för denna listobjekt: '+ i;); Också med några av ovanstående metoder får du också ett andra argument. Om du ringer en setter-metod (som ".html()"eller".attr ( 'href)") har du tillgång till det aktuella värdet.
jQuery ('a'). attr ('href', funktion (jag, currentHref) return currentHref + '? foo = bar';); Som du kan se, med ".css ()"och".attr ()"metoder, skulle du överföra funktionen som det andra argumentet, eftersom den första skulle användas för att namnge egenskapen du vill ändra:
jQuery ('li'). css ('färg', funktion (jag, nuvarandeCssColor) returnera i% 2? 'röd': 'blå';); jQuery 1.4 lägger till två nya hjälparfunktioner (lagras direkt under jQuery namespace) som hjälper dig att bestämma vilken typ av objekt du har att göra med.
För det första finns det "isEmptyObject", returnerar den här funktionen en boolesk indikerande huruvida det överförda objektet är tomt (saknar egenskaper - direkt och ärvd). För det andra finns det "isPlainObject", som kommer att returnera en booleska som anger om det överlämnade objektet är ett vanligt JavaScript-objekt, det vill säga en skapad via""eller"nytt objekt ()".
jQuery.isEmptyObject (); // true jQuery.isEmptyObject (foo: 1); // false jQuery.isPlainObject (); // true jQuery.isPlainObject (fönster); // false jQuery.isPlainObject (jQuery ()); // false
Läs mer om: isPlainObject (...), isEmptyObject (...)
jQuery s ".närmast()"-metoden accepterar nu en uppsättning selektorer. Det är användbart när du vill gå över förfäderna till ett element, letar efter (mer än en) närmaste element med vissa egenskaper.
Dessutom accepterar det nu ett sammanhang som det andra argumentet, vilket innebär att du kan styra hur långt eller hur nära du vill att DOM kryssat till. Båda dessa förbättringar rymmer sällsynta användningsfall men de används internt för stor effekt!
Läs mer om .närmaste (...)
Som nämnts måste du använda dessa nya händelser, kallade "focusin" och "focusout" för att delegera "focus" och "blur" -händelserna. Dessa händelser låter dig vidta åtgärder när ett element eller en efterföljare av ett element får fokus.
jQuery ('form') .focusin (funktion () jQuery (this) .addClass ('focused');); .focusout (funktion () jQuery (this) .removeClass ('focused');); Du bör också notera att båda dessa händelser inte propagerar ("bubbla"); de fångas. Detta innebär att det yttersta (förfader) -elementet kommer att utlösas före kausal "mål" -elementet.
Läs mer om fokusera och focusOut evenemang.
Jo det är det! Jag har försökt att täcka de förändringar som jag tror kommer att påverka dig!
Om du inte redan har det bör du kolla in "14 dagar av jQuery", en fantastisk online-händelse som markerar frisättningen av jQuery 1.4 och jQuerys fjärde födelsedag!
Och glöm inte att kassa den nya API dokumentation!
Visste du att du kan tjäna upp till $ 600 för att skriva en PLUS-handledning och / eller screencast för oss? Vi letar efter djupgående och välskrivna handledning på HTML, CSS, PHP och JavaScript. Om du har förmåga, kontakta Jeffrey på [email protected].
Observera att den faktiska ersättningen kommer att vara beroende av kvaliteten på den slutliga handledningen och screencast.
