Share
De webontwikkelingsgemeenschap werd intens enthousiast op 14 januari 2009, toen jQuery-versie 1.3.0 officieel werd vrijgegeven. jQuery 1.3 brengt aanzienlijke verbeteringen met zich mee, vooral als het gaat om snelheid. Bovendien konden de ontwikkelaars jQuery net zo klein houden als altijd, terwijl ze geweldige en vaak gevraagde functies toevoegen. Vandaag gaan we dieper in op de nieuwe functies en hoe je er het meeste uit kunt persen.
Als u onbekend bent met jQuery en de nieuwste versie moet downloaden, gaat u naar de jQuery-startpagina en klikt u op de downloadkoppeling om aan de slag te gaan. Als u een upgrade van een eerdere versie uitvoert, houdt u er rekening mee dat de API consistent is gebleven en compatibel is met oudere versies. Om te upgraden, werkt u eenvoudigweg de jQuery-versie op uw server bij en linkt u er naar juistl.y Later in dit artikel zullen we alle wijzigingen bespreken die problemen met de huidige code kunnen veroorzaken..
De ontwikkelaars van jQuery hebben een gigantische stap voorwaarts gemaakt met hun css selector-engine en zijn een zelfstandig project gestart dat bekend staat als 'Sizzle'. Sizzle is nu de css selector-engine voor jQuery en wordt beheerd door de Dojo Foundation. Sizzle ziet er al veelbelovend uit voor meer frameworks dan alleen jQuery, omdat het open en beschikbaar is voor ontwikkelaars die het in hun projecten willen gebruiken. Je kunt meer lezen over sizzle op de jQuery-releasepagina en op de startpagina van Sizzle. jQuery werkt momenteel samen met prototype, Dojo, Yahoo UI, MochiKit, TinyMCE en nog veel meer bibliotheken om deze motor nog krachtiger te maken.
Met de release van een nieuwe motor komen veel snellere prestaties; in sommige gevallen meer dan 400% sneller, afhankelijk van de gebruikte browser. jQuery heeft hun testresultaten vrijgegeven met behulp van selectors die mensen daadwerkelijk gebruiken (die we in de volgende sectie in kaart hebben gebracht). Zie de grafiek direct hieronder voor de nieuwe resultaten van de selectorprestaties.
Zoals hierboven vermeld, waren de prestatietests van de selector gebaseerd op de selectors die mensen daadwerkelijk gebruikten. Ik vond deze gegevens op zich interessant, en je kunt hem hier vinden. Het is echter in een alleen-tekstformaat en ik hou van grafieken en diagrammen. Een van de dingen die mij opviel, was hoe zo'n klein percentage mensen gebruik maakte van de: zichtbare selector. Hieronder vindt u de selectors die ontwikkelaars tegenwoordig het meest gebruiken in de jQuery-scripts.
Een ander echt opwindend aspect van de release van jQuery 1.3 is de release van een nieuwe jQuery API-browser, gemaakt door Remy Sharp. Je hebt toegang via internet om elke gewenste jQuery-methode of -functie te doorzoeken. Nog beter, het is beschikbaar om te downloaden als een offline browser met behulp van het Adobe Air Flash-installatieprogramma. Kortom, de jQuery API maakt alle informatie of documentatie toegankelijk binnen een paar klikken, met of zonder een internetverbinding.
Bovenstaande:offline-browser actief.
Tot nu toe heeft jQuery een proces uitgevoerd dat bekend staat als browser sniffing om de actie te bepalen die de code zou moeten nemen. Het nadeel hiervan is dat de aanname een bug is of dat een functie altijd zal bestaan. jQuery overwint dit door een enkel object te gebruiken dat bekend staat als jQuery.support en niet langer een user-agent voor zangers te zijn. John legt uit hoe jQuery.support het beste zelf werkt:
We gebruiken een techniek genaamd functiedetectie waarbij we een bepaalde browserfunctie of een bug simuleren om het bestaan ervan te verifiëren. We hebben alle controles die we in jQuery gebruiken ingekapseld in een enkel object: jQuery.support. Meer informatie daarover, functiedetectie en wat deze functie biedt, zijn te vinden in de documentatie van jQuery.support.
Dus wat betekent dit op het einde? Dit betekent dat jQuery- en jQuery-plug-ins na verloop van tijd betrouwbaarder worden, omdat we niet langer afhankelijk zijn van het snuiven van browsers om een specifieke browser / user-agent te bepalen. John merkt ook op dat jQuery.browser nog steeds in jQuery aanwezig is en nog een hele tijd zal blijven bestaan. Het is verouderd en u wordt aangemoedigd om feature-detectie te gebruiken.
Een spannende en zeker nuttige functie die met 1.3 wordt uitgebracht, is de nieuwe functie 'Live-evenementen'. Uitoefening van live evenementen betekent dat als aan een element een gebeurtenishandler is gekoppeld, aan alle verdere gecreëerde elementen ook die gebeurtenishandler is gekoppeld. Volg de onderstaande code in de documentatie live ().
Accentsconagua
$ ("p"). live ("klik", functie () $ (this) .after ("Nog een alinea!
");); Op het eerste gezicht kun je je afvragen: 'Waarom zou ik niet gewoon een click event-handler aan de p-tag koppelen?'. Bij verdere inspectie realiseren we ons dat aan elke p-elementen die na de huidige alinea zijn ingevoegd, ook de gebeurtenishandler is gekoppeld, waardoor het effect onbeperkt kan worden gebruikt. Je kunt meer lezen over de live-evenementen en de demo bekijken in de jQuery-documenten.
Voortbouwend op een andere geweldige functie van 1.3, gaven de ontwikkelaars ons het dichtst (), wat precies doet wat u denkt dat het zou doen. De functie closer () kan worden gebruikt om het dichtstbijzijnde element binnen een gegeven reeks parameters te vinden. Nogmaals, laten we de demo eens bekijken.
$ (document) .bind ("klik", functie (e) $ (e.target) .closest ("li"). toggleClass ("highlight");); In de bovenstaande code binden we een klikfunctie aan het huidige document en voegen / verwijderen de klasse 'highlight' toe aan het dichtstbijzijnde li-element na een klik van een gebruiker. Als er geen element wordt gevonden, blijft het document doorlopen totdat het een overeenkomst vindt. Als er geen overeenkomst wordt gevonden, wordt er niets uitgevoerd. Meer informatie over het passeren van de dichtstbijzijnde ().
jQuery zag een aanzienlijke verbetering in snelheid als het gaat om DOM-manipulatie en het invoegen / maken van nieuwe HTML-elementen. Dit zou van toepassing zijn op het gebruik van methoden zoals .insertBefore () en append () enz. Om een beter idee te krijgen van de snelheidsveranderingen, zullen we kijken naar een andere super verbazingwekkende grafiek.
Het is logisch dat de ontwikkelaars de tijd namen om zich te concentreren op het verhogen van de snelheid van de hide / show-effecten. Dit zijn twee van de meest gebruikte jQuery-effecten. Snelheidsresultaten hieronder weergegeven.
Als u merkt dat u offset () vaak gebruikt in uw jQuery-scripts, zult u blij zijn te horen dat de offset-snelheid ook enorm is verbeterd. In het geval dat je je afvroeg, krijgt offset () gewoon de huidige offset van het overeenkomende element ten opzichte van het document. Resultaten hieronder weergegeven.
Uw eerste stop om alles en alles te weten te komen dat in deze release is opgenomen. En als je nog steeds zin hebt in meer grafieken en diagrammen, kun je ze daar ook vinden.
Bezoek website
Vergeet niet om de nieuwe jQuery API / offline browser te bekijken, het zal je een hoop tijd en vragen besparen als je vastloopt.
Bezoek website
Jeffrey deed een uitstekende 15-delige serie over de ThemeForest Blog met een groot aantal jQuery-tips, -tricks en -technieken. Mis het niet!
Bezoek website
