Share
Om du, liksom många Flash-utvecklare, tittar på att använda HTML5 för dina webbappar, har du säkert säkert stött på jQuery. Det är ett mycket populärt JavaScript-bibliotek, som används av en stor andel av de mest besökta hemsidorna - men vad är all väsen om, och ska du använda den?
Om du känner till AS3 vet du i grunden mycket av JavaScript redan; de två språken är mycket lika. Så det är frestande att bara hoppa rakt in och koda - men det finns några viktiga begrepp du behöver förstå först. En av dessa är idén om DOM.
När du laddar upp en webbsida blir din webbläsare platt HTML i en trädliknande struktur av JavaScript-objekt som heter DOM (Document Object Model). JavaScript DOM är sålunda mycket lik ActionScript Display List; och om du är en Flex-utvecklare kan du se likheterna mellan MXML och HTML.
I Flash kan vi komma åt specifika visningsobjekt genom att navigera till dem via visningslistan, som stage.getChildAt (3) .getChildAt (0), men det här är ganska löjligt. Istället är vi mer benägna att ge visningsobjekt förekomstnamn (via Flash IDE) eller lagra referenser till dem i variabler, arrayer eller objektegenskaper, som dialogBox.okButton = ny SimpleButton ().
I JavaScript, vi skulle kunna konstruera vår DOM helt genom JS och berätta sedan för webbläsaren att göra det, men det här är ett ovanligt tillvägagångssätt. Vi är mycket mer benägna att definiera DOM via HTML, kanske med lite JS-förstoring. Så, JavaScript har olika metoder för att få tillgång till DOMs delar.
Det enklaste av dessa är document.getElementById (). Om vi har ett HTML-dokument definierat så här:
Exempel sida Här är några exempel text.
... då document.getElementById ( "exempel") kommer att få oss den markerade spänna objekt från DOM. Vi kan sedan lägga till en sekund p tag så här:
Accentsconagua
var newPara = document.createElement ("p"); var newTextNode = document.createTextNode ("Mer exempel text som vi skapade i flygningen."); newPara.appendChild (newTextNode); document.getElementById ( "exempel") appendChild (newPara).; Detta skulle uppdatera DOM, vilket motsvarar det som skulle ha skapats om den ursprungliga HTML-filen var som följer:
Exempel sida Här är några exempel text.
Mer exemplifierande text som vi skapade på flugan.
Vad händer om du då vill komma åt de två p element? Vi kan inte få tillgång till dem direkt med document.getElementById (), eftersom de inte har något ID, men vi kan använda document.getElementsByTagName ( "p") för att erhålla en grupp innehållande båda.
Och om vi hade haft en annan spänna, så här:
Här är några exempel text.
Mer exemplifierande text som vi skapade på flugan.
En andra span.
Vi bryr oss inte om dessa stycken.
... och vi ville bara få de två första p taggar vi kunde ringa document.getElementById ( "example1"). getElementsByTagName ( "p") bara för att hämta de två - alla dessa DOM-funktioner fungerar på vilken nivå som helst i trädstrukturen, precis som varje Flash Display har metoder som getChildAt ().
Det här är enkelt att förstå, men det finns problem. Den första kan du inte bli förvånad över att höra, gäller Internet Explorer.
Imponerande webbsidor har en bra översikt över Internet Explorer getElementById () problem. I huvudsak, om du har ett HTML-element så här:
... då i de flesta webbläsare, document.getElementById ( "exampleName") kommer inte ge dig det spänna i fråga, men i IE7, det kommer. (Andra webbläsare kan använda document.getElementsByName ( "exampleName") [0] att returnera detta särskilt spänna.)
Det betyder att för att vara konsekvent över webbläsare (och förutsatt att vi inte kan ändra HTML), måste vi skriva kod så här:
var theSpan; om (usingIE) // Jag kommer inte att förklara hur du upptäcker webbläsaren här var temp = document.getElementById ("exampleId"); // det här kan ha returnerat ett element med namnet "exampleId", så vi måste kontrollera: om (temp.getAttribute ("id") == "exampleId") theSpan = temp; else theSpan = document.getElementById ("exampleId"); Mer allmänt kan vi pakka upp det i en återanvändbar funktion:
funktion getElById (id) if (usingIE) var temp = document.getElementById (id); om (temp.getAttribute ("id") == id) return temp; else theSpan = document.getElementById (id); Bra! Men tyvärr finns det så många av dessa irriterande små skillnader. det kommer förmodligen att överraska dig om du kommer från en rak Flash-bakgrund, där "kompatibilitetsproblem" i allmänhet betyder att Flash Player är lite långsam på vissa plattformar.
jQuery löser detta. Det papper över sprickorna mellan olika webbläsare med sin egen uppsättning funktioner, så om användarens webbläsare är minst lika ny som IE6 kan din kod ha ett enhetligt gränssnitt.
Det är inte det enda sättet som jQuery gör JavaScript enklare ...
Låt oss gå tillbaka till det här HTML-utdraget, och antar att vi vill hämta den markerade p element från DOM:
Här är några exempel text.
Mer exemplifierande text som vi skapade på flugan.
En andra span.
Vi bryr oss inte om dessa stycken.
Med jQuery kan vi bara skriva:
jQuery ("# example1 p") Det är allt vi behöver! # exempel1 säger "få elementet med ett ID av exempel1"och p säger "få alla p element som är barn av det elementet. "Det returnerar ett" jQuery-objekt ", vilket är ett JavaScript-objekt som innehåller de två p element själva från JS DOM, plus några extra egenskaper och metoder specifika för jQuery.
Vi kan göra det ännu kortare fortfarande, genom att ersätta jQuery med $ - det finns inget mysterium här; $ är bara ett kort variabelt namn. Jämför det med inbyggd JavaScript-kod:
// regular JS, utan kompatibilitet med tv-webbläsare: document.getElementById ("example1"). getElementsByTagName ("p") // jQuery, med kompatibilitet med korsbrowser inbyggd: $ ("# example1 p") Det är inte bara kortare, det är förenligt med CSS, vilket gör det enkelt att hämta. Vi kan använda exakt samma väljare som inuti vårt jQuery () Ring till stil dessa specifika punkter i ett CSS stilark:
# example1 p color: red
Det är bara ett mycket enkelt exempel; Jag kommer inte att gå in i detalj, men jag är säker på att du kan se nytta av att kunna använda samma selektorer i både CSS och jQuery.
Jag nämnde att jQuery-objekten återvände av a ($) samtal hade ytterligare metoder och egenskaper. Dessa ger dig en enkel syntax för att skriva andra vanliga bitar av kod.
Till exempel kan vi lägga till en musklickhändelselysare och hanteringsfunktion till båda dessa p element som så:
$ ("# example1 p"). klicka (funktion () alert ("Du klickade på en paragraf!");); Eller du kan göra dem alla osynliga:
$ ("# example1 p"). hide (); Eller du kan köra lite mer generell JavaScript på dem:
var allText = ""; $ ("# example1 p"). varje (funktion () allText + = $ (detta) .text ();); I varje fall ger jQuery ett enkelt, kort och konsekvent skrivningssätt. Det betyder att det är snabbare att få kod från huvudet till webbläsaren - och inte bara för att det kräver färre tecken.
Eftersom Flash har sina rötter i animering, är vi vana vid att den har många tweening-funktioner inbyggda - både i Flash IDE och i Tween klass, för att inte tala om de olika tweening-biblioteken som är tillgängliga.
JavaScript är annorlunda; animering är inte en inbyggd del av plattformen. Men små tweens och övergångar förväntas vara delar av användarinteraktionen av den moderna webappen: om jag lägger till en ny kommentar på en tråd glider den på plats; Om jag tar bort ett föremål från min kundvagn, blinkar det rött och försvinner. Utan dessa ser appar på opolerad.
jQuery lägger till dessa små övergångar.
Låt oss till exempel säga att vi vill göra något av de ovan nämnda punkterna blekna när de klickas. Lätt:
$ ("# example1 p"). klicka (funktion () $ (detta) .fadeOut ();); Ingenting till det! Och du kan passera en varaktighet och ring tillbaka till tona ut() funktion, om du inte gillar standardinställningarna.
För något lite kraftfullare kan vi använda animera() metod. Detta är i huvudsak ekvivalent med en tween; skicka den en uppsättning CSS-egenskaper och värden för att animera mot, en varaktighet, en typ av lättnad och en återuppringning, och det tar hand om allt för dig.
Det är inte precis Greensock, men det är mycket bekvämare än att skriva dessa effekter från början och perfekt för webappgränssnitt.
Talar om vilka…
HTML har några UI-komponenter inbyggda, naturligtvis: knappar, textfält och så vidare. HTML5 definierar några nya, som en popup-kalenderväljare och färgpalett (även om dessa bara stöds för närvarande i Opera).
Men det räcker inte för att skapa en komplett, modern webappgränssnitt. Det finns inget att hantera flikar på en sida, eller en statusfält, eller till och med ett enkelt dialogfönster (utanför varna() och prompt()).
jQuery-användargränssnittet, ett valfritt bibliotek som bygger på jQuery, lägger till dessa extra widgets, med metoder och händelser som överensstämmer med den vanliga jQuery-syntaxen. Tänk på det som ett JavaScript som motsvarar Keith Peters AS3 MinimalComps. Demoversidan visar det bättre än jag kan förklara det.
Varje widget kan stödja anpassade teman, så du kan skapa en enda hud som passar din webbplats och tillämpa den på varje komponent, vilket gör det möjligt att ändra sitt utseende på en gång. Återigen: konsistens! Dessutom kan du tillämpa UI-relaterade effekter på andra element. gör det möjligt för användaren att dra eller ändra storlek på ett DOM-element, eller klicka och dra en ruta runt en grupp av element för att välja dem för inlämning.
Kompatibiliteten med kryssläsare, enkel syntax, tween och UI-element är de främsta fördelarna med jQuery över vanlig JS i mina ögon. Det finns andra skäl att tycka om det:
Så varför skulle inte använder du jQuery? Precis som med de flesta tekniska val är det en fråga att se till att du använder rätt verktyg för jobbet. Om du har en enkel DOM-struktur, eller behöver inte fantasifulla animationer och övergångar, eller använder huvudsakligen duk för att göra ditt gränssnitt, snarare än widgets, är jQuery förmodligen inte nödvändigt.
Om du redan använder ett eller flera JavaScript-bibliotek - Dojo, MooTools, YUI, etc. - kanske du tycker att du inte behöver jQuerys funktionalitet utöver vad de erbjuder. Men mitt mål i den här artikeln är inte att försöka sälja dig på ett visst bibliotek ovanför någon annan.
Jag hoppas att den här artikeln har hjälpt till att förklara vad storheten handlar om jQuery, särskilt om du kommer från världen av AS3 och Flash. Om du vill lära dig det, kolla in jQuery-taggen över på Nettuts + - jQuery för Absoluta nybörjare är ett bra ställe att börja.
Låt mig veta om du har några frågor!
