Att göra webben interaktiv: en introduktion till jQuery

Annons

jQuery är ett skriptbibliotek på klientsidan som nästan varje modern webbplats använder - det gör webbplatser interaktiva. Det är inte det enda Javascript-biblioteket, men det är det mest utvecklade, mest stödda och mest använda. Det är en av byggstenarna för alla moderna webbplatser. Men vad är jQuery exakt, vad gör det så populärt och varför ska du bry dig om det om du börjar som webbutvecklare?

Vad är jQuery?

jQuery är en förlängning av Javascript, ett bibliotek av Javascript funktioner och verktyg som lägger till visuell stil och gör avancerade funktioner enkla att implementera på bara några kodrader. Det stöds över webbläsare och öppen källkod. Dessutom kan du utöka jQuery-funktionaliteten med enkla att använda plugins.

jQuery är byggt ovanpå Javascript, men det lägger till metoder och funktionalitet som inte finns i rent Javascript. Det skapades för att förenkla Javascript-användningen och ta bort krångelna med olika Javascript-implementering i olika webbläsare. Med jQuery kan du bara skriva en gång, och jQuery kommer att tolka din kod korrekt för alla webbläsare.

Huvudfunktionen för jQuery är för DOM-manipulation (DOM är dokumentobjektmodellen), och det betyder den underliggande strukturen på alla webbsidor du besöker. Varje enskild sak du ser på sidan - och många du inte ser - är representerade i DOM.

jQuery är inte det enda Javascript-biblioteket där ute, men det är det mest populära - cirka 55% av de 10 000 bästa webbplatserna använder det. Prototyp, MooTools och Scriptaculous är populära alternativ, men stöds inte i stort.

Client Side vs Server Side

De flesta webbsidor genereras på serversidan - MakeUseOf använder PHP och MySQL (i form av WordPress) för att hämta artikeldata från en databas och sedan applicera en mall på den informationen. Den resulterande sidan skickas till din webbläsare, tolkas och visas till dig. Om du klickar på en länk gör en ny begäran till databasen, och ytterligare en sida genereras. Men tänk om du vill skapa någon form av interaktivitet på sidan? Ett formulär som kontrollerar vad användaren skriver (som Twitter, som räknar hur många brev du har kvar), a -knappen som visar en dialogruta, eller kanske du vill ladda lite mer data utan att läsa in hela sida?

Det är här klient-skript kommer in i spelet. Det är där klienten - din webbläsare - gör det tunga lyft. De flesta webbplatser, inklusive den här, använder lite av båda.

Varför använda jQuery?

Visuell stil

jQuery låter dig ändra delar av webbsidan som svar på användarens åtgärder. Som ett snabbt exempel, klicka på den här länken - varje länk på sidan kommer ändra till rött. Onyttig? Kanske, men du får poängen. Bildspel är en vanlig användning av jQuery. Att balansera meningslösa visuella effekter och verkligen användbara tillägg till användarupplevelsen är en del av färdigheten i att vara webbutvecklare.

Här är en snabblista av några riktigt fantastiska effekter du kan uppnå.

Enkla händelser

Nästan all programvara fungerar på en händelsemodell - klicka på något och ett klickhändelse utlöses. Dra fingret över en surfplatta, och en draghändelse utlöses. Program "lyssnar" på dessa händelser och gör något - jQuery låter dig göra det i en webbläsare.

Utför AJAX helt enkelt

Asynkron Javascript och XML är ett sätt att kommunicera till en fjärrserver utan att behöva ladda en annan sida. Ett bra exempel på detta är Facebook-statusströmmen. Försök att bläddra igenom alla dina uppdateringar tills du kommer till botten. Det kan du inte. Så snart du kommer till slutet upptäcker jQuery att du är nära och skickar en AJAX-begäran om fler statuser kan visas.

Den injicerar sedan dem på den aktuella sidan, utan att du inser det. Du får en oändlig ström av uppdateringar, men de är inte alla laddade i början.

Avancerade användargränssnitt

Tillsammans med jQuery UI core plugin, du kan bygga kompletta webbapplikationer med hjälp av standardformkomponenter; framstegsfält, reglage, knappar, flikar, dra och släpp - det är allt där. Med ett enkelt temasystem kan du anpassa utseendet och känna till ett av standarderna.

Ska jag bry mig?

Om du har något intresse alls i utveckla webbplatser Vilket programmeringsspråk att lära sig - webbprogrammeringIdag ska vi ta en titt på de olika webbprogrammeringsspråken som driver Internet. Detta är den fjärde delen i en nybörjars programmeringsserie. I del 1 lärde vi oss det grundläggande för ... Läs mer , ja - jQuery är en sak du definitivt behöver lära dig. Om du någonsin har frågat dig själv "Hur kan jag få X att göra Y när användaren gör Z?", då kommer du att älska jQuery. Att lägga till den på din webbplats är så enkelt som lägga till en länk till den i rubriken; eller berätta för WordPress att ladda det.

Vill du lära dig jQuery? Låt oss veta i kommentarerna så ser jag vad jag kan göra.

Bildkrediter: Dynamisk roterande skylt skapad med jQuery, PistolSlut.com, Diagram gjord med jQuery