Share
Webbutvecklingsgemenskapen blev intensivt upphetsad den 14 januari 2009 när jQuery version 1.3.0 officiellt släpptes. jQuery 1.3 medför betydande förbättringar, särskilt när det gäller hastighet. Dessutom kunde utvecklarna hålla jQuery så liten som någonsin samtidigt som de lagt till några bra och ofta efterfrågade funktioner. Idag kommer vi att ha en djup titt på de nya funktionerna och hur du kan klämma ut det mesta ut av det.
Om du är ny på jQuery och behöver ladda ner den senaste versionen, besök jQuery hemsida och klicka på länken för nedladdning för att komma igång. Om du uppgraderar från en tidigare version noterar du gärna att API: n har stannat överensstämmande och kompatibelt med äldre versioner. För att uppgradera, uppdatera du bara jQuery-versionen på din server och länka till den properl.y Senare i den här artikeln kommer vi att diskutera eventuella ändringar som kan orsaka problem med någon aktuell kod du har.
Utvecklarna av jQuery har tagit ett jätte steg framåt med sin css selector motor och har startat ett fristående projekt som kallas "Sizzle". Sizzle är nu css väljarmotorn för jQuery och drivs av Dojo Foundation. Sizzle ser redan lovande ut för fler ramar än bara jQuery, eftersom den är öppen och tillgänglig för alla utvecklare som vill använda den i sina projekt. Du kan lära dig mer om sizzle på sidan jQuery och på Sizzles hemsida. jQuery samarbetar för närvarande med Prototype, Dojo, Yahoo UI, MochiKit, TinyMCE och många fler bibliotek för att göra denna motor ännu kraftigare.
Med frisläppandet av en ny motor kommer mycket snabbare prestanda; i vissa fall över 400% snabbare, beroende på vilken webbläsare som används. jQuery släppte sina testresultat med hjälp av väljare som faktiskt använder (som vi har kartat i nästa avsnitt). Se diagrammet direkt nedan för de nya valresultatresultaten.
Som nämnts ovan baserades väljarprestationstesterna på de väljare som folk faktiskt använde. Jag hittade dessa data i sig för att vara intressant, och du kan hitta den här. Det är dock bara i ett textformat och jag gillar diagram och diagram. En av de saker som stod fast för mig var hur en så liten andel av personerna utnyttjade den synliga väljaren. Nedan hittar du de väljare som utvecklare brukar använda i jQuery-skript idag.
En annan riktigt spännande sak om frigivandet av jQuery 1.3 är utsläppandet av en ny jQuery API Browser, skapad av Remy Sharp. Du kan komma åt den via internet för att söka efter jQuery-metod eller funktion som du önskar. Ännu bättre, det är tillgängligt för nedladdning som en offline-webbläsare med hjälp av Adobe Air Flash-installationsprogrammet. I grunden gör jQuery API all information eller dokumentation tillgänglig inom några få sekunder, med eller utan en internetanslutning.
Ovan:offline webbläsare igång.
Fram till nu har jQuery utfört en process som kallas browser sniffing för att bestämma vilken åtgärd koden ska ta. Nackdelen av detta gör antagandet att en bugg eller en funktion alltid kommer att finnas. jQuery övervinner detta genom att använda ett enda objekt som kallas jQuery.support, och singlar inte längre ut en sångers användaragent. John förklarar hur jQuery.support fungerar bäst själv:
Vi använder en teknik som heter funktiondetektering där vi simulerar en viss webbläsarfunktion eller bugg för att verifiera dess existens. Vi har inkapslat alla kontroller som vi använder i jQuery till ett enda objekt: jQuery.support. Mer information om det, funktionen upptäckt, och vad den här funktionen ger kan hittas i dokumentationen jQuery.support.
Så vad betyder detta i slutändan? Det betyder att jQuery och jQuery-plugins kommer över tiden bli mycket mer tillförlitliga, eftersom vi inte längre behöver bero på att webbläsaren sniffar för att bestämma en viss webbläsare / användaragent. John noterar också att jQuery.browser fortfarande finns kvar i jQuery och kommer att förbli ganska länge. Det är avlägsnat och du uppmanas att använda funktionen upptäckt istället.
En spännande och säkert användbar funktion som släpptes med 1,3 är den nya "live events" -funktionen. Live event delegation innebär att om ett element har en händelsehanterare bifogad, kommer alla ytterligare skapade element också att ha den händelsehanteraren bifogad. Ta koden nedan till på Live () dokumentationen.
Accentsconagua
$ ("p"). live ("klicka", funktion () $ (detta) .after ("En annan punkt!
");); Vid första anblicken kanske du undrar, 'Varför skulle jag inte bara fästa en händelsehanterare på p-taggen?'. Vid ytterligare inspektion inser vi att alla p-element som införs efter det aktuella stycket också kommer att ha händelsehanteraren kopplad till dem, vilket ger effekten obegränsad användning. Du kan läsa mer om levande händelser och kolla in demoen på jQuery-dokumenten.
Piling på en annan stor egenskap av 1,3, gav utvecklarna oss närmaste (), vilket gör precis vad du tycker att det skulle göra. Närmaste () -funktionen kan användas för att hitta det närmaste elementet med en viss uppsättning parametrar. Låt oss ta en titt på demo igen.
$ (dokument) .bind ("klicka", funktion (e) $ (e.target) .closest ("li"). toggleClass ("highlight");); I koden ovan binder vi en klickfunktion till det aktuella dokumentet och lägger till / tar bort klassen "markera" till närmaste li-elementet vid ett användarklick. Om inget element hittas fortsätter det att passera upp dokumentet tills det hittar en matchning. Om ingen matchning hittas görs inget exekverat. Ta reda på mer om traversering med närmaste ().
jQuery såg en signifikant förbättring av hastigheten när det gäller DOM-manipulation och införande / skapa nya HTML-element. Detta skulle gälla för att använda metoder som .insertBefore () och append () etc. För att få en bättre uppfattning om hastighetsförändringarna ser vi på en annan super fantastisk graf.
Det är vettigt att utvecklarna tog tid att fokusera på att öka hastigheten på hide / show effekterna. Det här är två av de mest använda jQuery-effekterna. Hastighetsresultat ses nedan.
Om du tycker att du använder offset () ofta i dina jQuery-skript, kommer du att vara glad att höra att förskjutningshastigheten också förbättrats kraftigt. Om du undrar, kommer offset () helt enkelt att få den aktuella förskjutningen av det matchade elementet i förhållande till dokumentet. Resultat ses nedan.
Din första stopp för att ta reda på allt och allt som inkluderades i den här utgåvan. Och om du fortfarande vill ha mer grafer och diagram kan du hitta dem där också.
Besök webbplats
Glöm inte att kolla in den nya jQuery API / offline-webbläsaren, det sparar dig massor av tid och frågor när du fastnar.
Besök webbplats
Jeffrey gjorde en utmärkt 15-serie på ThemeForest Blog som täcker en stor mängd jQuery-tips, tricks och tekniker. Missa inte det!
Besök webbplats
