Share
Hvis du, som mange Flash-utviklere, ser på å bruke HTML5 for webappsene dine, har du sikkert sikkert kommet over jQuery. Det er et veldig populært JavaScript-bibliotek, som brukes av en stor prosentandel av de mest besøkte nettstedene - men hva er oppstyret om, og skal du bruke det?
Hvis du kjenner AS3, vet du i utgangspunktet mye JavaScript allerede; de to språkene er veldig like. Så det er fristende å bare hoppe rett inn og kode - men det er noen viktige begreper du trenger å forstå først. En av disse er ideen til DOM.
Når du laster inn en nettside, blir nettleseren din flat HTML til en treaktig struktur av JavaScript-objekter kalt DOM (Document Object Model). JavaScript DOM, da, ligner veldig på ActionScript Display List; og hvis du er en Flex-utvikler, kan du se likhetene mellom MXML og HTML.
I Flash kan vi få tilgang til bestemte visningsobjekter ved å navigere til dem gjennom visningslisten, som stage.getChildAt (3) .getChildAt (0), men dette er ganske latterlig. I stedet er det mer sannsynlig å gi visningsobjekter forekomstnavn (via Flash IDE), eller lagre referanser til dem i variabler, arrayer eller objektegenskaper, som dialogBox.okButton = ny SimpleButton ().
I JavaScript, vi kunne konstruer vårt DOM helt gjennom JS og fortell nettleseren for å gjengi det, men dette er en uvanlig tilnærming; Vi er mye mer sannsynlig å definere DOM via HTML, kanskje med litt JS augmentation. Så, JavaScript har forskjellige metoder for å få tilgang til elementer i DOM.
Den enkleste av disse er document.getElementById (). Hvis vi har et HTML-dokument som er definert som dette:
Eksempel Side Her er noen eksempler på tekst.
… deretter document.getElementById ( "eksempel") vil få oss den uthevede span objekt fra DOM. Vi kan da legge til et sekund p merk som:
Accentsconagua
var newPara = document.createElement ("p"); var newTextNode = document.createTextNode ("Mer eksempel tekst som vi opprettet i fly."); newPara.appendChild (newTextNode); document.getElementById ( "eksempel") appendChild (newPara.); Dette vil oppdatere DOM, slik at det tilsvarer det som ville ha blitt opprettet hvis den opprinnelige HTML var som følger:
Eksempel Side Her er noen eksempler på tekst.
Mer eksempel tekst som vi opprettet i fly.
Hva om du ønsket å få tilgang til de to p elementer? Vi kan ikke få tilgang til dem direkte med document.getElementById (), siden de ikke har ID, men vi kan bruke document.getElementsByTagName ( "p") å skaffe en matrise som inneholder begge.
Og hvis vi hadde hatt en annen span, som dette:
Her er noen eksempler på tekst.
Mer eksempel tekst som vi opprettet i fly.
Et andre span.
Vi bryr oss ikke om disse avsnittene.
... og vi ønsket bare å skaffe de to første p koder vi kunne ringe document.getElementById ( "mittnavn1"). getElementsByTagName ( "p") bare for å hente de to - alle disse DOM-funksjonene fungerer på et hvilket som helst nivå i trestrukturen, akkurat som hvordan hver Flash Display har metoder som getChildAt ().
Dette er enkelt nok til å forstå, men det er problemer. Den første, du kan ikke bli overrasket over å høre, angår Internet Explorer.
Imponerende Webs har en flott oversikt over Internet Explorer getElementById () problem. I hovedsak, hvis du har et HTML-element som dette:
... så i de fleste nettlesere, document.getElementById ( "exampleName") vil ikke gi deg det span i spørsmålet, men i IE7, det vil. (Andre nettlesere kan bruke document.getElementsByName ( "exampleName") [0] å returnere dette span.)
Dette betyr at for å være konsekvent på tvers av nettlesere (og antar at vi ikke kan endre HTML), må vi skrive kode slik:
var theSpan; hvis (usingIE) // Jeg vil ikke forklare hvordan du oppdager nettleseren her var temp = document.getElementById ("exampleId"); // dette kan ha returnert et element med navnet "exampleId", så vi må sjekke: hvis (temp.getAttribute ("id") == "exampleId") theSpan = temp; ellers theSpan = document.getElementById ("exampleId"); Mer generelt kan vi pakke det opp i en gjenbrukbar funksjon:
funksjon getElById (id) if (usingIE) var temp = document.getElementById (id); hvis (temp.getAttribute ("id") == id) return temp; ellers theSpan = document.getElementById (id); Flott! Men dessverre er det så mange av disse irriterende små forskjellene; det vil nok overraske deg, hvis du kommer fra en straight-flash-bakgrunn, hvor "kompatibilitetsproblem" generelt betyr at Flash-spilleren er litt treg på visse plattformer.
jQuery løser dette. Den papirer over sprekkene mellom forskjellige nettlesere med sitt eget sett med funksjoner, så hvis brukerens nettleser er minst like ny som IE6, kan koden ha et jevnt grensesnitt.
Det er ikke den eneste måten at jQuery gjør JavaScript enklere ...
La oss gå tilbake til denne biten av HTML, og antar at vi vil hente den uthevede p elementer fra DOM:
Her er noen eksempler på tekst.
Mer eksempel tekst som vi opprettet i fly.
Et andre span.
Vi bryr oss ikke om disse avsnittene.
Med jQuery kan vi bare skrive:
jQuery ("# example1 p") Det er alt vi trenger! # example1 sier "få elementet med en ID av example1"og p sier "få alle p elementer som er barn av det elementet. "Det returnerer et" jQuery-objekt ", som er et JavaScript-objekt som inneholder de to p elementer selv fra JS DOM, pluss noen ekstra egenskaper og metoder som er spesifikke for jQuery.
Vi kan gjøre det enda kortere, ved å erstatte jQuery med $ - det er ikke noe mysterium her; $ er bare et kort variabelt navn. Sammenlign det med innfødt JavaScript-kode:
// vanlig JS, uten kryssbrowser-kompatibilitet: document.getElementById ("example1"). getElementsByTagName ("p") // jQuery, med kryssbrowser-kompatibilitet innebygd: $ ("# example1 p") Det er ikke bare kortere, det er konsistent med CSS, noe som gjør det enkelt å plukke opp. Vi kunne bruke nøyaktig samme velger som inne i vår jQuery () ring for å stil disse spesifikke avsnittene i et CSS stilark:
# example1 p color: red
Det er bare et veldig enkelt eksempel; Jeg kommer ikke til å gå i detalj, men jeg er sikker på at du kan se fordelen av å kunne bruke de samme selektorer i både CSS og jQuery.
Jeg nevnte at jQuery-objektene returneres av a $ () samtale hadde flere metoder og egenskaper. Disse gir deg en enkel syntaks for å skrive andre vanlige kodestykker.
For eksempel kan vi legge til en museklikk hendelseslytter og håndteringsfunksjon til begge disse p elementer som så:
$ ("# example1 p"). klikk (funksjon () alert ("Du klikket på et avsnitt!");); Eller du kan gjøre dem alle usynlige:
$ ("# example1 p"). skjul (); Eller du kan kjøre litt mer generelt JavaScript på dem:
var allText = ""; $ ("# example1 p"). hver (funksjon () allText + = $ (dette) .text ();); I hvert tilfelle gir jQuery en enkel, kort og konsekvent måte å skrive på. Det betyr at det er raskere å få kode fra hodet til nettleseren - og ikke bare fordi det krever færre tegn.
Siden Flash har sine røtter i animasjon, er vi vant til at den har mange tweening-funksjoner innebygd - både i Flash IDE og i Tween klasse, for ikke å nevne de ulike tweening-bibliotekene som er tilgjengelige.
JavaScript er annerledes; animasjon er ikke en egentlig del av plattformen. Men små tweens og overganger forventes deler av brukerens samhandling av moderne web-app: Hvis jeg legger til en ny kommentar på en tråd, glir den på plass; Hvis jeg fjerner et element fra handlekurven min, blinker det rødt og forsvinner. Uten disse ser appene upolert ut.
jQuery legger til disse små overgangene.
For eksempel, la oss si at vi ønsker å gjøre en av de nevnte avsnittene fade ut når de klikkes. Lett:
$ ("# example1 p"). klikk (funksjon () $ (dette) .fadeOut ();); Ingenting til det! Og du kan passere en varighet og Ring tilbake til fadeout () funksjon, hvis du ikke liker standardinnstillingene.
For noe litt kraftigere, kan vi bruke animere () metode. Dette er i hovedsak ekvivalent med en tween; send det et sett med CSS egenskaper og verdier for å animere mot, en varighet, en type lettelse, og en tilbakeringing, og det tar vare på alt for deg.
Det er ikke akkurat Greensock, men det er langt mer praktisk enn å skrive disse effektene fra bunnen av, og ideell for webappgrensesnitt.
Når vi snakkar om det…
HTML har noen UI-komponenter bygd inn, selvfølgelig: knapper, tekstfelter og så videre. HTML5 definerer noen få nye, som en popup-kalenderplukker og fargepiktett (selv om disse bare støttes for tiden i Opera).
Men det er ikke nok, for seg selv, å lage et komplett, moderne webappgrensesnitt. Det er ingenting å håndtere faner på en side, eller en fremdriftslinje, eller til og med et enkelt dialogvindu (utenfor varsling() og prompt ()).
jQuery brukergrensesnitt, et valgfritt bibliotek som bygger på jQuery, legger til disse ekstra widgets, med metoder og hendelser som er i samsvar med den vanlige jQuery-syntaksen. Tenk på det som et JavaScript som tilsvarer Keith Peters 'AS3 MinimalComps. Demosiden viser det bedre enn jeg kan forklare det.
Hver widget kan støtte tilpassede temaer, slik at du kan lage en enkelt hud som passer til nettstedet ditt og bruke det på hver komponent, noe som gjør det mulig å endre utseendet deres samtidig. Igjen: konsistens! I tillegg kan du bruke UI-relaterte effekter til andre elementer; gjør det mulig for brukeren å dra eller endre størrelse på et DOM-element, eller klikk og dra en boks rundt en gruppe av elementer for å velge dem for innsending.
Kombinatorkompatibilitet, enkel syntaks, tween-funksjoner og UI-elementer er de viktigste fordelene med jQuery over vanlig JS i mine øyne. Det er andre grunner til å like det, skjønt:
Så hvorfor ville ikke bruker du jQuery? Som med de fleste teknologivalg, er det et spørsmål om at du bruker riktig verktøy for jobben. Hvis du har en enkel DOM-struktur, eller ikke trenger fancy animasjoner og overganger, eller bruker hovedsakelig lerret For å gjengi grensesnittet ditt, i stedet for widgets, er jQuery sannsynligvis ikke nødvendig.
Hvis du allerede bruker et eller flere JavaScript-biblioteker - Dojo, MooTools, YUI, etc. - kan du godt finne at du ikke trenger jQuery's funksjonalitet på toppen av det de tilbyr. Men mitt mål i denne artikkelen er ikke å prøve å selge deg på et bestemt bibliotek over noen andre.
Jeg håper denne artikkelen har bidratt til å forklare akkurat hva big deal handler om jQuery, spesielt hvis du kommer fra verden av AS3 og Flash. Hvis du vil lære det, sjekk ut jQuery-taggen over på Nettuts + - jQuery for Absolute Beginners er et godt sted å starte.
Gi meg beskjed hvis du har noen spørsmål!
