Share
Avid läsare av Envato Tuts + kommer från en mängd olika bakgrunder när det gäller erfarenhet, kultur och vad de letar efter. När det gäller teknik är det lätt att ta för givet de som precis börjat, särskilt om du har gjort någon typ av utveckling under en längre tid.
Det sagt är en av de trevliga sakerna att bli utvecklare att när man har tagit hand om ett visst språk och uppsättning färdigheter är det lätt att översätta dem till andra utvecklingsområden.
I ett försök att se till att vi når den bredaste publiken möjligt, syftar vi till att publicera innehåll riktat direkt till nybörjare som är nyfiken på ett visst språk, plattform eller ansökan.
Och i den här artikeln kommer vi att fokusera uteslutande på jQuery. Närmare bestämt ska vi titta på allt som jQuery erbjuder och hur det kan hjälpa oss, och vi ska granska några av de projekt som också har kommit fram till det första biblioteket.
Lär dig JavaScript: Den fullständiga guiden
Vi har byggt en komplett guide för att hjälpa dig att lära dig JavaScript, oavsett om du precis börjat som webbutvecklare eller vill utforska mer avancerade ämnen.
Först släpptes 2006 av John Resig, utgjorde jQuery ett JavaScript-bibliotek på flera plattformar som gjorde det enklare att skriva lösningar på kundsidan.
När det här släpptes var det särskilt användbart på grund av de inkonsekvenser som fanns bland JavaScript-implementeringar i Internet Explorer, Firefox och så småningom Google Chrome (som inte släpptes till 2008).
Som definierad av Wikipedia:
jQuery är ett korsplattforms-JavaScript-bibliotek som är utformat för att förenkla klientsidan av HTML-skript. jQuery är det mest populära JavaScript-biblioteket som används idag, med installation på 65% av de 10 miljoner mest trafikerade webbplatserna på webben. jQuery är fri, öppen källkodsprogram licensierad enligt MIT-licens.
Dessutom säger jQuery-webbplatsen själv:
jQuery är ett snabbt, litet och funktionsrikt JavaScript-bibliotek. Det gör saker som HTML-dokumentövergripande och manipulering, händelsehantering, animering och Ajax mycket enklare med ett lättanvänt API som fungerar över en mängd olika webbläsare. Med en kombination av mångsidighet och utvidgningsbarhet har jQuery förändrat det sätt som miljontals människor skriver JavaScript.
Men vad betyder detta för oss som utvecklare? Kanske är det bästa sättet för oss att förstå vad allt biblioteket erbjuder att undersöka vad det hävdar att erbjuda.
När en webbläsare gör en webbsida är det en visuell representation av det som kallas DOM (eller dokumentobjektmodellen). Denna modell kan konceptuellt modelleras som en träddatastruktur där det finns vissa noder var och en med rötter och löv.
Se till exempel den här bilden enligt webbstegboken:
När du arbetar med jQuery kan du enkelt genomgå innehållet i DOM för att nå eller hitta noder, element eller värden du syftar till att hämta.
Det betyder att om du letar efter texten till a div element som har ett unikt ID, det är lätt att göra.
Accentsconagua
/ ** * Den här koden söker en div med ID för "mitt unika element" * och tar sedan bort det från visning. * / $ ('div # my-unique-element') .hide ();Om du försöker gå igenom alla spänna element, det kan du också göra:
/ ** * Det här är det grundläggande sättet att konfigurera en slinga i jQuery. Det kommer att * ta alla spänningselementen på sidan och sedan * låta dig iterera genom dem. * / $ ('span') .each (funktion () // Process spanelementet här);Vi granskar denna speciella funktionalitet lite mer i nästa avsnitt, eftersom det går att visa några av det extra arbete du kan göra för att manipulera sidan.
Beviljas, dessa exempel är enkla och saker kan bli mer komplicerat, särskilt när vi introducerar metodkedja. Till exempel:
$ excerpt.on ('keydown', funktion (evt) if ((17 === evt.keyCode || 91 === evt.keyCode) || 86 === evt.keyCode) om (-1 = == $ .inArray (evt.keyCode, keymap)) keymap.push (evt.keyCode);) på ('keyup', funktion () om user_has_pasted_content (keymap)) resize_textarea ; keymap = [];);Vid det här laget ska du inte veta vad som händer med koden, men det är tänkt att visa hur användbart jQuery kan vara i vissa situationer genom hjälp av hjälparfunktioner och metodkedja.
Det räcker med att säga att kraften i jQuery ligger i sin förmåga att fråga DOM (därav namnet jQuery) och sedan göra justeringar till det genom användandet av ett väl dokumenterat API (som är fyllt med exempel på hur man använder varje funktion).
Man kan hävda att allt annat härrör från den egenskapen ensam. Så med det sagt, låt oss fortsätta titta på något av det som ser ut.
När det gäller att faktiskt manipulera DOM har jQuery mycket av funktioner som gör att vi kan ändra vad våra besökare ser.
Några av dessa funktioner är enkla, som till exempel tillåter oss att show eller Dölj element som inte är synliga när en sida laddas. Andra funktioner gör att vi kan skapa nya element och bifoga dem till ett befintligt element, eller prepend dem framför en hel lista.
Om du försöker gå igenom alla spänna element för att lägga till en klassattribut till dem, kan du också göra det:
/ ** * Det här är det grundläggande sättet att konfigurera en slinga i jQuery. Det kommer att * ta alla spänningselementen på sidan och sedan * lägga till en anpassad klassattribut till dem. * / $ ('span') .each (funktion () $ (detta) .addClass ('my-custom-class'););Detta klarar knappt på ytan av vilken DOM-manipuleringsfunktionalitet som finns inom jQuery. Genom att titta på API, under avsnittet Manipulation kan du se hur många alternativ som är tillgängliga för oss (tillsammans med bra exempel).
För att ge ytterligare exempel kan vi också:
Kom ihåg att en av de saker som gör jQuery till en attraktiv lösning för så många utvecklare är att alla funktioner och exempel vi tittar på i den här artikeln är kompatibla med webbläsaren.
Om du är helt ny på JavaScript, är en sak som är nyckeln till att förstå hur det fungerar med den sida som visas i webbläsaren att den svarar på olika händelser.
Det vill säga när en användare klickar på ett element, gör ett tangenttryck eller klickar på musen, så öppnar webbläsaren en signal som motsvarar händelsen som inträffade. Det här gör det möjligt för oss att utnyttja användarens interaktion med webbläsaren.
Specifikt, varje gång en användare gör det något till sidan kan vi svara med hjälp av en anpassad händelse. Problemet är att inte alla webbläsare implementerar händelser på samma sätt (det är därför det finns behov av en specifikation, men det är innehåll för ett annat inlägg).
Lyckligtvis gör jQuery det här mycket enklare genom att definiera ett konsekvent namn för alla händelser så att vi kan använda samma namn för en händelse som vi försöker svara på och det kommer att fungera över alla större webbläsare.
När jQuery först kom ut var Flash fortfarande relativt populär, och generella animationer över hela webben var inte helt döda.
När vi pratar om animering i samband med jQuery talar vi inte om samma typ av effekter eller beteenden som vi brukar se med äldre teknik. Istället pratar vi om effekter som ger användarna feedback som något har hänt på skärmen. Dessutom är det mindre invasivt och kan lägga till en fin stilstil för en sida eller applikation när den används korrekt (allt kan missbrukas).
Du kan se hela effekter-API på den här sidan, men det är värt att notera att jQuery-effekterna kan variera var som helst från hantering, enkelt att blekna in och blekna ut ur element eller glidande element i syfte att se något mer komplext, som att manipulera kön av effekter som är registrerade att elda mot ett element.
Beviljas, det senare fallet förutsätter att du har lite erfarenhet av effekter API, men det är något som kommer naturligt med tillräcklig tid med biblioteket och dokumentationen.
Om du inte är bekant med Ajax är det väsentligen ett sätt att en webbsida kan ringa till servern, hantera svaret och uppdatera en del av en sida utan att behöva uppdatera hela sidan. Även om tekniken har funnits länge, är det fortfarande något som är riktigt coolt och kan ge en riktigt snygg funktionalitet inom ramen för en sida eller webbapplikation när den används på ett lämpligt och effektivt sätt.
Även om stöd för Ajax inte är så illa som det var för fem eller tio år sedan, kan implementeringen för API-en över webbläsare variera så lite. Det betyder att vi har till uppgift att skriva Ajax-kod specifikt för en webbläsare Microsoft tillhandahåller, som Google tillhandahåller, som Apple tillhandahåller, som Chrome tillhandahåller och så vidare.
Det är åtminstone utan jQuery. Tack vare sitt stöd för Ajax kan vi utnyttja Ajax på ett antal olika sätt utan att behöva komma in i inkonsekvenserna för webbläsaren. Det är faktiskt trivialt att hantera SKAFFA SIG och POSTA begär samtidigt som man har möjlighet att göra långt mer avancerade samtal med hjälp av $ .ajax metod.
När du väl har väntat att ha API: n tillgängligt i kärnan i din ansökan eller till ditt förfogande, är det svårt att tänka dig att inte arbeta med det (eller med något liknande).
En funktion som många serverns och biblioteks server-sidor erbjuder är möjligheten att skapa tillägg till kärnkodbasen. Moderna klientsidor och ramar tillåter detta, och jQuery är inte annorlunda.
Säg, till exempel, jobbar du i en viss nisch där du befinner dig att skapa samma funktionalitet för varje projekt. Eller om du har en produkt som du säljer och du har lite anpassad kod som behöver integreras med jQuery, men det kanske kräver olika parametrar beroende på projektet.
Vad gör man då?
Lyckligtvis stöder jQuery plugins. Det betyder att vi som utvecklare inte bara har förmåga att knacka på plugins som andra har skrivit (varav några finns tillgängliga på jQuery-webbplatsen, andra är tillgängliga på GitHub), men vi kan också utveckla egna plugins.
Vi kan sedan återanvända den här koden i våra egna projekt, eller göra dem tillgängliga på webbplatser som GitHub för andra att erbjuda bidrag, korrigeringar, funktioner och så vidare.
Sedan starten har jQuery vuxit till mer än bara ett JavaScript-bibliotek som ger oss möjligheten att utföra både enkla och kraftfulla operationer på ett plattformskompatibelt sätt.
Förutom kärnbiblioteket har jQuery också resulterat i två andra anmärkningsvärda projekt som är värda att nämna innan vi sätter ihop den här artikeln. Även om vi inte kommer att titta på detaljerna i vad varje projekt ger, kommer vi att ta en överblick över varje projekt, om vi inte behöver veta om vad som är tillgängligt för oss, om vi behöver det för framtida arbete.
Från jQuery UI-hemsidan:
jQuery UI är en kurerad uppsättning gränssnittsinteraktioner, effekter, widgets och teman som bygger på jQuery JavaScript Library. Oavsett om du bygger mycket interaktiva webbapplikationer eller behöver bara lägga till en datumväljare till en formkontroll, är jQuery UI det perfekta valet.
Detta bibliotek publicerades första gången 2007, ungefär ett år efter självständigt. Det fungerar som ett komplementärt bibliotek till jQuery genom att det utnyttjar bibliotekets överplattformskompatibilitet för att hjälpa till att skapa widgets som kan användas på en webbplats.
Många av widgetsna innehåller vanligt använda funktioner. Till exempel:
Det finns också avancerade funktioner som effekter, verktyg och interaktioner. Allt som vi har täckt hittills (liksom de saker vi inte har) innehåller ett brett utbud av callbacks, attribut och funktioner som gör det möjligt för oss att interagera med dem i sin helhet.
Alla de ovan nämnda funktionerna erbjuder också olika teman för att se till att de passar utseendet på din webbplats. Slutligen är alla funktioner som beskrivs här och ingår på webbplatsen väl dokumenterade.
Från jQuery Mobile hemsida:
jQuery Mobile är ett HTML5-baserat användargränssnitt som är utformat för att göra mottagliga webbplatser och appar som är tillgängliga på alla smartphone-, surfplattformar och stationära enheter.
Det här biblioteket är den senaste introduktionen till bibliotekets familj som släpptes 2010 (med den senaste stabila versionen 2014).
Liksom dess UI-motsvarighet, erbjuder den ett väl dokumenterat API och anpassade teman som är idealiska för de olika enheter som ditt projekt kan rikta sig mot.
Medan de två tidigare biblioteken erbjuder en uppsättning plattformsfunktioner som gör att vi kan skriva jQuery och tillhörande widgets på ett relativt enkelt sätt innehåller jQuery Mobile en CSS-ram som gör det möjligt för oss att även utforma användargränssnitt som är idealiska för naturen hos vår respektive projekt.
Ramverket omfattar:
Därifrån erbjuder biblioteket vad du kan förvänta dig av ett projekt som är inriktat på att göra webbutveckling mycket enklare för olika mobila enheter. Dessa inkluderar saker som:
Slutligen är antalet webbläsare som fortfarande är tillgängliga och används i det vilda höga. Även om vi har sett en minskning av användningen av äldre versioner av Internet Explorer och bredare adoptering av Chrome, har vi fortfarande vissa användare som klarar av äldre webbläsare av flera skäl..
Ibland är dessa användare på äldre webbläsare på grund av företagets intranät. Ibland har det att göra med de mobila enheterna och / eller telefonerna de har tilldelats för sitt jobb. Och ibland har det bara att göra med oförmågan att uppgradera till något bättre.
Oavsett, dock. jQuery Mobile erbjuder stöd för de flesta webbläsare och operativsystem som för närvarande finns tillgängliga. Om du inte är säker på om plattformen du riktar in stöds av biblioteket, kan du alltid kolla webbläsarens supportsida.
Förstå vad jQuery är (och vad det inte är) och hur det är relaterat till JavaScript är viktigt så att du vet vad som görs för dig och vad du kan göra när du behöver arbeta med biblioteket.
Som tidigare nämnts kan vissa hävda att du behöver lära dig JavaScript först och sedan lära dig jQuery; andra kan hävda att inlärning jQuery är ett bra sätt att arbeta dig bakåt till JavaScript.
Oavsett fall är jQuery ett långvarigt bibliotek i JavaScript-ekonomin och det är ett som används i ett antal mycket populära projekt (t.ex. WordPress), så att du lär dig att det kommer att ge dig ett ben på ett antal olika sätt.
JavaScript har blivit ett av de faktiska språken för att arbeta på webben. Det är inte utan sina inlärningskurvor, och det finns gott om ramar och bibliotek för att hålla dig upptagen också. Om du letar efter ytterligare resurser att studera eller använda i ditt arbete, kolla vad vi har tillgängligt på Envato-marknaden.
Om det inte räcker finns det gott om dokumentation och öppen källkod som du kan granska och läsa. Det finns också allmänt tillgängliga plugins och en aktiv blogg för att hålla dig i loop med alla nyheter som händer med bibliotekets utveckling.
För dem som är intresserade av JavaScript (särskilt i WordPress-sammanhang) kan du följa mig på min blogg och / eller Twitter på @tommcfarlin. Du kan fånga alla mina kurser och handledning på min profilsida också.
Tveka inte att lämna några frågor eller kommentarer i foderet nedan, och jag vill sikta på att svara på var och en av dem.
