Nettutviklingssamfunnet ble intensivt begeistret 14. januar 2009 da jQuery versjon 1.3.0 ble offisielt utgitt. jQuery 1.3 gir med seg betydelige forbedringer, spesielt når det gjelder fart. I tillegg var utviklerne i stand til å holde jQuery så liten som mulig, samtidig som det ble lagt til noen flotte og ofte forespurte funksjoner. I dag vil vi få en grundig titt på de nye funksjonene, og hvordan du kan presse mest mulig ut av det.
Hvis du er ny til jQuery og trenger å laste ned den nyeste versjonen, kan du gå til jQuery-hjemmesiden og klikke på nedlastingskoblingen for å komme i gang. Hvis du oppgraderer fra en tidligere versjon, vil du gjerne notere at API-en har holdt seg konsistent og kompatibel med eldre versjoner. For å oppgradere, oppdater du jQuery-versjonen på serveren din og knytt den til riktigl.y Senere i denne artikkelen diskuterer vi eventuelle endringer som kan føre til problemer med en gjeldende kode du har.
Utviklerne av jQuery har tatt et gigantisk skritt videre med sin css selector motor og har startet et frittstående prosjekt kjent som "Sizzle". Sizzle er nå css selector motoren for jQuery og drives av Dojo Foundation. Sizzle ser allerede lovende på flere rammer enn bare jQuery, da den er åpen og tilgjengelig for alle utviklere som ønsker å bruke den i sine prosjekter. Du kan lære mer om sizzle på jQuery-utgivelsessiden og på Sizzles hjemmeside. jQuery samarbeider for tiden med Prototype, Dojo, Yahoo UI, MochiKit, TinyMCE og mange flere biblioteker for å gjøre denne motoren enda sterkere.
Med utgivelsen av en ny motor kommer det mye raskere ytelse; i noen tilfeller over 400% raskere, avhengig av hvilken nettleser som brukes. jQuery ga ut sine testresultater ved hjelp av selectors folk faktisk bruker (som vi har kartlagt i neste avsnitt). Se grafen direkte under for resultatene for den nye velgerens ytelse.
Som nevnt ovenfor ble seleksjonsprestasjonstestene basert på selektorer som folk faktisk brukte. Jeg fant disse dataene i seg selv for å være interessant, og du kan finne det her. Det er imidlertid bare i et tekstformat og jeg liker grafer og diagrammer. En av de tingene som stakk ut til meg, var hvordan en så liten prosentandel av folk tok fordel av den synlige velgeren. Nedenfor finner du de selektorer som utviklere bruker mest i jQuery-skriptene i dag.
En annen veldig spennende ting om utgivelsen av jQuery 1.3 er utgivelsen av en ny jQuery API Browser, opprettet av Remy Sharp. Du kan få tilgang til det via internett for å søke etter en jQuery-metode eller -funksjon du ønsker. Enda bedre, det er tilgjengelig for nedlasting som en nettleser med Adobe Air Flash-installatøren. I utgangspunktet gjør jQuery API all informasjon eller dokumentasjon tilgjengelig innen få klikk, med eller uten en internettforbindelse.
Ovenfor:offline nettleser oppe og går.
Frem til nå har jQuery utført en prosess kjent som nettlesersniffing for å bestemme hvilken handling koden skal ta. Ulempen av dette er å anta at en feil eller en funksjon alltid vil eksistere. jQuery overvinter dette ved å bruke et enkelt objekt kjent som jQuery.support, og ikke lenger singler ut en sanger bruker agent. John forklarer hvordan jQuery.support fungerer best selv:
Vi bruker en teknikk som kalles funksjonsdeteksjon der vi simulerer en bestemt nettleserfunksjon eller feil for å bekrefte eksistensen. Vi har innkapslet alle kontrollene som vi bruker i jQuery til et enkelt objekt: jQuery.support. Mer informasjon om det, funksjonalisering, og hva denne funksjonen gir, finnes i jQuery.support-dokumentasjonen.
Så hva betyr dette på slutten? Det betyr at jQuery og jQuery-plugins over tid vil bli mye mer pålitelige, siden vi ikke lenger må stole på nettlesersniffing for å bestemme en bestemt nettleser / brukeragent. John noterer også at jQuery.browser fortsatt er i jQuery og vil forbli lenge. Det er utdatert, og du oppfordres til å bruke funksjonssøking i stedet.
En spennende og sikkert nyttig funksjon utgitt med 1,3 er den nye "live events" -funksjonen. Live event delegation betyr at hvis et element har en hendelseshåndterer vedlagt, vil eventuelle andre elementer som er opprettet, også ha den hendelseshandleren knyttet. Ta koden under som er funnet på live () dokumentasjonen.
$ ("p"). live ("klikk", funksjon () $ (dette) .after ("Et annet avsnitt!
"););
Ved første øyekast kan du kanskje lure på: 'Hvorfor skulle jeg ikke bare legge til en klikkhendelseshåndterer til p-taggen?'. Ved ytterligere inspeksjon innser vi at eventuelle p-elementer som er satt inn etter det nåværende avsnittet, også vil ha hendelseshandleren knyttet til dem, noe som gir effekten ubegrenset bruk. Du kan lese mer om live-hendelsene og sjekke ut demoen på jQuery-dokumentene.
På grunn av en annen stor funksjon på 1,3, ga utviklerne oss nærmest (), som bare gjør det du tror det ville gjøre. Den nærmeste () -funksjonen kan brukes til å finne det nærmeste elementet med et gitt sett med parametere. Igjen, la oss ta en titt på demoen.
$ (dokument) .bind ("klikk", funksjon (e) $ (e.target) .closest ("li"). toggleClass ("highlight"););
I koden ovenfor knytter vi en klikk-funksjon til det nåværende dokumentet og legger til / fjerner klassen 'høydepunkt' til nærmeste li-elementet ved et brukerklikk. Hvis ingen element er funnet, fortsetter den å krysse opp dokumentet til det finner en kamp. Hvis ingen kamp er funnet, blir ingenting utført. Finn ut mer om å krysse ved hjelp av nærmeste ().
jQuery så en betydelig forbedring i hastigheten når det gjelder DOM-manipulering og innføring / oppretting av nye HTML-elementer. Dette vil gjelde for bruk av metoder som .insertBefore () og append () etc. For å få en bedre ide om hastighetsendringene, vil vi se på en annen super fantastisk graf.
Det er fornuftig at utviklerne tok seg tid til å fokusere på å øke hastigheten på skjul / show-effektene. Dette er to av de mest brukte jQuery-effektene. Hastighetsresultater sett nedenfor.
Hvis du finner deg selv ved å bruke offset () ofte i jQuery-skriptene dine, vil du gjerne høre at offsethastigheten også har forbedret seg sterkt. I tilfelle du lurte på, får offset () bare det nåværende kompensasjonen av det matchede elementet i forhold til dokumentet. Resultatene nedenfor.
Din første stopp for å finne ut alt og alt som var inkludert i denne utgivelsen. Og hvis du fortsatt ønsker flere grafer og diagrammer, kan du finne dem der også.
Besøk nettsiden
Ikke glem å sjekke ut den nye jQuery API / offline nettleseren, det vil spare deg for massevis av tid og spørsmål når du sitter fast.
Besøk nettsiden
Jeffrey gjorde en utmerket 15-serie på ThemeForest Blog som dekker en stor mengde jQuery-tips, triks og teknikker. Ikke gå glipp av det!
Besøk nettsiden